Skip to main content

Maps

Browse and explore 20 MapLibre GL components with theme integration and Deck.gl support

Showing 20 of 20 components

Map

Core Components

Interactive map component with built-in controls and theming

mapmaplibreinteractive +1

FillLayer

Layer Components

Render filled polygons with customizable colors and opacity

polygonfillchoropleth +1

LineLayer

Layer Components

Render lines and paths with customizable width and dash patterns

linepathroute +1

CircleLayer

Layer Components

Render point features as circles with customizable radius and colors

pointcirclemarker +1

SymbolLayer

Layer Components

Render icons and text labels at point locations (GPU-based, recommended for markers)

icontextlabel +1

FillExtrusionLayer

Layer Components

Render 3D extruded polygons for building visualization

3dbuildingextrusion +1

HeatmapLayer

Layer Components

Visualize point density as a heat gradient

heatmapdensitycluster +1

Polygon Lots

Advanced Features

Real estate lot visualization with 2000 polygons, hover states, and 3D extrusions

polygonlotsreal-estate +4

DeckOverlay

Advanced Features

Integrate Deck.gl layers for advanced WebGL visualizations

deckglwebgl3d +1

Clustering

Controls & Overlays

Cluster large datasets for better performance and visualization

clusteraggregationperformance +1

Legend

Controls & Overlays

Display categorical or gradient legends on the map

legendkeycategorical +1

LegendGroup

Controls & Overlays

Accordion-style container for multiple legends with one expanded at a time

legendaccordiongroup +1

CoordinateDisplay

Controls & Overlays

Show cursor coordinates and zoom level on the map

coordinatespositionzoom +1

LayerManager

Controls & Overlays

Toggle overlay layers for GIS data like school districts, parks, and trails

layersoverlaygis +4

BasemapSwitcher

Controls & Overlays

Switch between different map basemaps with a thumbnail grid flyout

basemapswitchertiles +4

CustomControl

Controls & Overlays

Position arbitrary custom content on the map with collision avoidance

controlcustomwidget +3

Marker

Core Components

Add interactive markers to the map (DOM-based)

markerpinpoint +2

Dynamic Markers

Core Components

Test dynamic marker loading after map initialization

markerdynamicreactivity +2

Popup

Core Components

Display popups with custom content at map locations

popuptooltipinfo +1

User Location

Core Components

Display the user's current location on the map with accuracy radius

geolocationlocationgps +3

Features

Theme Integration

Maps use design tokens for consistent styling across light and dark modes

Accessibility

ARIA labels, keyboard navigation, and screen reader support built-in

Deck.gl Support

Optional Deck.gl integration for advanced WebGL-powered visualizations

Quick Start

Core Components

Essential map components for basic mapping needs

Layer Components

Specialized layers for different data visualization types

Documentation

Detailed docs with API reference and examples