Skip to main content

​
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:

Target (Green)

Color: Dark green
Meaning: This is the correct answer
When shown: After you guess correctly or the game ends

Neighbor (Yellow)

Color: Bright yellow
Meaning: Shares a land border with the target
When shown: When your guess directly borders the target country

Same Subregion (Orange)

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

Same Region (Red-Orange)

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

Incorrect (Dark Red)

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 AfricaAmericas: Caribbean, Central America, South America, North AmericaAsia: Central Asia, Eastern Asia, South-Eastern Asia, Southern Asia, Western AsiaEurope: Eastern Europe, Northern Europe, Southern Europe, Western EuropeOceania: Australia and New Zealand, Melanesia, Micronesia, PolynesiaAntarctica: (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:
1

+ (Plus)

Zooms in on the map, increasing the view scale by one step. Click repeatedly to zoom in further.
2

- (Minus)

Zooms out from the map, decreasing the view scale by one step. Click repeatedly to zoom out further.
3

R (Reset)

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 <path> 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 <title> 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.

Fun fact

The world map SVG contains over 195 country paths, each carefully crafted to accurate geographic shapes and positioned in the correct location.

​
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:
1

Guess submitted

You select a country from the autocomplete dropdown and submit your guess.
2

API processes guess

The backend determines the relationship between your guess and the target (neighbor, same region, etc.).
3

Map updates

The guessed country lights up in the appropriate color on the map, providing instant visual feedback.
4

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.
5

Target revealed

When you win or exhaust all guesses, the target country lights up in green, completing the visual story.
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.

​
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.