Use extrusions to display buildings' height in 3D.
Create a 3D indoor map with the fill-extrude-height paint property.
Go beyond hillshade and show elevation in actual 3D.
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 to the map.
Add a default marker to the map.
Create a deck.gl layer as an overlay from a REST API.
Add an animated icon to the map that was generated at runtime with the Canvas API.
Add an icon to the map that was generated at runtime.
Dynamically generate a missing icon at runtime and add it to the map.
Use a stretchable image as a background for text.
Add an icon to the map from an external URL and use it in a symbol layer.
Animate a line by updating a GeoJSON source on each frame.
Animate the map camera around a point.
Use a series of image sources to create an animation.
Animate the position of a marker by updating its location on each frame.
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.
Place attribution in the top-left position when initializing a map.
Customize camera animations using AnimationOptions.
Add a canvas source to the map.
Use events and flyTo to center the map on a symbol.
Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.
Use the upcase and downcase expressions to change the case of labels.
Check for MapLibre GL browser support.
Extend clustering with HTML markers and custom property expressions.
Use MapLibre GL JS' built-in functions to visualize points as clusters.
Use setPaintProperty to change a layer's fill color.
Add contour lines to your map from a raster-dem source.
Enable cooperative gestures with a specific language. See how it behaves in fullscreen mode.
Add custom marker icons to your map.
Use a custom style layer to render custom WebGL content.
Create a visualization with a data expression for line-color.
Prevent users from rotating a map.
Prevent scroll from zooming a map.
Use the format expression to display country labels in both English and in the local language.
Drag the marker to a new location on a map and populate its coordinates in a display.
Drag the point to a new location on a map and populate its coordinates in a display.
Use a coalesce expression to display another image when a requested image is not available.
Use fill-pattern to draw a polygon from a repeating image pattern.
Filter symbols by icon name by typing in a text input.
Filter a set of symbols based on a property value in the data.
Filter a layer based on user input using setFilter().
Fit the map to a specific area, regardless of the pixel size of the map.
Use flyTo with flyOptions to slowly zoom to a location.
Use flyTo to smoothly interpolate between locations.
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.
Use the keyboard's arrow keys to move around the map with game-like controls.
Geocode with Nominatim and the maplibre-gl-geocoder plugin.
Use the second argument of addLayer to add a layer below labels.
Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.
Draw points from a GeoJSON collection to a map.
Style a polygon with the fill layer type.
Visualize earthquake frequency by location using a heatmap layer.
Use events and feature states to create a per feature hover effect.
Disable interactivity to create a static map.
Use the jumpTo function to showcase multiple locations.
Use setLayoutProperty to switch languages dynamically.
Draw a line across the 180th meridian using a GeoJSON source.
Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.
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.
View local GeoJSON with experimental File System Access API.
View local GeoJSON without server upload.
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.
Geolocate the user and then track their current location on the map using the GeolocateControl.
Add a third-party raster source to the map.
Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.
Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.
Click points on a map to create lines that measure distanced using turf.length.
Show mouse position on hover with pixel and latitude and longitude coordinates.
Add a polygon and circle layer from the same GeoJSON source.
Add zoom and rotation controls to the map.
Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.
Uses the PM tiles plugin and protocol to present a map.
When a user clicks a polygon, show a popup containing more information.
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.
Add a popup to the map.
Use queryRenderedFeatures to show properties of hovered-over map elements.
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.
Display a satellite raster baselayer.
Scroll down through the story and the map will fly to the chapter's location.
Initialize a map with pitch and bearing camera options.
Attach a popup to a marker and display it on click.
Initialize a map in an HTML element with MapLibre GL JS.
Visualize earthquakes with a range slider.
Toggle deck.gl layer using maplibre.
Enable or disable UI handlers on a map.
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.
Add a vector source to a map.
Display a video on top of a satellite raster baselayer.
Use a variable binding expression to calculate and display population density.
Add an external Web Map Service raster layer to the map using addSource's tiles option.
Get the bounds of a LineString.