Introducing GeoCards – A Wiki Labeled Map

GeoCards

I’ve seen many 'vibe-coded' wiki maps lately. Most follow the same blueprint: they use your location to surface nearby Wikipedia markers. While that works, I wanted a wiki map where the map itself is the gateway. So I built my own wiki map. On GeoCards, every label - from cities and rivers to roads and landmarks - is interactive. Instead of asking 'What’s near me?', GeoCards answers 'What is this?

GeoCards is a new interactive web map designed to turn geographic exploration into a lightweight discovery experience. Instead of simply viewing places on a map, GeoCards lets users instantly uncover Wikipedia knowledge about the world around them - whether that’s a major city, a small town, a local landmark, or even a road.

The map opens to a global view, inviting users to explore freely. You can search for any location using the built-in geocoder, or simply click directly on labels visible on the map. Selecting a place triggers a sidebar “card” that displays a concise Wikipedia summary, often accompanied by an image and a link to the full article. If an exact article isn’t available, the map intelligently searches for nearby geotagged Wikipedia entries to ensure there is usually something interesting to discover.

Under the hood, GeoCards is powered by MapLibre GL JS and the OpenFreeMap Liberty style, allowing for smooth rendering and rich vector layers. The application listens for click events on a wide range of label layers - including cities, transport features, points of interest, and water bodies - effectively transforming the basemap itself into an interactive index of knowledge.

When a feature is selected, the app queries Wikipedia’s REST API to retrieve the article summary. If the requested page is ambiguous or unavailable, the app falls back to Wikipedia’s GeoSearch API to find nearby articles within a defined radius.

Search functionality is handled through the Photon geocoder, with client-side caching to reduce duplicate requests and improve performance. Once a search result is chosen, the map smoothly flies to the location, drops a marker, and loads the relevant Wikipedia content.

Comments

Popular Posts