Maps
Simple map
Street map style
Marker styles
Draw markers in HTML with .map-marker: a dot, a circle with an icon or a count, a pin, or an avatar. Add .map-marker-label for a short text, and .map-marker-pulse for a live position.
Popup card
Put the popup content in a <template> inside the marker. .map-popup-card makes room for an image.
Route
Draw a path with data-bs-route, a list of points, and mark its ends with markers.
Area
Show a zone, a line or points with data-bs-geojson: a GeoJSON object, or the URL of a file.
Shapes from a file
Point data-bs-geojson at a GeoJSON file to draw its areas, lines and points. data-bs-layer-color sets their color, and data-bs-labels names the buttons.
Clusters
Group many points into clusters that split as you zoom in. Click a cluster to zoom to it.
City switcher
Put buttons over the map and move it to a place with flyTo.
Bubble map
Size circles by a value, for example users per city. Hover a circle to see the number.
Globe
Show the map as a 3D globe with data-bs-globe="true", and connect places with arcs.
Draggable marker
Add data-bs-draggable="true" to let people move a marker, for example to pick an address.