edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Maps
Components

Installation

A React project with Tailwind CSS. Import the MapLibre GL stylesheet globally.

styles.css
2 lines
1
2
/* globals.css — required for MapLibre */
@import "maplibre-gl/dist/maplibre-gl.css";

Core dependencies

terminal
1 lines
1
npm install maplibre-gl @phosphor-icons/react

Add components

terminal
26 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Core map component
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map.json

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

# Heatmap (native MapLibre)
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-heatmap.json

# Directions / Routing
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-directions.json

# Drawing tools
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-draw.json

# Deck.gl overlay (required for GPU layers)
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-deckgl.json

# GPU layers
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-scatterplot.json
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-gpu-heatmap.json
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-hexbin.json
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-arc.json

# Spatial analysis
npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/maps/map-spatial.json

Each component is a standalone file. Two shared utilities (map-theme.ts, map-hooks.ts) are included automatically.

Additional dependencies

Some components need extra packages. Install only what you use.

terminal
11 lines
1
2
3
4
5
6
7
8
9
10
11
# Map Directions — OSRM routing
npm install @base-ui/react

# Deck.gl layers (scatterplot, gpu-heatmap, hexbin, arc)
npm install @deck.gl/core @deck.gl/layers @deck.gl/aggregation-layers @deck.gl/mapbox

# Spatial Analysis (Turf.js)
npm install @turf/buffer @turf/intersect @turf/centroid @turf/distance @turf/bbox @turf/area @turf/helpers

# Drawing Tools
npm install @mapbox/mapbox-gl-draw

Usage

example.tsx
16 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Map, MapMarker, MarkerContent, MarkerPopup } from "@/components/ui/map";

export function MyMap() {
  return (
    <div className="h-[400px] w-full">
      <Map center={[-74.006, 40.7128]} zoom={12}>
        <MapMarker longitude={-74.006} latitude={40.7128}>
          <MarkerContent />
          <MarkerPopup>
            <p>Hello NYC!</p>
          </MarkerPopup>
        </MapMarker>
      </Map>
    </div>
  );
}

Dependency matrix

ComponentExtra deps
Map—
Map Search—
Map Heatmap—
Map Directions@base-ui/react
Map Draw@mapbox/mapbox-gl-draw
Deck.gl Overlay@deck.gl/*
Scatterplot@deck.gl/*
GPU Heatmap@deck.gl/*
Hexbin@deck.gl/*
Arc Layer@deck.gl/*
Spatial Analysis@turf/*