Explorer

Maps

React map components built on MapLibre GL JS. No API key. Composable, styled with Tailwind, distributed via the shadcn registry.

Install

terminal

1 lines

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map.json

Each component is a standalone file. Install only what you use.

Stack

MapLibre GL JSv5

Open-source, GPU-accelerated map renderer. BSD-3, no vendor lock-in.

Deck.glv9

WebGL/WebGPU overlay for large-scale visualization. Scatterplots, heatmaps, hexbins, arcs.

Turf.jsv7

Client-side spatial analysis. Buffers, intersections, distances.

OSRM / Nominatim

Open-source routing and geocoding. Free, no API key required.

Architecture

<Map>                         ← MapLibre GL context
├─ <MapControls />           ← Zoom, compass, locate, fullscreen
├─ <MapLayerControl />       ← Standard / satellite / terrain
├─ <MapSearch />             ← Nominatim geocoding
├─ <MapDirections />         ← OSRM routing
│
├─ <MapMarker>               ← DOM marker
│  ├─ <MarkerContent />      ← Visual (dot, pin, custom)
│  ├─ <MarkerPopup />        ← Click popup
│  ├─ <MarkerTooltip />      ← Hover tooltip
│  └─ <MarkerLabel />        ← Text label
│
├─ <MapPopup />              ← Standalone popup
├─ <MapRoute />              ← GeoJSON line layer
├─ <MapClusterLayer />       ← Clustered points
├─ <MapHeatmapLayer />       ← Native heatmap
├─ <MapDraw />               ← Drawing tools
│
└─ <MapDeckGLOverlay>        ← Deck.gl overlay
   ├─ <MapScatterplot />
   ├─ <MapGPUHeatmap />
   ├─ <MapHexbin />
   └─ <MapArc />

Components

Component	Engine
	MapLibre GL
	Nominatim
	MapLibre GL
	OSRM
	mapbox-gl-draw
	Deck.gl
	Deck.gl
	Deck.gl
	Deck.gl
	Deck.gl
	Turf.js