Paris, Isometric City of Lights
One hundred kilometers around Paris, compressed into a 5-by-5 strategy-game board. Museums, monuments, universities, parks, castles, arenas, and transport hubs become civic resources on an isometric landscape.
A civic resource map
From coordinates to grid cells
Each cell shows one representative landmark, so the board is a selection rather than a complete inventory. Number badges reveal cells with more candidates. Zoom changes the size of the cells while keeping the geographic area fixed; compare two zoom levels to see which places gain a mark. The city center stays pinned as a reference.
A GeoFrame custom layout
Each diamond is a data-bearing GeoFrame area node, so polygon hit-testing, keyboard navigation, tooltips, observation events, accessibility, canvas rendering, and server rendering remain frame responsibilities. The pixel buildings are an SVG overlay anchored to the same layout result.
import { GeoCustomChart } from "semiotic/geo" import { isometricLandmarkLayout } from "semiotic/recipes" const city = cityOptions[selectedCity] const detail = zoomLevels[zoomIndex] <GeoCustomChart points={landmarks} projection="equirectangular" layout={isometricLandmarkLayout} layoutConfig={{ center: city.center, centerId: city.center.id, ...detail, gridRadiusKm: 65, // Replace any placeholder without changing layout geometry: sprites: { culture: "/sprites/museum.png" } }} />Replaceable pixel assets
The supplied transparent PNG resources render between 44 and 96 pixels as grid detail changes; the major city scales from 64 to 132 pixels. Supply replacement URLs throughlayoutConfig.sprites to replace categories without changing tile geometry or anchors.
Landmark candidates are requested from theDBpedia SPARQL endpointusing a 100 km spatial filter. A checked-in, spatially validated snapshot keeps the example deterministic when the public endpoint is slow, unavailable, or returns insufficient coverage. Ocean coverage was sampled procedurally from Natural Earth coastline geometry.