` element is added showing the country name on hover All countries start with a neutral gray color (`#555555`). As you guess, the map builds up a colorful visual story of your attempts. ### Country code matching The system uses ISO 3166-1 alpha-2 country codes: * **United States**: `US` * **Germany**: `DE` * **Japan**: `JP` * **Brazil**: `BR` * **Australia**: `AU` These codes are standardized internationally and match the IDs in the world map SVG file. <Card title="Fun fact" icon="map"> The world map SVG contains over 195 country paths, each carefully crafted to accurate geographic shapes and positioned in the correct location. </Card> ## Color legend A legend appears in the bottom-left corner of the map, explaining the color-coding system: * Always visible and overlaid on the map * Black semi-transparent background for readability * Lists all five color categories with colored circles * Cannot be interacted with (pointer-events disabled) The legend ensures you never forget what each color means during gameplay. ## Visual feedback flow Here's what happens visually when you make a guess: <Steps> <Step title="Guess submitted"> You select a country from the autocomplete dropdown and submit your guess. </Step> <Step title="API processes guess"> The backend determines the relationship between your guess and the target (neighbor, same region, etc.). </Step> <Step title="Map updates"> The guessed country lights up in the appropriate color on the map, providing instant visual feedback. </Step> <Step title="Pattern emerges"> As you make more guesses, the map shows a colorful pattern. Yellow neighbors reveal the target's location, orange and red-orange guesses narrow the region. </Step> <Step title="Target revealed"> When you win or exhaust all guesses, the target country lights up in green, completing the visual story. </Step> </Steps> <Info> The map persists all your guesses for the current challenge. If you refresh the page, your previous guesses remain highlighted because they're saved in your session progress. </Info> ## Technical implementation The map leverages several modern web technologies: **SVG rendering**: `react-svg` library loads and injects the world map SVG\ **Transform controls**: `react-zoom-pan-pinch` provides zoom/pan functionality\ **Client-side**: Built as a React client component with useState and useEffect hooks\ **Dynamic styling**: SVG attributes are manipulated via DOM queries ### Performance optimizations * The SVG is loaded once and cached by the browser * Country highlighting uses efficient DOM attribute updates, not re-renders * Transform operations are GPU-accelerated for smooth zooming and panning * The map component only re-renders when the guesses array changes ## Using the map strategically Maximize the map's value with these tips: 1. **Zoom in on yellow neighbors**: When a guess turns yellow, zoom in on that area to identify surrounding countries 2. **Look for patterns**: Multiple orange guesses in one subregion indicate the target is likely nearby 3. **Use with hints**: Cross-reference map patterns with hint information for more accurate guesses 4. **Reset often**: Use the Reset button to get back to the full world view when you're reorienting your strategy The map isn't just visual feedback—it's a powerful strategic tool that helps you systematically narrow down possibilities and visualize geographic relationships.

> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/igorek05m/daily-geogame/llms.txt > Use this file to discover all available pages before exploring further. # Interactive map > Explore Daily GeoGame's interactive SVG world map with zoom, pan, and color-coded country highlighting ## Map overview The interactive map is the visual centerpiece of Daily GeoGame, providing real-time feedback on your guesses through color-coded country highlighting. Built on SVG technology, the map supports smooth zooming and panning to help you explore every corner of the world. ### Key capabilities * **Color-coded feedback**: Each guess changes the map to show how close you are * **Zoom and pan controls**: Navigate freely to examine specific regions * **Neighbor visualization**: See which countries border your guessed nations * **Country tooltips**: Hover over highlighted countries to see their names * **Responsive design**: Works seamlessly on desktop, tablet, and mobile devices The map uses an SVG (Scalable Vector Graphics) format, which means it remains sharp and clear at any zoom level—no pixelation or blurriness. ## Color-coding system The map uses a five-color system to provide instant visual feedback on how close your guess is to the target country: **Color**: Dark green\ **Meaning**: This is the correct answer\ **When shown**: After you guess correctly or the game ends **Color**: Bright yellow\ **Meaning**: Shares a land border with the target\ **When shown**: When your guess directly borders the target country **Color**: Orange\ **Meaning**: In the same subregion (e.g., "Central Europe")\ **When shown**: When your guess is in the target's subregion but not a neighbor **Color**: Red-orange\ **Meaning**: In the same broad region (e.g., "Europe")\ **When shown**: When your guess is in the target's region but different subregion **Color**: Dark red\ **Meaning**: Not geographically related to the target\ **When shown**: When your guess is in a completely different region ### Understanding geographic relationships The color system is based on geographic proximity data from the RestCountries API: * **Borders**: Physical land boundaries between countries * **Subregion**: Detailed geographic groupings (e.g., "Eastern Europe", "Southeast Asia") * **Region**: Broad continental categories (e.g., "Europe", "Asia", "Africa") **Africa**: Northern Africa, Eastern Africa, Western Africa, Southern Africa, Middle Africa **Americas**: Caribbean, Central America, South America, North America **Asia**: Central Asia, Eastern Asia, South-Eastern Asia, Southern Asia, Western Asia **Europe**: Eastern Europe, Northern Europe, Southern Europe, Western Europe **Oceania**: Australia and New Zealand, Melanesia, Micronesia, Polynesia **Antarctica**: (no subregions) Island nations with no land borders can still be neighbors if they're in the same subregion as the target. For example, Caribbean island nations are treated as neighbors to each other. ## Zoom and pan controls The map includes intuitive navigation controls built with the `react-zoom-pan-pinch` library: ### Button controls Three buttons appear in the top-right corner of the map: Zooms in on the map, increasing the view scale by one step. Click repeatedly to zoom in further. Zooms out from the map, decreasing the view scale by one step. Click repeatedly to zoom out further. Resets the map to its original position and zoom level, centered on the world view. ### Mouse and touch gestures Scroll your mouse wheel up to zoom in or down to zoom out. The zoom centers on your cursor position. Click and hold anywhere on the map, then drag to pan in any direction. Release to stop panning. Double-click anywhere on the map to zoom in on that location. On tablets and phones, use a two-finger pinch gesture to zoom in or out. On touch screens, tap and drag with one finger to pan the map. ### Zoom limits The map enforces sensible zoom boundaries: * **Minimum scale**: 0.5x (zoomed out to half size) * **Maximum scale**: 12x (zoomed in to 12 times size) * **Default scale**: 1x (full world view, centered) The map allows panning beyond its boundaries (limitToBounds: false) to give you freedom to explore, but you can always click the Reset button to return to the centered view. ## Country highlighting As you make guesses, countries are highlighted on the map in real-time through SVG manipulation: ### How it works The map component (`/app/components/Map.tsx:51-103`) uses a smart highlighting system: 1. Each country is represented by an SVG `` element with an ID matching its two-letter country code (e.g., `FR` for France, `JP` for Japan) 2. When you make a guess, the system finds the corresponding path element 3. The `fill` and `stroke` attributes are updated to the appropriate color based on the country's relationship to the target 4. A tooltip `` element is added showing the country name on hover All countries start with a neutral gray color (`#555555`). As you guess, the map builds up a colorful visual story of your attempts. ### Country code matching The system uses ISO 3166-1 alpha-2 country codes: * **United States**: `US` * **Germany**: `DE` * **Japan**: `JP` * **Brazil**: `BR` * **Australia**: `AU` These codes are standardized internationally and match the IDs in the world map SVG file. <Card title="Fun fact" icon="map"> The world map SVG contains over 195 country paths, each carefully crafted to accurate geographic shapes and positioned in the correct location. </Card> ## Color legend A legend appears in the bottom-left corner of the map, explaining the color-coding system: * Always visible and overlaid on the map * Black semi-transparent background for readability * Lists all five color categories with colored circles * Cannot be interacted with (pointer-events disabled) The legend ensures you never forget what each color means during gameplay. ## Visual feedback flow Here's what happens visually when you make a guess: <Steps> <Step title="Guess submitted"> You select a country from the autocomplete dropdown and submit your guess. </Step> <Step title="API processes guess"> The backend determines the relationship between your guess and the target (neighbor, same region, etc.). </Step> <Step title="Map updates"> The guessed country lights up in the appropriate color on the map, providing instant visual feedback. </Step> <Step title="Pattern emerges"> As you make more guesses, the map shows a colorful pattern. Yellow neighbors reveal the target's location, orange and red-orange guesses narrow the region. </Step> <Step title="Target revealed"> When you win or exhaust all guesses, the target country lights up in green, completing the visual story. </Step> </Steps> <Info> The map persists all your guesses for the current challenge. If you refresh the page, your previous guesses remain highlighted because they're saved in your session progress. </Info> ## Technical implementation The map leverages several modern web technologies: **SVG rendering**: `react-svg` library loads and injects the world map SVG\ **Transform controls**: `react-zoom-pan-pinch` provides zoom/pan functionality\ **Client-side**: Built as a React client component with useState and useEffect hooks\ **Dynamic styling**: SVG attributes are manipulated via DOM queries ### Performance optimizations * The SVG is loaded once and cached by the browser * Country highlighting uses efficient DOM attribute updates, not re-renders * Transform operations are GPU-accelerated for smooth zooming and panning * The map component only re-renders when the guesses array changes ## Using the map strategically Maximize the map's value with these tips: 1. **Zoom in on yellow neighbors**: When a guess turns yellow, zoom in on that area to identify surrounding countries 2. **Look for patterns**: Multiple orange guesses in one subregion indicate the target is likely nearby 3. **Use with hints**: Cross-reference map patterns with hint information for more accurate guesses 4. **Reset often**: Use the Reset button to get back to the full world view when you're reorienting your strategy The map isn't just visual feedback—it's a powerful strategic tool that helps you systematically narrow down possibilities and visualize geographic relationships.