Skip to content
Home
SDKs and Libraries
MapLibre GL JS
Examples

Examples

Getting Started

Display an interactive Maptoolkit vector map with MapLibre GL JS.
Basic Map
Display an interactive Maptoolkit vector map with MapLibre GL JS.
Switch between the Maptoolkit community styles at runtime.
Change the Map Style
Switch between the Maptoolkit community styles at runtime.
Add zoom, compass, and scale controls to the map.
Navigation Controls
Add zoom, compass, and scale controls to the map.
Render a static map that ignores user input.
Non-Interactive Map
Render a static map that ignores user input.
Open the map tilted and rotated.
Pitch and Bearing
Open the map tilted and rotated.
Switch place labels between local and translated names at runtime.
Change the Map Language
Switch place labels between local and translated names at runtime.

Markers & Popups

Place a default MapLibre marker at a coordinate.
Add a Default Marker
Place a default MapLibre marker at a coordinate.
Use your own HTML element as a marker.
Add a Custom Marker
Use your own HTML element as a marker.
Show a standalone popup at a coordinate.
Display a Popup
Show a standalone popup at a coordinate.
Open a popup when the user clicks a feature.
Popup on Click
Open a popup when the user clicks a feature.
Show a popup that follows the pointer over features.
Popup on Hover
Show a popup that follows the pointer over features.
Bind a popup that toggles when the marker is clicked.
Attach a Popup to a Marker
Bind a popup that toggles when the marker is clicked.
Let the user drag a marker and read its coordinates.
Draggable Marker
Let the user drag a marker and read its coordinates.

GeoJSON & Data

Render a point from a GeoJSON source as a circle layer.
Add a GeoJSON Point
Render a point from a GeoJSON source as a circle layer.
Draw a line string with a line layer.
Add a GeoJSON Line
Draw a line string with a line layer.
Fill an area with a polygon and outline.
Add a GeoJSON Polygon
Fill an area with a polygon and outline.
Style points, lines, and polygons from a single source.
Multiple Geometries from One Source
Style points, lines, and polygons from a single source.
Size and color circles from a feature property.
Data-Driven Circles
Size and color circles from a feature property.

3D & Terrain

Extrude buildings into 3D blocks.
3D Buildings
Extrude buildings into 3D blocks.
Add real elevation with the terrain DEM source.
Enable 3D Terrain
Add real elevation with the terrain DEM source.

Controls & Interaction

Add a button that expands the map to fullscreen.
Fullscreen Control
Add a button that expands the map to fullscreen.
Add a button that centers on the user location.
Geolocate Control
Add a button that centers on the user location.
Stop the wheel and trackpad from zooming.
Disable Scroll Zoom
Stop the wheel and trackpad from zooming.
Lock the map bearing to north.
Disable Map Rotation
Lock the map bearing to north.
Highlight a feature under the pointer with feature-state.
Hover Effect
Highlight a feature under the pointer with feature-state.
Read the lng/lat under the pointer.
Pointer Coordinates
Read the lng/lat under the pointer.
Query rendered features at the pointer.
Features Under the Pointer
Query rendered features at the pointer.
Show and hide a layer with a button.
Toggle Layer Visibility
Show and hide a layer with a button.

Layers & Styling

Insert a layer beneath the map labels.
Add a Layer Below Labels
Insert a layer beneath the map labels.
Recolor a layer at runtime with buttons.
Change a Layer Color
Recolor a layer at runtime with buttons.
Visualize point density with a heatmap.
Heatmap Layer
Visualize point density with a heatmap.
Group nearby points into styled clusters.
Cluster Points
Group nearby points into styled clusters.
Fill a polygon with a generated image pattern.
Pattern Fill
Fill a polygon with a generated image pattern.
Color 3D buildings differently as you zoom.
Zoom-Based Building Color
Color 3D buildings differently as you zoom.

Camera & Animation

Animate a smooth flight to a new center.
Fly To a Location
Animate a smooth flight to a new center.
Frame the map to a geographic extent.
Fit to a Bounding Box
Frame the map to a geographic extent.
Continuously spin the camera bearing.
Rotate Around a Point
Continuously spin the camera bearing.
Cycle the map through a list of places.
Jump Through Locations
Cycle the map through a list of places.
Move a GeoJSON point every frame.
Animate a Point
Move a GeoJSON point every frame.
Move a marker continuously over the map.
Animate a Marker
Move a marker continuously over the map.
Ease the map to a feature when clicked.
Center on a Clicked Feature
Ease the map to a feature when clicked.

Globe & Sky

Render the vector map on a 3D globe.
Globe Projection
Render the vector map on a 3D globe.
Recolor the space behind the globe.
Change the Background Color
Recolor the space behind the globe.