UIPackage
Menu

Framework

VueReact

Change language

Boilerplate repo

Maps

74 maps · 7 families · Mapbox GL + Leaflet/OpenStreetMap wrappers · themed with your tokens

▎Primitives & Controls— 8 maps

Live OSM
Open in preview
leaflet-mapcomponent
Foundational dual-framework Leaflet wrapper on free OpenStreetMap/Esri raster tiles — no API key. Markers, popups, geometry, and dark mode.
Live OSM
Open in preview
leaflet-map-controls-toolbarcomponent
Themed zoom controls, HTML5 fullscreen toggle, and camera helpers on the free OSM basemap.
Live OSM
Open in preview
leaflet-map-marker-popupscomponent
Interactive DOM marker pins with reactive token-styled popups, click-to-focus, and badge overlays — zero API key.
Live OSM
Open in preview
leaflet-map-route-layercomponent
Declarative polyline/polygon route layers with dash arrays, casing outlines, and waypoint markers.
Map
Live Mapbox
Open in preview
mapcomponent
Foundational dual-framework Mapbox GL wrapper with reactive camera, markers, popups, and dark mode.
Controls & Toolbar
Live Mapbox
Open in preview
map-controls-toolbarcomponent
Themed navigation zoom (+/-), 3D compass orientation reset, and HTML5 fullscreen display controls.
Marker Popups
Live Mapbox
Open in preview
map-marker-popupscomponent
Interactive HTML marker pins with reactive token-styled popups, click-to-focus, and badge overlays.
Route Layer
Live Mapbox
Open in preview
map-route-layercomponent
Declarative GeoJSON line string layer with directional dash arrays, casing outlines, and waypoints.

▎Basemap Styles— 19 maps

Live OSM
Open in preview
leaflet-map-darkcomponent
Esri Dark Gray Canvas raster tiles — a key-free monochromatic dark canvas for dashboards.
Live OSM
Open in preview
leaflet-map-lightcomponent
Esri Light Gray Canvas raster tiles — a clean, key-free editorial light palette for SaaS reporting.
Live OSM
Open in preview
leaflet-map-mutedcomponent
Desaturated grayscale tile pane where geography recedes and telemetry markers take visual priority.
Live OSM
Open in preview
leaflet-map-navigation-daycomponent
Esri World Street Map high-contrast day palette suited to routing and in-vehicle navigation.
Live OSM
Open in preview
leaflet-map-navigation-nightcomponent
Esri Dark Gray Canvas low-glare night palette for distraction-free after-dark navigation.
Live OSM
Open in preview
leaflet-map-outdoorscomponent
OpenTopoMap contour lines, hillshades, and trail networks on open data — no key required.
Live OSM
Open in preview
leaflet-map-satellite-hybridcomponent
Esri World Imagery aerial tiles layered with a free reference label and boundary overlay.
Live OSM
Open in preview
leaflet-map-satellite-purecomponent
Esri World Imagery orbital photography without text labels — a clean key-free satellite canvas.
Live OSM
Open in preview
leaflet-map-streetscomponent
OpenStreetMap Standard tiles — the canonical free street network, transit, and POI basemap.
Dark Canvas
Live Mapbox
Open in preview
map-darkcomponent
Monochromatic dark palette designed for mission critical dashboards and high-contrast glowing overlays.
Light Canvas
Live Mapbox
Open in preview
map-lightcomponent
Clean, monochromatic editorial light palette for SaaS reporting, print-ready graphics, and billing.
Muted Minimal
Live Mapbox
Open in preview
map-mutedcomponent
Desaturated grayscale canvas where roads and terrain recede, giving custom telemetry markers visual priority.
Navigation Day
Live Mapbox
Open in preview
map-navigation-daycomponent
High-contrast automotive day palette designed for turn-by-turn routing and in-vehicle navigation.
Navigation Night
Live Mapbox
Open in preview
map-navigation-nightcomponent
Low-glare high-contrast dark automotive night HUD palette for distraction-free night driving.
Outdoors & Topo
Live Mapbox
Open in preview
map-outdoorscomponent
Topographic contour lines, mountain hillshades, national parks, and hiking trail networks.
Satellite Hybrid
Live Mapbox
Open in preview
map-satellite-hybridcomponent
High-resolution aerial satellite imagery layered with crisp vector road networks, borders, and place names.
Satellite Pure
Live Mapbox
Open in preview
map-satellite-purecomponent
Photorealistic high-resolution orbital satellite photography without text labels or vector annotations.
Standard 3D
Live Mapbox
Open in preview
map-standard-3dcomponent
Next-gen Mapbox Standard basemap featuring dynamic lighting, sun position simulation, and 3D buildings.
Streets Basemap
Live Mapbox
Open in preview
map-streetscomponent
Detailed urban street networks, transit stations, and points of interest styled with design tokens.

▎3D & Spatial— 7 maps

Live OSM
Open in preview
leaflet-map-network-topologycomponent
Planetary multi-region topology with subsea fiber cables, datacenter nodes, and latency badges.
Live OSM
Open in preview
leaflet-map-point-clusteringcomponent
Density-aware point aggregation via leaflet.markercluster with click-to-expand drilldown — no GL required.
3D Extruded Buildings
Live Mapbox
Open in preview
map-3d-buildingscomponent
Real-time 3D building footprint extrusion with pitched camera angle and ambient roof shading.
3D Terrain & DEM
Live Mapbox
Open in preview
map-3d-terraincomponent
Digital elevation model (DEM) with 3D mountain relief, vertical exaggeration, and natural sunlight shadows.
3D Globe Projection
Live Mapbox
Open in preview
map-globe-3dcomponent
Spherical planetary globe projection with atmospheric fog, star field, and transcontinental flight paths.
Global Network Topology
Live Mapbox
Open in preview
map-network-topologycomponent
Planetary multi-region cloud topology displaying subsea fiber cables, datacenter nodes, and ping latency.
Point Clustering
Live Mapbox
Open in preview
map-point-clusteringcomponent
Dynamic GeoJSON point aggregation with cluster step radii, density counts, and click-to-expand drilldown.

▎Routing & Couriers— 8 maps

Delivery Tracking Map
Live Mapbox
Open in preview
delivery-tracking-mapblock
Live order delivery route showing courier location, customer destination, and milestone ETA countdown.
Isochrone Reachability
Live Mapbox
Open in preview
isochrone-reachability-mapblock
Drive-time reachability polygons showing 10-minute, 20-minute, and 30-minute commute zones from a central hub.
Last-Mile Courier Dispatch
Live Mapbox
Open in preview
last-mile-courier-dispatchblock
Courier dispatch matrix with real-time route progress, ETA telemetry, and Proof of Delivery (POD) logging.
Live OSM
Open in preview
leaflet-delivery-tracking-mapblock
Live order route with courier position, destination marker, and milestone ETA countdown.
Live OSM
Open in preview
leaflet-isochrone-reachability-mapblock
Drive-time reachability polygons for 10/20/30-minute commute zones from a central hub.
Live OSM
Open in preview
leaflet-last-mile-courier-dispatchblock
Courier dispatch matrix with route progress, ETA telemetry, and Proof of Delivery logging.
Live OSM
Open in preview
leaflet-map-turn-by-turn-hudcomponent
In-vehicle routing display with speed telemetry and heading readout on a free dark basemap.
Turn-by-Turn HUD
Live Mapbox
Open in preview
map-turn-by-turn-hudcomponent
In-dash vehicle routing display with real-time speed telemetry, speed limit badge, and heading compass.

▎Operations & Telemetry— 12 maps

Asset Tracking Map
Live Mapbox
Open in preview
asset-tracking-mapblock
Intermodal supply chain cargo and container tracking through shipping lanes, customs, and intermodal rail depots.
Disaster Response Map
Live Mapbox
Open in preview
disaster-response-mapblock
Emergency incident management map with evacuation perimeter rings, emergency shelters, and relief staging hubs.
Fleet Vehicle Map
Live Mapbox
Open in preview
fleet-vehicle-mapblock
Live fleet monitoring map with vehicle markers, telemetry sidebar, and click-to-fly camera focusing.
Flight Radar Map
Live Mapbox
Open in preview
flight-radar-mapblock
Real-time commercial and cargo aviation radar with aircraft altitudes, ground speeds, callsigns, and flight arcs.
Live OSM
Open in preview
leaflet-asset-tracking-mapblock
Intermodal cargo and container tracking across shipping lanes, customs, and rail depots.
Live OSM
Open in preview
leaflet-disaster-response-mapblock
Incident map with evacuation perimeter rings, shelters, and relief staging hubs.
Live OSM
Open in preview
leaflet-fleet-vehicle-mapblock
Live fleet monitoring with vehicle markers, telemetry sidebar, and click-to-fly camera focusing.
Live OSM
Open in preview
leaflet-flight-radar-mapblock
Aviation radar with aircraft markers, altitude/airspeed telemetry, and great-circle flight arcs.
Live OSM
Open in preview
leaflet-maritime-vessel-mapblock
AIS vessel monitoring with container ships, tankers, and port traffic on free tiles.
Live OSM
Open in preview
leaflet-threat-map-radarblock
Attack-vector map with origin nodes, target facilities, and a radar sweep on a dark canvas.
Maritime Vessel AIS
Live Mapbox
Open in preview
maritime-vessel-mapblock
Automatic Identification System (AIS) vessel monitoring with container ships, tankers, and port traffic density.
Threat Map Radar
Live Mapbox
Open in preview
threat-map-radarblock
Cybersecurity attack vectors with originating nodes, target facilities, and continuous radar sweep animation.

▎Places & Real Estate— 10 maps

Hub Locator Map
Live Mapbox
Open in preview
hub-locator-mapblock
Regional distribution centers with capacity indicators, active cargo bays, and coverage service radii.
Live OSM
Open in preview
leaflet-hub-locator-mapblock
Distribution centers with capacity indicators, active bays, and coverage service circles.
Live OSM
Open in preview
leaflet-neighborhood-walkscore-cardblock
Walkability, transit, and bike scores with nearby POIs around a selected property.
Live OSM
Open in preview
leaflet-property-boundary-mapblock
Cadastral parcel polygons with zoning classes, acreage, and valuation on satellite tiles.
Live OSM
Open in preview
leaflet-sales-territory-mapblock
Rep boundary polygons with quarterly quotas, attainment, and account density metrics.
Live OSM
Open in preview
leaflet-store-locator-mapblock
Retail locator with distance calculation, store hours, amenities filtering, and directions.
Neighborhood Walk Score
Live Mapbox
Open in preview
neighborhood-walkscore-cardblock
Walkability, transit score, bike rating, and nearby urban points of interest around a selected property.
Property Boundary Parcels
Live Mapbox
Open in preview
property-boundary-mapblock
Real estate cadastral parcel boundaries with zoning classifications, acreage, and estimated property valuation.
Sales Territory Map
Live Mapbox
Open in preview
sales-territory-mapblock
Sales rep boundary polygons with quarterly revenue quotas, target attainment, and account density metrics.
Store Locator Map
Live Mapbox
Open in preview
store-locator-mapblock
Retail store locator with distance calculation, store hours, amenities filtering, and directions modal.

▎Analytical & Geo— 10 maps

Bubble Map
Live Mapbox
Open in preview
bubble-mapcomponent
Geospatial scatter plot placing proportional circle markers across coordinates sized by quantitative magnitude.
Choropleth Map Chart
Live Mapbox
Open in preview
choropleth-map-chartcomponent
Thematic geographic map with graduated color scales visualizing regional metrics, GDP, and population density.
Dotted Map Chart
Live Mapbox
Open in preview
dotted-map-chartcomponent
High-density dot matrix world map with pulsing geographic telemetry nodes and regional distribution filters.
Hexbin Map
Live Mapbox
Open in preview
hexbin-mapcomponent
Geospatial hexagonal bin aggregation grouping scattered coordinates into density-calibrated hexagons.
Live OSM
Open in preview
leaflet-bubble-mapcomponent
Proportional circle markers sized by quantitative magnitude over a muted tile canvas.
Live OSM
Open in preview
leaflet-choropleth-map-chartcomponent
GeoJSON polygon fills graduated by regional metrics — GDP, density, quota attainment.
Live OSM
Open in preview
leaflet-hexbin-mapcomponent
Hexagonal bin aggregation of scattered coordinates into density-calibrated hex polygons.
Live OSM
Open in preview
leaflet-route-flow-mapcomponent
Great-circle route arcs with animated dash flows conveying volume and directional transit.
Route Flow Map
Live Mapbox
Open in preview
route-flow-mapcomponent
Great-circle flight and trade route arcs with animated particle flows conveying volume and directional transit.
Vector Map
Live Mapbox
Open in preview
vector-mapcomponent
Crisp SVG/Canvas vector country and province boundary map with interactive region hover and selection states.