Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AndresLopezCorrales/Countries-WebPage/llms.txt

Use this file to discover all available pages before exploring further.

The SVG world map in Country-Click is embedded directly in src/index.php. Each clickable country is an <a> element with class country and an xlink:title attribute set to the country’s English name. Adding a new country to the map means inserting a new <a class="country"> element with the correct SVG path geometry inside the existing map group. No JavaScript changes are required — the existing click handler reads the xlink:title attribute and sends it to the REST Countries API automatically.

​
How existing countries are structured

Every clickable country in the SVG follows the same pattern. Here is a representative example taken directly from index.php:
index.php (SVG excerpt)
<a class="country" xlink:href="#" xlink:title="France">
    <path d="M ... SVG path data ..." />
</a>
Three attributes are required on every <a> element:
AttributeValuePurpose
class="country"Fixed stringApplies the Tailwind fill and hover styles defined in src/input.css
xlink:href="#"Fixed string #Keeps the element as a non-navigating link; the click is handled by JavaScript
xlink:title="ExactEnglishName"Country nameThe name sent to the REST Countries API. Must match a valid English or official name in the REST Countries database
The .country class in src/input.css applies fill-brown-hard, hover:fill-brown-medium, and a subtle scale transition to every element that carries it, so a new country will automatically inherit the same visual treatment as existing ones without any additional CSS.

​
Finding SVG path data

Each country’s shape is an SVG <path> element whose d attribute contains move, line, and curve commands. The map in index.php uses the following coordinate system:
  • viewBox: 0 0 1920.000000 1152.000000
  • Group transform: translate(0.000000,1152.000000) scale(0.100000,-0.100000)
This transform flips the Y-axis (the -0.100000 Y-scale) and scales path coordinates down by a factor of ten relative to the internal coordinate space. Any path you add must use coordinates that match this existing system — you cannot mix in paths from an SVG with a different viewBox or transform without adjusting the coordinates. A practical approach for obtaining compatible path data:
  • Extract country paths from a world SVG dataset such as Natural Earth at 1:110m or 1:50m scale.
  • Transform the coordinates to match the existing viewBox scale using an SVG editor (Inkscape, Figma) or a coordinate-mapping script.
  • Verify the path visually by placing it in the <g> group and checking alignment against neighbouring countries in a browser.

​
Step-by-step: adding a country

1

Identify the exact country name in the REST Countries API

The xlink:title value is passed verbatim to https://restcountries.com/v3.1/name/{name}. Test the name before adding it:
curl "https://restcountries.com/v3.1/name/YourCountryName"
If the response is a JSON array containing country data, the name is valid. If it returns {"status":404,"message":"Not Found"}, try the official name (for example, "Democratic Republic of the Congo" instead of "Congo").
2

Obtain the SVG path d attribute

Find or generate an SVG <path> for the territory whose coordinates align with the existing map coordinate system (viewBox 0 0 1920 1152, group transform translate(0,1152) scale(0.1,-0.1)). Verify the path visually before inserting it.
3

Locate the map group in index.php

Open src/index.php and find the <g> element that contains all existing country paths. It begins with:
index.php
<g transform="translate(0.000000,1152.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
All <a class="country"> elements must be placed inside this group. The fill="#000000" on the group is overridden by the .country Tailwind class on each individual <a>.
4

Add the new <a> element inside the <g> group

Insert your new country element anywhere inside the <g> group. Order within the group does not affect functionality, but keeping countries geographically grouped makes the file easier to maintain:
index.php
<a class="country" xlink:href="#" xlink:title="YourCountryName">
    <path d="M ... your path data ..." />
</a>
5

Save and reload

Save index.php and reload the page in your browser. The new country should appear on the map with the standard brown fill, respond to hover with a lighter fill and a subtle scale animation, and display the country info panel when clicked.

​
Verifying the country name

The xlink:title value is passed directly to the REST Countries API endpoint https://restcountries.com/v3.1/name/{name}. You can confirm a name is valid before editing any files: 
curl "https://restcountries.com/v3.1/name/YourCountryName"
A successful response is a JSON array. A failed response looks like: 
{"status":404,"message":"Not Found"}
If the common English name returns 404, try the official name. For example, "Ivory Coast" may need to be entered as "Côte d'Ivoire" depending on the API version. The existing map uses names like "United States of America", "People's Republic of China", "Democratic Republic of the Congo", and "Republic of the Congo" — match the level of specificity the API expects.

​
Countries without region images

The menu() method in src/controller/ApiConsumer.php uses a switch statement to select a region illustration image based on the region field returned by the REST Countries API. The current switch covers five regions: Africa, Americas, Asia, Europe, and Oceania.If you add a country whose API response returns a region not covered by the switch — for example "Antarctic" — the $imagenReg variable will never be assigned, and PHP will emit an undefined variable warning when it tries to render the info panel.To fix this, add a new case to the switch in ApiConsumer::menu():
ApiConsumer.php
case "Antarctic":
    $imagenReg = "./resources/img/antarctic.png";
    break;
Then add the corresponding image file to src/resources/img/. The filename and path must match the value you assign to $imagenReg.
Do not duplicate an existing xlink:title value. If two <a> elements inside the <g> group share the same title, clicking either one will trigger the same API lookup and display the same country data — there is no deduplication logic. Every xlink:title must be unique and must correspond to a valid name in the REST Countries database.

Build docs developers (and LLMs) love

Get started for freeTalk to us