Examples

Markers and Popups

• Add a Default Marker — Add a default marker to the map at a specific location.
• Animate a Marker — Animate a marker’s position using setLngLat on each animation frame.
• Attach a Popup to a Marker Instance — Attach a popup to a marker instance and display it on click.
• Center the Map on a Clicked Symbol — Fly to a symbol’s location when the user clicks on it.
• Create a Draggable Marker — Create a marker that the user can drag to a new location.
• Display a Popup — Display a popup on the map at a specific location.
• Display a Popup on Click — Display a popup with coordinates when clicking anywhere on the map.
• Display a Popup on Hover — Display a popup when hovering over a point feature on the map.

GeoJSON + Layers + Drawing

• Add a Hillshade Layer — Add a hillshade layer to visualize terrain relief.
• Add a Multidirectional Hillshade Layer — Add a hillshade layer that simulates light from multiple angles.
• Add a New Layer Below Labels — Insert a new data layer below the map’s label layers so labels stay visible.
• Add a Pattern to a Polygon — Fill a polygon with a repeating image pattern.
• Add an Animated Icon to the Map — Create a pulsing dot icon using a custom animated image.
• Add an Icon to the Map — Load a custom icon image and use it as a symbol layer.
• Add Contour Lines — Display elevation contour lines using a raster-dem source.
• Add Multiple Geometries from One GeoJSON Source — Render points, lines, and polygons from a single GeoJSON source using multiple layers.
• Change a Layer’s Color with Buttons — Change the color of a map layer dynamically using buttons.
• Change Building Color Based on Zoom Level — Apply zoom-dependent color expressions to existing map layers.
• Create a Gradient Dashed Line Using an Expression — Create a dashed line with a gradient color along its length.
• Create a Gradient Line Using an Expression — Style a line with a color gradient using a line-gradient expression.
• Create a Heatmap Layer — Visualize point density using a heatmap layer.
• Create a Hover Effect — Highlight a feature when the user hovers over it using feature state.
• Create a Time Slider — Filter map features by a time range using a slider control.
• Create and Style Clusters — Cluster nearby points using GeoJSON clustering and style by cluster size.
• Display Buildings in 3D — Extrude building footprints into 3D using fill-extrusion layers.
• Draw a Circle — Draw a geographic circle using a GeoJSON polygon approximation.
• Draw GeoJSON Points — Add a GeoJSON point source and render it as a circle layer.
• Extrude Polygons for 3D Indoor Mapping — Use fill-extrusion layers to create a 3D indoor map from a GeoJSON floor plan.
• Measure Distances — Click the map to place points and measure the distance between them using Turf.js.
• Show Polygon Information on Click — Show a popup with feature properties when clicking on a polygon.
• Style Lines with a Data-Driven Property — Style line width and color based on feature properties using data-driven expressions.

Animation + Camera + Sources

• Add a Canvas Source — Use an animated HTML canvas as a map source to draw dynamic content.
• Add a Raster Tile Source — Add a raster tile source and layer to the map.
• Add a Vector Tile Source — Add a vector tile source to the map and style its layers.
• Add a Video — Display a video overlay on top of a raster map.
• Add a WMS Source — Add a WMS (Web Map Service) raster source to the map.
• Add Live Realtime Data — Fetch data from an external API and update a map source at regular intervals.
• Animate a Line — Animate a line by progressively adding coordinates to a GeoJSON source.
• Animate a Point — Animate a point in a circle using requestAnimationFrame and setData.
• Animate a Point Along a Route — Animate a point marker along a route using Turf.js for interpolation.
• Animate a Series of Images — Cycle through a series of images to create an animation on the map.
• Animate a Symbol to Follow the Mouse — Move a symbol layer to the mouse position on each mousemove event.
• Animate Map Camera Around a Point — Continuously rotate the map camera around a fixed point.
• Customize Camera Animations — Use easing functions to customize the feel of map camera transitions.
• Fit a Map to a Bounding Box — Fit the map view to a geographic bounding box with padding.
• Fit to the Bounds of a LineString — Fit the map view to the bounding box of a GeoJSON LineString.
• Fly to a Location — Animate the map camera to a new location using a smooth fly-to transition.
• Fly to a Location Based on Scroll Position — Move the map camera as the user scrolls down the page.
• Jump to a Series of Locations — Jump the map camera instantly through a series of locations.
• Update a Feature in Realtime — Update a GeoJSON feature’s position in real time by calling setData on a source.

Globe + Styles + Language

• Change a Map’s Language — Switch map label language by updating the text-field expression on symbol layers.
• Change the Case of Labels — Change text case of map labels using the text-transform layout property.
• Change the Default Position for Attribution — Move the attribution control to a different corner of the map.
• Display a Globe with a Vector Map — Render the map as a globe using the globe projection.
• Display a Globe with an Atmosphere — Render a globe with an atmospheric sky effect using fog.
• Display a Hybrid Satellite Map with Terrain Elevation — Combine raster satellite tiles with 3D terrain elevation.

Three.js + Basic Rendering

• 3D Terrain — Go beyond hillshade and show elevation in actual 3D.
• Add 3D Tiles Using three.js — Use a custom style layer with three.js to add 3D tiles 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.
• 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.
• Add a Simple Custom Layer on a Globe — Use a custom layer to draw simple WebGL content on a globe.
• 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.
• Display Map Performance Metrics — Measure map performance using built-in events for load time, idle time, and frames per second.

Map Setup & Controls

• Check if WebGL is Supported — Check if WebGL is supported before initializing the map.
• Create a Draggable Point — Create a draggable GeoJSON point on a map layer.
• Disable Map Rotation — Disable map rotation so the map always stays north-up.
• Disable Scroll Zoom — Disable scroll wheel zoom so the page scrolls normally over the map.
• Display a Non-Interactive Map — Render a static map without zoom, pan, or rotation controls.
• Display Map Navigation Controls — Add navigation, scale, fullscreen, and geolocate controls to a map.
• Get Coordinates of the Mouse Pointer — Show the geographic coordinates under the mouse pointer as it moves.
• Get Features Under the Mouse Pointer — Query and display map features under the mouse cursor using queryRenderedFeatures.
• Pitch and Bearing — Initialize a map with a custom pitch and bearing.
• Restrict Map Bounds — Restrict the map to a geographic bounding box so the user cannot pan outside it.