You are using an outdated browser and will encounter some problems with our website. Please consider upgrading.
Upgrade Now
Docs
Maps
Navigation
Search
Data
Help
Docs
Maps
Navigation
Search
Data
Help
All docs
Mapbox GL JS
Search
Guides
chevron-down
API Reference
chevron-down
Examples
Plugins and frameworks
Style Specification
chevron-down
Tutorials
share
Troubleshooting
share
All docs
chevron-right
arrow-left
Mapbox GL JS
chevron-right
Examples
Examples
Display a web map using an alternate projection
Use an Albers, Lambert, Winkel Tripel, or other map projection.
Display a map on a webpage
Initialize a map in an HTML element with Mapbox GL JS.
Draw a polygon and calculate its area
Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.
Create and style clusters
Use Mapbox GL JS' built-in functions to visualize points as clusters.
Add a polygon to a map using a GeoJSON source
Style a polygon with the fill layer type.
Display a popup on click
When a user clicks a symbol, show a popup containing more information.
Add a geocoder
Use the mapbox-gl-geocoder control to search for places using the Mapbox Geocoding API.
Add a 3D model with threebox
Use a custom style layer with threebox.js to add a 3D model to the map.
Add a 3D model
Use a custom style layer with three.js to add a 3D model to the map.
Add a line to a map using a GeoJSON source
Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.
Add a default marker to a web map
Add a marker to a map using the default Marker method in Mapbox GL JS.
Add custom icons with Markers
Add custom marker icons to your map.
Add an icon to the map
Add an icon to the map from an external URL and use it in a symbol layer.
Show and hide layers
Create a custom layer switcher to display different datasets.
Change a map's style
Switch to another map style.
Display zoom and rotation controls
Add zoom and rotation controls to the map.
Display map scale
Add a scale to the map.
Add markers to a web map with a symbol layer
Draw points from a GeoJSON collection to a map.
Display a popup on hover
When a user hovers over a custom marker, show a popup containing more information.
Display navigation directions
Use the mapbox-gl-directions plugin to show results from the Mapbox Directions API.
Display a popup
Add a popup to the map.
Add 3D terrain to a map
Use setTerrain to add 3D terrain to a map using a raster terrain source.
Accept coordinates as input to a geocoder
Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.
Add a canvas source
Add a canvas source to the map.
Add a custom style layer
Use a custom style layer to render custom WebGL content.
Add a fullscreen control to a map
Toggle between current view and fullscreen mode.
Add a generated icon to the map
Add an icon to the map that was generated at runtime.
Add a georeferenced image
Add a georeferenced image file to your map.
Add a marker using a place name
Add a marker using a place name or address for its location using the forward geocoder.
Add a new layer below labels
Use the second argument of addLayer to add a layer below labels.
Add a pattern to a polygon
Use fill-pattern to draw a polygon from a repeating image pattern.
Add a raster image to a map layer
Add a radar weather image overlay on top of a dark vector map.
Add a raster tile source
Add a third-party raster source to the map.
Add a stretchable image to the map
Use a stretchable image as a background for text.
Add a third party vector tile source
Render vector data provided by Mapillary.
Add a vector tile source
Add a vector source to a map.
Add a video
Display a video on top of a satellite raster baselayer.
Add a WMS source
Add an external Web Map Service raster layer to the map using addSource's tiles option.
Add an animated icon to the map
Add an animated icon to the map that was generated at runtime with the Canvas API.
Add an ant path animation to a line
Style a linestring with an animated dash-array to create an "ant path" effect.
Add cooperative gestures to a map
Use cooperativeGestures to control scroll-to-zoom and touch-based panning.
Add custom fog to a map
Customize atmospheric styling with setFog.
Add hillshading
Add raster hillshading to a map.
Add live realtime data
Use realtime location data streams to move a symbol on your map.
Add multiple geometries from one GeoJSON source
Add a polygon and circle layer from the same GeoJSON source.
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.
Adjust a layer's opacity
Drag the range slider to adjust the opacity of a raster layer on top of a map.
Animate 3D buildings based on ambient sounds
Make a 3D map that responds to sounds from your environment.
Animate a line
Animate a line by updating a GeoJSON source on each frame.
Animate a marker
Animate the position of a marker by updating its location on each frame.
Animate a point along a line
Animate the position of a point by updating a GeoJSON source on each frame.
Animate a point along a route
Use Turf to smoothly animate a point along the distance of a line.
Animate a series of images
Use a series of image sources to create an animation.
Animate map camera around a point
Animate the map camera around a point.
Animate the camera along a path
Use the FreeCamera API to follow a path over 3D terrain.
Animate the camera around a point with 3D terrain
Use the FreeCamera API to create a fly-over animation focused on a point.
Attach a popup to a marker instance
Attach a popup to a marker and display it on click.
Center the map on a clicked feature
Use events and flyTo to center the map on a feature.
Change a layer's color with buttons
Use setPaintProperty to change a layer's fill color.
Change a map's language
Use setLayoutProperty to switch languages dynamically.
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.
Change the case of labels
Use the upcase and downcase expressions to change the case of labels.
Change the default position for attribution
Place attribution in the top-left position when initializing a map.
Change worldview of administrative boundaries
Use the worldview value to adjust administrative boundaries based on the map's audience.
Check if Mapbox GL JS is supported
Check for Mapbox GL browser support.
Create a draggable Marker
Drag the marker 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.
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.
Create a heatmap layer
Visualize earthquake frequency by location using a heatmap layer.
Create a hover effect
Use events and feature states to create a per feature hover effect.
Create a rotating globe
Display your map as an interactive, rotating globe.
Create a time slider
Visualize earthquakes with a range slider.
Customize camera animations
Customize camera animations using AnimationOptions.
Disable map rotation
Prevent users from rotating a map.
Disable scroll zoom
Prevent scroll from zooming a map.
Display a map with a custom style
Use a Mapbox-hosted custom style in a Mapbox GL JS map.
Display a non-interactive map
Disable interactivity to create a static map.
Display a satellite map on a webpage
Display a satellite raster layer on a map with Mapbox GL JS.
Display and style rich text labels
Use the format expression to display country labels in both English and in the local language.
Display buildings in 3D
Use extrusions to display building heights in 3D.
Display HTML clusters with custom properties
Extend clustering with HTML markers and custom property expressions.
Display line that crosses 180th meridian
Draw a line across the 180th meridian using a GeoJSON source.
Extrude polygons for 3D indoor mapping
Create a 3D indoor map with the fill-extrusion-height paint property.
Filter features within map view
Move the map to query viewable features in a vector tile layer and filter by typing in an input.
Filter symbols based on pitch and distance
Use pitch and distance-from-center to control symbol density for pitched maps.
Filter symbols by text input
Filter symbols by icon name by typing in a text input.
Filter symbols by toggling checkboxes
Filter a set of symbols based on a property value in the data.
Filter symbols using a dynamic expression
Filter a set of symbols based on a property value in the data.
Fit a map to a bounding box
Fit the map to a specific area, regardless of the pixel size of the map.
Fit to the bounds of a LineString
Get the bounds of a LineString.
Fly to a location
Use flyTo to smoothly interpolate between locations.
Fly to a location based on scroll position
Scroll down through the story and the map will fly to the chapter's location.
Generate and add a missing icon to the map
Dynamically generate an image not available in a map style at runtime and add it to the map style.
Get coordinates of the mouse pointer
Show mouse position on hover with pixel and latitude and longitude coordinates.
Get features under the mouse pointer
Use queryRenderedFeatures to show properties of hovered-over map elements.
Highlight features containing similar data
Hover over counties to highlight counties that share the same name.
Highlight features within a bounding box
Hold the Shift key and drag the map to query features using queryRenderedFeatures.
Join local JSON data with vector tile geometries
Style a choropleth by merging local JSON data with vector tile geometries.
Jump to a series of locations
Use the jumpTo function to showcase multiple locations.
Limit geocoder results to a named region
Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API limiting results to a region.
Load data from an external GeoJSON file
Add a GeoJSONSource using a URL and show the data on a map.
Localize the geocoder to a given language
Localize the mapbox-gl-geocoder control to set the UI language and improve result relevance in that language.
Locate the user
Geolocate the user and then track their current location on the map using the GeolocateControl.
Measure distances
Click points on a map to create lines that measure distanced using turf.length.
Navigate the map with game-like controls
Use the keyboard's arrow keys to move around the map with game-like controls.
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.
Orient markers toward the horizon
Add horizon-aligned markers to a globe.
Persist sources and layers when switching a map's base style
Use events to persist programmatically-added sources and layers when updating a map's style.
Place the geocoder input outside the map
Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API attached to an element outside the map.
Play map locations as a slideshow
Autoplay the locations of boroughs in New York City.
Query terrain elevation
Make client-side terrain elevation queries.
Query terrain elevation along a line
Use Mapbox's elevation data to create an elevation profile between any two point locations.
Render world copies
Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.
Restrict map panning to an area
Prevent a map from being panned to a different place by setting maxBounds.
Select features around a clicked point
Click on the map to query features using queryRenderedFeatures.
Set a point after Geocoder result
Style a marker used to mark the location of the mapbox-gl-geocoder search result.
Set pitch and bearing
Initialize a map with pitch and bearing camera options.
Show polygon information on click
When a user clicks a polygon, show a popup containing more information.
Slowly fly to a location
Use flyTo with flyOptions to slowly zoom to a location.
Style circles with a data-driven property
Create a visualization with a data expression for circle-color.
Style lines with a data-driven property
Create a visualization with a data expression for line-color.
Style symbols based on pitch
Use the pitch expression to switch symbol styling based on the pitch of the map.
Supplement forward geocoding search results with another data source
Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.
Swipe between maps
Use mapbox-gl-compare to swipe between and synchronize two maps.
Toggle interactions
Enable or disable UI handlers on a map.
Update a choropleth layer by zoom level
Display state or county population depending on zoom level.
Update a feature in realtime
Change an existing feature on your map in realtime by updating its data.
Use a custom camera animation with a geocoder
Use camera animation options with the mapbox-gl-geocoder to create a custom animation when the user selects a search result.
Use a custom render function with a geocoder
Use a custom HTML rendering function with the mapbox-gl-geocoder control to customize the dropdown menu.
Use a fallback image
Use a coalesce expression to display another image when a requested image is not available.
Use different map projections for web maps
Create a map using the Albers, Equal Earth, Equirectangular, Lambert, Mercator, Natural Earth, or Winkel Tripel projections.
Use locally generated ideographs
Use the localIdeographFontFamily setting to speed up map load times by using locally available fonts instead of font data fetched from the server.
Use the geocoder without a map
Use the mapbox-gl-geocoder control to search for places using Mapbox Search API without an associated map view.
Variable label placement
Use text-variable-anchor to allow high priority labels to shift position to stay on the map.
Visualize population density
Use a variable binding expression to calculate and display population density.
arrow-up