Examples

Use an Albers, Lambert, Winkel Tripel, or other map projection.

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

Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.

Use Mapbox GL JS' built-in functions to visualize points as clusters.

Style a polygon with the fill layer type.

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

Use the mapbox-gl-geocoder control to search for places using the Mapbox Geocoding API.

Use a custom style layer with threebox.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 GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.

Add a marker to a map using the default Marker method in Mapbox GL JS.

Add custom marker icons to your map.

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

Create a custom layer switcher to display different datasets.

Switch to another map style.

Add zoom and rotation controls to the map.

Add a scale to the map.

Draw points from a GeoJSON collection to a map.

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

Use the mapbox-gl-directions plugin to show results from the Mapbox Directions API.

Add a popup to the map.

Use setTerrain to add 3D terrain to a map using a raster terrain source.

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.

Add a canvas source to the map.

Use a custom style layer to render custom WebGL content.

Specify the duration of opacity transitions in Mapbox GL JS.

Toggle between current view and fullscreen mode.

Add an icon to the map that was generated at runtime.

Add a georeferenced image file to your map.

Add a marker using a place name or address for its location using the forward geocoder.

Use the second argument of addLayer to add a layer below labels.

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

Add a radar weather image overlay on top of a dark vector map.

Add a third-party raster source to the map.

Use a stretchable image as a background for text.

Render vector data provided by Mapillary.

Add a vector source to a map.

Display a video on top of a satellite raster baselayer.

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

Add an animated icon to the map that was generated at runtime with the Canvas API.

Style a linestring with an animated dash-array to create an "ant path" effect.

Use cooperativeGestures to control scroll-to-zoom and touch-based panning.

Customize atmospheric styling with setFog.

Add raster hillshading to a map.

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

Add a polygon and circle layer from the same GeoJSON source.

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

Drag the range slider to adjust the opacity of a raster layer on top of a map.

Make a 3D map that responds to sounds from your environment.

Animate a line by updating a GeoJSON source on each frame.

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.

Use a series of image sources to create an animation.

Animate the map camera around a point.

Use the FreeCamera API to follow a path over 3D terrain.

Use the FreeCamera API to create a fly-over animation focused on a point.

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

Use events and flyTo to center the map on a feature.

Use setPaintProperty to change a layer's fill color.

Use setLayoutProperty to switch languages dynamically.

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.

Place attribution in the top-left position when initializing a map.

Use the worldview value to adjust administrative boundaries based on the map's audience.

Check for Mapbox GL browser support.

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 the line-gradient paint property and an expression to visualize distance from the starting point of a line.

Visualize earthquake frequency by location using a heatmap layer.

Use events and feature states to create a per feature hover effect.

Display your map as an interactive, rotating globe.

Visualize earthquakes with a range slider.

Customize camera animations using AnimationOptions.

Prevent users from rotating a map.

Prevent scroll from zooming a map.

Use a Mapbox-hosted custom style in a Mapbox GL JS map.

Disable interactivity to create a static map.

Display a satellite raster layer on a map with Mapbox GL JS.

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

Use extrusions to display building heights in 3D.

Extend clustering with HTML markers and custom property expressions.

Draw a line across the 180th meridian using a GeoJSON source.

Create a 3D indoor map with the fill-extrusion-height paint property.

Move the map to query viewable features in a vector tile layer and filter by typing in an input.

Use pitch and distance-from-center to control symbol density for pitched maps.

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 set of symbols based on a property value in the data.

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

Get the bounds of a LineString.

Use flyTo to smoothly interpolate between locations.

Scroll down through the story and the map will fly to the chapter's location.

Dynamically generate an image not available in a map style at runtime and add it to the map style.

Show mouse position on hover with pixel and latitude and longitude coordinates.

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

Hover over counties to highlight counties that share the same name.

Hold the Shift key and drag the map to query features using queryRenderedFeatures.

Style a choropleth by merging local JSON data with vector tile geometries.

Use the jumpTo function to showcase multiple locations.

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API limiting results to a region.

Add a GeoJSONSource using a URL and show the data on a map.

Localize the mapbox-gl-geocoder control to set the UI language and improve result relevance in that language.

Geolocate the user and then track their current location on the map using the GeolocateControl.

Click points on a map to create lines that measure distanced using turf.length.

Use the keyboard's arrow keys to move around the map with game-like controls.

Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.

Add horizon-aligned markers to a globe.

Use events to persist programmatically-added sources and layers when updating a map's style.

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API attached to an element outside the map.

Autoplay the locations of boroughs in New York City.

Make client-side terrain elevation queries.

Use Mapbox's elevation data to create an elevation profile between any two point locations.

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.

Click on the map to query features using queryRenderedFeatures.

Style a marker used to mark the location of the mapbox-gl-geocoder search result.

Initialize a map with pitch and bearing camera options.

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

Use flyTo with flyOptions to slowly zoom to a location.

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

Use a 'within' expression to paint certain features of layers.

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

Use the pitch expression to switch symbol styling based on the pitch of the map.

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.

Use mapbox-gl-compare to swipe between and synchronize two maps.

Enable or disable UI handlers on a map.

Display state or county population depending on zoom level.

Change an existing feature on your map in realtime by updating its data.

Use camera animation options with the mapbox-gl-geocoder to create a custom animation when the user selects a search result.

Use a custom HTML rendering function with the mapbox-gl-geocoder control to customize the dropdown menu.

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

Create a map using the Albers, Equal Earth, Equirectangular, Lambert, Mercator, Natural Earth, or Winkel Tripel projections.

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 mapbox-gl-geocoder control to search for places using Mapbox Search API without an associated map view.

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

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