← Back to Articles
2022-11-27frontend

Interactive land map with heatmap

  • Change: react-tile-map integrated for a live Decentraland land grid (4a4d8642 "landpicker heatmap selector added"). A color-coded heatmap overlay shows traffic density per parcel. Full /map page shipped 2022-12-12 (a98f8228) with fullscreen mode, collapsible infobox, and click-to-pan-center (a7470255).
  • Why: A numeric table of parcel stats doesn't convey spatial patterns. Overlaying visit-count heat onto the actual land grid makes density immediately readable at a glance — hot parcels pop visually.
  • Affected Modules: pages/map.tsx, src/components/global/map/, react-tile-map (package)
  • Trade-offs:
    • Pro: Spatial data is genuinely more useful as a map than as a sorted table row.
    • Con: Tile map is a heavy client-side render and must be dynamically imported to avoid SSR crashes; mobile layout needed a completely separate treatment.