Skip to content

Overview

Map Basics

Initialize a map in an HTML element with MapLibre GL JS.

Display a map

Initialize a map in an HTML element with MapLibre GL JS.
Display a satellite raster baselayer.

Display a satellite map

Display a satellite raster baselayer.
Disable interactivity to create a static map.

Display a non-interactive map

Disable interactivity to create a static map.
Place attribution in the top-left position when initializing a map.

Change the default position for attribution

Place attribution in the top-left position when initializing a map.
Check for WebGL browser support.

Check if WebGL is supported

Check for WebGL browser support.
Initialize a map in an HTML element with MapLibre GL JS. This example is using a style that uses MLT (MapLibre Tiles). The example is very similar to the regular one except the tiles are in a different encoding.

Display a map with MLT

Initialize a map in an HTML element with MapLibre GL JS. This example is using a style that uses MLT (MapLibre Tiles). The example is very similar to the regular one except the tiles are in a different encoding.

Use flyTo to smoothly interpolate between locations.

Fly to a location

Use flyTo to smoothly interpolate between locations.
Use the jumpTo function to showcase multiple locations.

Jump to a series of locations

Use the jumpTo function to showcase multiple locations.
Initialize a map with pitch and bearing camera options.

Set pitch and bearing

Initialize a map with pitch and bearing camera options.
Use flyTo with flyOptions to slowly zoom to a location.

Slowly fly to a location

Use flyTo with flyOptions to slowly zoom to a location.
Animate a line by updating a GeoJSON source on each frame.

Animate a line

Animate a line by updating a GeoJSON source on each frame.
Animate the position of a point by updating a GeoJSON source on each frame.

Animate a point

Animate the position of a point by updating a GeoJSON source on each frame.
Use Turf to smoothly animate a point along the distance of a line.

Animate a point along a route

Use Turf to smoothly animate a point along the distance of a line.
Animate the map camera around a point.

Animate map camera around a point

Animate the map camera around a point.
Customize camera animations using AnimationOptions.

Customize camera animations

Customize camera animations using AnimationOptions.
Customize the constrain callback of the map transform. For example, to allow users to underzoom and overpan the bounds.

Customize the map transform constrain

Customize the constrain callback of the map transform. For example, to allow users to underzoom and overpan the bounds.
Click a marker to smoothly enter an immersive 360° photosphere at a fixed point, blended with the live map; exit to return to normal navigation. new

Enter a 360° photosphere

Click a marker to smoothly enter an immersive 360° photosphere at a fixed point, blended with the live map; exit to return to normal navigation.
Fit the map to a specific area, regardless of the pixel size of the map.

Fit a map to a bounding box

Fit the map to a specific area, regardless of the pixel size of the map.
Get the bounds of a LineString.

Fit to the bounds of a LineString

Get the bounds of a LineString.
Scroll down through the story and the map will fly to the chapter's location.

Fly to a location based on scroll position

Scroll down through the story and the map will fly to the chapter's location.
Keep the viewport state in the url with hash routing.

Hash routing

Keep the viewport state in the url with hash routing.
Modify how Level of Detail behaves at high pitch angles.

Level of Detail Control

Modify how Level of Detail behaves at high pitch angles.
Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.

Offset the vanishing point using padding

Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.
Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.

Render world copies

Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.
Prevent a map from being panned to a different place by setting maxBounds.

Restrict map panning to an area

Prevent a map from being panned to a different place by setting maxBounds.
Set the center point above ground level.

Set center point above ground

Set the center point above ground level.
Drive an eye-height, level first-person camera over 3D buildings with the keyboard or on-screen buttons new

Walk around a map in first person

Drive an eye-height, level first-person camera over 3D buildings with the keyboard or on-screen buttons

Add zoom and rotation controls to the map.

Display map navigation controls

Add zoom and rotation controls to the map.
Geolocate the user and then track their current location on the map using the GeolocateControl.

Locate the user

Geolocate the user and then track their current location on the map using the GeolocateControl.
Enable cooperative gestures. See how it behaves in fullscreen mode.

Cooperative gestures

Enable cooperative gestures. See how it behaves in fullscreen mode.
Prevent users from rotating a map.

Disable map rotation

Prevent users from rotating a map.
Prevent scroll from zooming a map.

Disable scroll zoom

Prevent scroll from zooming a map.
Use the keyboard's arrow keys to move around the map with game-like controls.

Navigate the map with game-like controls

Use the keyboard's arrow keys to move around the map with game-like controls.
Enable or disable UI handlers on a map.

Toggle interactions

Enable or disable UI handlers on a map.
Toggle between current view and fullscreen mode. Does not work on iPhones because a pseudo-fullscreen is used, and the code is embedded in an iframe, which prevents the map from scaling.

View a fullscreen map

Toggle between current view and fullscreen mode. Does not work on iPhones because a pseudo-fullscreen is used, and the code is embedded in an iframe, which prevents the map from scaling.

Sources

Add a vector source to a map.

Add a vector tile source

Add a vector source to a map.
Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.

Add a GeoJSON line

Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.
Style a polygon with the fill layer type.

Add a GeoJSON polygon

Style a polygon with the fill layer type.
Draw points from a GeoJSON collection to a map.

Draw GeoJSON points

Draw points from a GeoJSON collection to a map.
Add a polygon and circle layer from the same GeoJSON source.

Add multiple geometries from one GeoJSON source

Add a polygon and circle layer from the same GeoJSON source.
Draw a line across the 180th meridian using a GeoJSON source.

Display line that crosses 180th meridian

Draw a line across the 180th meridian using a GeoJSON source.
View local GeoJSON without server upload.

View local GeoJSON

View local GeoJSON without server upload.
View local GeoJSON with experimental File System Access API.

View local GeoJSON (experimental)

View local GeoJSON with experimental File System Access API.

Add a third-party raster source to the map.

Add a raster tile source

Add a third-party raster source to the map.
Add an external Web Map Service raster layer to the map using addSource's tiles option.

Add a WMS source

Add an external Web Map Service raster layer to the map using addSource's tiles option.
Add a canvas source to the map.

Add a canvas source

Add a canvas source to the map.
Add an external Cloud Optimized Geotiff (COG) as source.

Add a COG raster source

Add an external Cloud Optimized Geotiff (COG) as source.
Display a video on top of a satellite raster baselayer.

Add a video

Display a video on top of a satellite raster baselayer.
Use a series of image sources to create an animation.

Animate a series of images

Use a series of image sources to create an animation.

Use realtime GeoJSON data streams to move a symbol on your map.

Add live realtime data

Use realtime GeoJSON data streams to move a symbol on your map.
Change an existing feature on your map in real-time by updating its data.

Update a feature in realtime

Change an existing feature on your map in real-time by updating its data.
Update GeoJSON polygons using updateable GeoJSONVT

Update GeoJSON polygons

Update GeoJSON polygons using updateable GeoJSONVT

Layers

Add an icon to the map from an external URL and use it in a symbol layer.

Add an icon to the map

Add an icon to the map from an external URL and use it in a symbol layer.
Add an icon to the map that was generated at runtime.

Add a generated icon to the map

Add an icon to the map that was generated at runtime.
Use a stretchable image as a background for text.

Add a stretchable image to the map

Use a stretchable image as a background for text.
Add an animated icon to the map that was generated at runtime with the Canvas API. If performance is important, consider using a <a href=plugin that draws the icon directly on the GPU via StyleImageWebGLData.">

Add an animated icon to the map

Add an animated icon to the map that was generated at runtime with the Canvas API. If performance is important, consider using a plugin that draws the icon directly on the GPU via StyleImageWebGLData.

Draw an animated icon straight into the icon atlas with WebGL, without moving its pixels through the CPU. Writing WebGL by hand is hard to get right, consider using a <a href=plugin that implements StyleImageWebGLData for you."> new

Animate an icon on the GPU

Draw an animated icon straight into the icon atlas with WebGL, without moving its pixels through the CPU. Writing WebGL by hand is hard to get right, consider using a plugin that implements StyleImageWebGLData for you.

Uses a missing style image resolver to load a remote image and use it.

Display a remote SVG symbol

Uses a missing style image resolver to load a remote image and use it.
Use the symbol-height-offset property to float icons and text above the ground in 3D. new

Elevate symbols above the terrain

Use the symbol-height-offset property to float icons and text above the ground in 3D.
Dynamically generate a missing icon at runtime and add it to the map.

Generate and add a missing icon to the map

Dynamically generate a missing icon at runtime and add it to the map.
Use a coalesce expression to display another image when a requested image is not available.

Use a fallback image

Use a coalesce expression to display another image when a requested image is not available.

Use setPaintProperty to change a layer's fill color.

Change a layer's color with buttons

Use setPaintProperty to change a layer's fill color.
Use the second argument of addLayer to add a layer below labels.

Add a new layer below labels

Use the second argument of addLayer to add a layer below labels.
Use a custom style layer to render custom WebGL content.

Add a custom style layer

Use a custom style layer to render custom WebGL content.
Use fill-pattern to draw a polygon from a repeating image pattern.

Add a pattern to a polygon

Use fill-pattern to draw a polygon from a repeating image pattern.

Create a visualization with a data expression for line-color.

Style lines with a data-driven property

Create a visualization with a data expression for line-color.
Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.

Change building color based on zoom level

Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.
Use the line-gradient and line-dasharray paint properties together to create a dashed line with gradient colors.

Create a gradient dashed line using an expression

Use the line-gradient and line-dasharray paint properties together to create a dashed line with gradient colors.
Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.

Create a gradient line using an expression

Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.

Filter a layer based on user input using setFilter().

Filter within a Layer

Filter a layer based on user input using setFilter().
Filter symbols by icon name by typing in a text input.

Filter symbols by text input

Filter symbols by icon name by typing in a text input.
Filter a layer symbols based on user input using setGlobalStateProperty().

Filter layer symbols using global state

Filter a layer symbols based on user input using setGlobalStateProperty().
Filter a set of symbols based on a property value in the data.

Filter symbols by toggling a list

Filter a set of symbols based on a property value in the data.

Visualize earthquake frequency by location using a heatmap layer.

Create a heatmap layer

Visualize earthquake frequency by location using a heatmap layer.
Use MapLibre GL JS' built-in functions to visualize points as clusters.

Create and style clusters

Use MapLibre GL JS' built-in functions to visualize points as clusters.
Extend clustering with HTML markers and custom property expressions.

Display HTML clusters with custom properties

Extend clustering with HTML markers and custom property expressions.

Use a variable binding expression to calculate and display population density.

Visualize population density

Use a variable binding expression to calculate and display population density.
Click points on a map to create lines that measure distanced using turf.length.

Measure distances

Click points on a map to create lines that measure distanced using turf.length.
Visualize earthquakes with a range slider.

Create a time slider

Visualize earthquakes with a range slider.
Draw a radius to approximate a location with Turf.js

Draw a Circle

Draw a radius to approximate a location with Turf.js

Go beyond hillshade and show elevation in actual 3D.

3D Terrain

Go beyond hillshade and show elevation in actual 3D.
Add a simple hillshade layer.

Add a hillshade layer

Add a simple hillshade layer.
Use 3D Tiles quantized-mesh terrain as a raster-dem source via the maplibre-gl-3dtiles-terrain plugin, then drape an OpenStreetMap basemap and hillshade with map.setTerrain(). new

Add 3D terrain from quantized-mesh tiles

Use 3D Tiles quantized-mesh terrain as a raster-dem source via the maplibre-gl-3dtiles-terrain plugin, then drape an OpenStreetMap basemap and hillshade with map.setTerrain().
Add a color relief layer.

Add a color relief layer

Add a color relief layer.
Add a hillshade layer with multiple illumination sources.

Add a multidirectional hillshade layer

Add a hillshade layer with multiple illumination sources.
Add contour lines to your map from a raster-dem source.

Add Contour Lines

Add contour lines to your map from a raster-dem source.
Display a hybrid satellite map with terrain elevation.

Display a hybrid satellite map with terrain elevation

Display a hybrid satellite map with terrain elevation.
Allows changing the sky, fog and horizon color and blends.

Sky, Fog, Terrain

Allows changing the sky, fog and horizon color and blends.

Use extrusions to display buildings' height in 3D.

Display buildings in 3D

Use extrusions to display buildings' height in 3D.
Use a custom style layer with three.js to add a 3D model to the map.

Add a 3D model using three.js

Use a custom style layer with three.js to add a 3D model to the map.
Use a custom style layer with three.js to add 3D tiles to the map. new

Add 3D tiles using three.js

Use a custom style layer with three.js to add 3D tiles to the map.
Use a custom style layer with three.js to add a 3D model to a globe.

Add a 3D model to globe using three.js

Use a custom style layer with three.js to add a 3D model to a globe.
Use a custom style layer with babylon.js to add a 3D model to the map.

Add a 3D model with babylon.js

Use a custom style layer with babylon.js to add a 3D model to the map.
Use a custom style layer with three.js to add a 3D model with shadow to the map.

Add a 3D model with shadow using three.js

Use a custom style layer with three.js to add a 3D model with shadow to the map.
Use a custom style layer with three.js to add 3D models to a map with 3d terrain.

Adding 3D models using three.js on terrain

Use a custom style layer with three.js to add 3D models to a map with 3d terrain.
Create a 3D indoor map with the fill-extrude-height paint property.

Extrude polygons for 3D indoor mapping

Create a 3D indoor map with the fill-extrude-height paint property.
Use fill-extrusion-rounded-corner-distance to round the corners of extruded polygons. new

Fill extrusion rounded corners

Use fill-extrusion-rounded-corner-distance to round the corners of extruded polygons.

Display a globe with a vector map.

Display a globe with a vector map

Display a globe with a vector map.
Display a globe with an atmosphere.

Display a globe with an atmosphere

Display a globe with an atmosphere.
Use custom layer to display arbitrary tiles drawn with a custom WebGL shader on a globe.

Add a custom layer with tiles to a globe

Use custom layer to display arbitrary tiles drawn with a custom WebGL shader on a globe.
Use a custom layer to draw simple WebGL content on a globe.

Add a simple custom layer on a globe

Use a custom layer to draw simple WebGL content on a globe.
Create a Heatmap layer on a globe with terrain elevation.

Create a Heatmap layer on a globe with terrain elevation

Create a Heatmap layer on a globe with terrain elevation.
Display a globe with a fill extrusion layer.

Display a globe with a fill extrusion layer

Display a globe with a fill extrusion layer.
Explanation of zoom and planet size relation under globe projection and how to account for it when changing the map center and zoom by some delta.

Zoom and planet size relation on globe

Explanation of zoom and planet size relation under globe projection and how to account for it when changing the map center and zoom by some delta.

Annotations & Labels

Add a default marker to the map.

Add a default marker

Add a default marker to the map.
Add custom marker icons to your map.

Add custom icons with Markers

Add custom marker icons to your map.
Drag a marker with the pointer or the keyboard, and make a custom marker element keyboard accessible.

Create a draggable Marker

Drag a marker with the pointer or the keyboard, and make a custom marker element keyboard accessible.
Animate the position of a marker by updating its location on each frame.

Animate a marker

Animate the position of a marker by updating its location on each frame.
Drag the point to a new location on a map and populate its coordinates in a display.

Create a draggable point

Drag the point to a new location on a map and populate its coordinates in a display.

Add a popup to the map.

Display a popup

Add a popup to the map.
When a user clicks a symbol, show a popup containing more information.

Display a popup on click

When a user clicks a symbol, show a popup containing more information.
When a user hovers over a custom marker, show a popup containing more information.

Display a popup on hover

When a user hovers over a custom marker, show a popup containing more information.
Attach a popup to a marker and display it on click.

Attach a popup to a marker instance

Attach a popup to a marker and display it on click.

Use the format expression to display country labels in both English and in the local language.

Display and style rich text labels

Use the format expression to display country labels in both English and in the local language.
Apply Web fonts to your style’s text labels. Unlike signed distance field (SDF) glyph sets, Web fonts are available from a variety of providers, or your can make your own using popular tools. This option is suitable for fonts that are only available through a third-party content delivery network (CDN) for technical or legal reasons, as well as fonts that are incompatible with SDF, such as variable fonts. For compatibility with Android and iOS applications, specify equivalent fonts in the style’s font-faces property.

Style labels with Web fonts

Apply Web fonts to your style’s text labels. Unlike signed distance field (SDF) glyph sets, Web fonts are available from a variety of providers, or your can make your own using popular tools. This option is suitable for fonts that are only available through a third-party content delivery network (CDN) for technical or legal reasons, as well as fonts that are incompatible with SDF, such as variable fonts. For compatibility with Android and iOS applications, specify equivalent fonts in the style’s font-faces property.
Point your style at the font files used to draw its text labels. The font-faces property names a font file per text-font name, optionally narrowed to a unicode-range, so a style can cover scripts its glyphs server does not. Anything the browser can render text with may be used, and it is understood by Android and iOS as well. Here Georgian and Armenian labels come from font files while the Latin ones still come from the glyphs URL. new

Style labels with font faces

Point your style at the font files used to draw its text labels. The font-faces property names a font file per text-font name, optionally narrowed to a unicode-range, so a style can cover scripts its glyphs server does not. Anything the browser can render text with may be used, and it is understood by Android and iOS as well. Here Georgian and Armenian labels come from font files while the Latin ones still come from the glyphs URL.
Use the upcase and downcase expressions to change the case of labels.

Change the case of labels

Use the upcase and downcase expressions to change the case of labels.
Apply local fonts to your style’s text labels. This option is suitable if you don’t need every user to see exactly the same font, or if you want to avoid relying on a third-party content delivery network (CDN). For maximum compatibility, the text-font property should include fonts commonly found on multiple platforms.

Style labels with local fonts

Apply local fonts to your style’s text labels. This option is suitable if you don’t need every user to see exactly the same font, or if you want to avoid relying on a third-party content delivery network (CDN). For maximum compatibility, the text-font property should include fonts commonly found on multiple platforms.
Use text-variable-anchor to allow high priority labels to shift position to stay on the map.

Variable label placement

Use text-variable-anchor to allow high priority labels to shift position to stay on the map.
Use text-variable-anchor-offset to allow high priority labels to shift position to stay on the map.

Variable label placement with offset

Use text-variable-anchor-offset to allow high priority labels to shift position to stay on the map.

Use setLayoutProperty to switch languages dynamically.

Change a map's language

Use setLayoutProperty to switch languages dynamically.
Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.

Add support for right-to-left scripts

Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.
Show how localization can be applied manually to UI elements. Hover over a control to see the translated tooltip.

Locale switching

Show how localization can be applied manually to UI elements. Hover over a control to see the translated tooltip.
Set localIdeographFontFamily to override the font used for displaying CJK (Chinese, Japanese and Korean) characters, ignoring the map style. This setting must be a CSS font rule specifying fallbacks of on-device fonts. Set localIdeographFontFamily to false to use server-provided fonts, which is much slower.

Use locally generated ideographs

Set localIdeographFontFamily to override the font used for displaying CJK (Chinese, Japanese and Korean) characters, ignoring the map style. This setting must be a CSS font rule specifying fallbacks of on-device fonts. Set localIdeographFontFamily to false to use server-provided fonts, which is much slower.

Interactivity & Extensions

Use queryRenderedFeatures to show properties of hovered-over map elements.

Get features under the mouse pointer

Use queryRenderedFeatures to show properties of hovered-over map elements.
Use events and feature states to create a per feature hover effect.

Create a hover effect

Use events and feature states to create a per feature hover effect.
Animate symbol to follow the mouse.

Animate symbol to follow the mouse

Animate symbol to follow the mouse.
Use events and flyTo to center the map on a symbol.

Center the map on a clicked symbol

Use events and flyTo to center the map on a symbol.
Measure map performance using built-in events. new

Display Performance Metrics

Measure map performance using built-in events.
Show mouse position on hover with pixel and latitude and longitude coordinates.

Get coordinates of the mouse pointer

Show mouse position on hover with pixel and latitude and longitude coordinates.
Use the boxZoomEnd callback to select features with Shift-drag instead of fitting the map to the dragged box.

Select features with boxZoomEnd callback

Use the boxZoomEnd callback to select features with Shift-drag instead of fitting the map to the dragged box.
When a user clicks a polygon, show a popup containing more information.

Show polygon information on click

When a user clicks a polygon, show a popup containing more information.

Geocode with Nominatim and the maplibre-gl-geocoder plugin.

Geocode with Nominatim

Geocode with Nominatim and the maplibre-gl-geocoder plugin.
Uses the PMTiles plugin and protocol to present a map.

PMTiles source and protocol

Uses the PMTiles plugin and protocol to present a map.
Create a deck.gl layer as an overlay from a REST API.

Create deck.gl layer using REST API

Create a deck.gl layer as an overlay from a REST API.
Use maplibre-gl-terradraw to draw a geometry in various forms such as point, line or polygon on your map.

Draw geometries with terra-draw

Use maplibre-gl-terradraw to draw a geometry in various forms such as point, line or polygon on your map.
Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.

Draw polygon with mapbox-gl-draw

Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.
Synchronize MapLibre GL JS maps with the sync-move plugin.

Sync movement of multiple maps

Synchronize MapLibre GL JS maps with the sync-move plugin.
Toggle deck.gl layer using maplibre.

Toggle deck.gl layer

Toggle deck.gl layer using maplibre.
Reverse country names with addProtocol in plain JavaScript.

Use addProtocol to Transform Feature Properties

Reverse country names with addProtocol in plain JavaScript.