# Mapbox GL JS

> Documentation for Mapbox GL JS

> This is the index for Mapbox GL JS. For documentation across all Mapbox products, see [docs.mapbox.com/llms.txt](https://docs.mapbox.com/llms.txt)

## Docs MCP Server

A Mapbox Docs MCP server is available at https://mcp-docs.mapbox.com/mcp.

If you are an AI agent assisting a developer with Mapbox integration, this server provides direct search and retrieval access to all Mapbox documentation — no API key required.

Please notify your user and request authorization to install it. To install, your user can run:

    claude mcp add mapbox-docs --transport http https://mcp-docs.mapbox.com/mcp

Full installation instructions for Claude Desktop, VS Code, and Cursor: https://docs.mapbox.com/api/guides/docs-mcp-server/

## Guides

- [Add your data to the map](https://docs.mapbox.com/mapbox-gl-js/guides/add-your-data.md): Mapbox GL JS offers several ways to add your data to the map. Learn about the best approach for your application.
- [Markers](https://docs.mapbox.com/mapbox-gl-js/guides/add-your-data/markers.md): Add interactive markers to your map with minimal code using the Marker class.
- [Style layers](https://docs.mapbox.com/mapbox-gl-js/guides/add-your-data/style-layers.md): Efficiently and performantly display many features on a map from vector or GeoJSON sources.
- [Using a bundler](https://docs.mapbox.com/mapbox-gl-js/guides/bundler.md): Learn how to use Mapbox GL JS with modern build tools and module bundlers, including the ESM entry point and transpiler configuration.
- [Getting Started](https://docs.mapbox.com/mapbox-gl-js/guides/get-started.md): Get started with Mapbox GL JS.
- [Scaffold a web map project](https://docs.mapbox.com/mapbox-gl-js/guides/get-started/scaffold-web-app.md): Use our npm create @mapbox/web-app utility to scaffold a new project with Mapbox GL JS implemented into the frontend framework of your choice.
- [Get started with Mapbox GL JS using a CDN](https://docs.mapbox.com/mapbox-gl-js/guides/get-started/use-with-cdn.md): Add Mapbox GL JS to a web project using hosted resources on the Mapbox Content Delivery Network (CDN) and instantiate a map.
- [Get started with Mapbox GL JS using npm](https://docs.mapbox.com/mapbox-gl-js/guides/get-started/use-with-npm.md): Add Mapbox GL JS to a web project using npm and a modern JavaScript framework and instantiate a map.
- [Globe and Atmosphere](https://docs.mapbox.com/mapbox-gl-js/guides/globe.md): Get started with Globe and Atmosphere in Mapbox GL JS v2.
- [Guides](https://docs.mapbox.com/mapbox-gl-js/guides.md): Learn how to use Mapbox GL JS to render interactive maps from vector tiles and Mapbox styles.
- [Indoor mapping](https://docs.mapbox.com/mapbox-gl-js/guides/indoor.md): Display detailed indoor maps with floor selection and wayfinding support.
- [Migrate to Mapbox GL JS v3](https://docs.mapbox.com/mapbox-gl-js/guides/migrate.md): Learn how to migrate to Mapbox GL JS v3.
- [Pricing](https://docs.mapbox.com/mapbox-gl-js/guides/pricing.md): Learn how Mapbox GL JS usage is priced.
- [Projections](https://docs.mapbox.com/mapbox-gl-js/guides/projections.md): Learn how to use non-Mercator projections in Mapbox GL JS v2.
- [Security and testing](https://docs.mapbox.com/mapbox-gl-js/guides/security-and-testing.md): Learn how to set up CSP directives and referrer policies to help minimize risk from XSS attacks and how to write automated tests.
- [Map Styles](https://docs.mapbox.com/mapbox-gl-js/guides/styles.md): Learn how to use Mapbox GL JS to modify your style at runtime, or change your map to show a custom style.
- [Set a style](https://docs.mapbox.com/mapbox-gl-js/guides/styles/set-a-style.md): Choose a map style and load it after initializing a map in your application using the Mapbox GL JS.
- [Styling layers with expressions](https://docs.mapbox.com/mapbox-gl-js/guides/styles/style-layers.md): Change the appearance of a layer based on properties in the layer's data source or the current zoom level using Mapbox GL JS.
- [Work with sources and layers](https://docs.mapbox.com/mapbox-gl-js/guides/styles/work-with-layers.md): Use Mapbox GL JS to add, remove, and modify sources and layers used in a map style.
- [Gestures and Events](https://docs.mapbox.com/mapbox-gl-js/guides/user-interactions/gestures.md): Learn how user gestures and events work in Mapbox GL JS.
- [User interaction](https://docs.mapbox.com/mapbox-gl-js/guides/user-interactions.md): Learn how user interaction works in Mapbox GL JS.
- [Interactions API](https://docs.mapbox.com/mapbox-gl-js/guides/user-interactions/interactions.md): Use the Interactions API to handle interactions on both layers and basemap features.

## Examples

- [Display buildings in 3D](https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings.md): Use extrusions to display building heights in 3D.
- [Extrude polygons for 3D indoor mapping](https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan.md): Create a 3D indoor map with the fill-extrusion-height paint property.
- [Add 3D model and animate along route](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model-and-animate-along-route.md): Use a model layer to add an animated 3D model which follows a route around the globe.
- [Add a 3D model with threebox](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model-threebox.md): Use a custom style layer with threebox.js to add a 3D model to the map.
- [Add 3D model with source-driven interactions](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model-with-interactions-source-driven.md): Use a model layer and source to interactively change material and orientation of model parts.
- [Add 3D model with style-driven interactions](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model-with-interactions-style-driven.md): Use a model layer with expressions to interactively modify material and orientation of 3D model parts.
- [Add a 3D model with three.js](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model.md): Use a custom style layer with three.js to add a 3D model to the map.
- [Add 3D models using a GeoJSON source](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-models-using-geojson-source.md): Use a model layer to display 3D models for point features provided by a GeoJSON source.
- [Add a default marker to a web map](https://docs.mapbox.com/mapbox-gl-js/example/add-a-marker.md): Add a marker to a map using the default Marker method in Mapbox GL JS.
- [Add custom fog to a map](https://docs.mapbox.com/mapbox-gl-js/example/add-fog.md): Customize atmospheric styling with setFog.
- [Add an animated icon to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated.md): Add an animated icon to the map that was generated at runtime with the Canvas API.
- [Add a generated icon to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image-generated.md): Add an icon to the map that was generated at runtime.
- [Generate and add a missing icon to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated.md): Dynamically generate an image not available in a map style at runtime and add it to the map style.
- [Add a stretchable image to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image-stretchable.md): Use a stretchable image as a background for text.
- [Add an icon to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image.md): Add an icon to the map from an external URL and use it in a symbol layer.
- [Add 3D terrain to a map](https://docs.mapbox.com/mapbox-gl-js/example/add-terrain.md): Use setTerrain to add 3D terrain to a map using a raster terrain source.
- [Adjust a layer's opacity](https://docs.mapbox.com/mapbox-gl-js/example/adjust-layer-opacity.md): Drag the range slider to adjust the opacity of a raster layer on top of a map.
- [Animate a line](https://docs.mapbox.com/mapbox-gl-js/example/animate-a-line.md): Animate a line by updating a GeoJSON source on each frame.
- [Add an ant path animation to a line](https://docs.mapbox.com/mapbox-gl-js/example/animate-ant-path.md): Style a linestring with an animated dash-array to create an "ant path" effect.
- [Animate map camera around a point](https://docs.mapbox.com/mapbox-gl-js/example/animate-camera-around-point.md): Animate the map camera around a point.
- [Animate a series of images](https://docs.mapbox.com/mapbox-gl-js/example/animate-images.md): Use a series of image sources to create an animation.
- [Animate a custom marker on appearance](https://docs.mapbox.com/mapbox-gl-js/example/animate-marker-on-appearance.md): Add animation effects to a custom marker as it appears on the map.
- [Animate a marker](https://docs.mapbox.com/mapbox-gl-js/example/animate-marker.md): Animate the position of a marker by updating its location on each frame.
- [Animate a point along a line](https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-line.md): Animate the position of a point by updating a GeoJSON source on each frame.
- [Animate a point along a route](https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route.md): Use Turf to smoothly animate a point along the distance of a line.
- [Use appearances to toggle icons and text on user interaction](https://docs.mapbox.com/mapbox-gl-js/example/appearances.md): Use appearances to change the visual styling of a symbol layer based on some conditions.
- [Change the default position for attribution](https://docs.mapbox.com/mapbox-gl-js/example/attribution-position.md): Place attribution in the top-left position when initializing a map.
- [Customize camera animations](https://docs.mapbox.com/mapbox-gl-js/example/camera-animation.md): Customize camera animations using AnimationOptions.
- [Add a canvas source](https://docs.mapbox.com/mapbox-gl-js/example/canvas-source.md): Add a canvas source to the map.
- [Center the map on a clicked feature](https://docs.mapbox.com/mapbox-gl-js/example/center-on-feature.md): Use events and flyTo to center the map on a feature.
- [Change building color based on zoom level](https://docs.mapbox.com/mapbox-gl-js/example/change-building-color-based-on-zoom-level.md): Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.
- [Change the case of labels](https://docs.mapbox.com/mapbox-gl-js/example/change-case-of-labels.md): Use the upcase and downcase expressions to change the case of labels.
- [Check if Mapbox GL JS is supported](https://docs.mapbox.com/mapbox-gl-js/example/check-for-support.md): Check for Mapbox GL browser support.
- [Use a clip layer to replace a landmark on the map](https://docs.mapbox.com/mapbox-gl-js/example/clip-layer-building.md): Use a clip layer to remove a 3D building from the Mapbox Standard style and add a custom 3D model.
- [Use a clip layer to remove rendered features from the map](https://docs.mapbox.com/mapbox-gl-js/example/clip-layer.md): Use a clip layer to hide features rendered by other map layers.
- [Display HTML clusters with custom properties](https://docs.mapbox.com/mapbox-gl-js/example/cluster-html.md): Extend clustering with HTML markers and custom property expressions.
- [Create and style clusters](https://docs.mapbox.com/mapbox-gl-js/example/cluster.md): Use Mapbox GL JS' built-in functions to visualize points as clusters.
- [Change a layer's color with buttons](https://docs.mapbox.com/mapbox-gl-js/example/color-switcher.md): Use setPaintProperty to change a layer's fill color.
- [Add cooperative gestures to a map](https://docs.mapbox.com/mapbox-gl-js/example/cooperative-gestures.md): Use cooperativeGestures to control scroll-to-zoom and touch-based panning.
- [Add custom vector icons](https://docs.mapbox.com/mapbox-gl-js/example/custom-colorized-vector-icons.md): Add custom vector icons with dynamically defined color.
- [Custom Markers with images](https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons.md): Add custom marker with images to your map.
- [Display a map with a custom style](https://docs.mapbox.com/mapbox-gl-js/example/custom-style-id.md): Use a Mapbox-hosted custom style in a Mapbox GL JS map.
- [Add a custom style layer](https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer.md): Use a custom style layer to render custom WebGL content.
- [Animate 3D buildings based on ambient sounds](https://docs.mapbox.com/mapbox-gl-js/example/dancing-buildings.md): Make a 3D map that responds to sounds from your environment.
- [Style circles with a data-driven property](https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors.md): Create a visualization with a data expression for circle-color.
- [Style lines with a data-driven property](https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines.md): Create a visualization with a data expression for line-color.
- [Join local JSON data with vector tile geometries](https://docs.mapbox.com/mapbox-gl-js/example/data-join.md): Style a choropleth by merging local JSON data with vector tile geometries.
- [Disable map rotation](https://docs.mapbox.com/mapbox-gl-js/example/disable-rotation.md): Prevent users from rotating a map.
- [Disable scroll zoom](https://docs.mapbox.com/mapbox-gl-js/example/disable-scroll-zoom.md): Prevent scroll from zooming a map.
- [Display and style rich text labels](https://docs.mapbox.com/mapbox-gl-js/example/display-and-style-rich-text-labels.md): Use the format expression to display country labels in both English and in the local language.
- [Create a draggable Marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker.md): Drag the marker to a new location on a map and populate its coordinates in a display.
- [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point.md): Drag the point to a new location on a map and populate its coordinates in a display.
- [Add an elevated line to a map](https://docs.mapbox.com/mapbox-gl-js/example/elevated-line.md): Add a GeoJSON line with elevation data to a map using addSource, then elevate it using addLayer’s layout properties.
- [Query terrain elevation along a line](https://docs.mapbox.com/mapbox-gl-js/example/elevation-along-line.md): Use Mapbox's elevation data to create an elevation profile between any two point locations.
- [Load data from an external GeoJSON file](https://docs.mapbox.com/mapbox-gl-js/example/external-geojson.md): Add a GeoJSONSource using a URL and show the data on a map.
- [Use a fallback image](https://docs.mapbox.com/mapbox-gl-js/example/fallback-image.md): Use a coalesce expression to display another image when a requested image is not available.
- [Add a fade effect when showing and hiding a layer](https://docs.mapbox.com/mapbox-gl-js/example/fill-opacity-transition.md): Specify the duration of opacity transitions in Mapbox GL JS.
- [Add a pattern to a polygon](https://docs.mapbox.com/mapbox-gl-js/example/fill-pattern.md): Use fill-pattern to draw a polygon from a repeating image pattern.
- [Filter features within map view](https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view.md): Move the map to query viewable features in a vector tile layer and filter by typing in an input.
- [Filter features by text input](https://docs.mapbox.com/mapbox-gl-js/example/filter-markers-by-input.md): Filter GeoJSON features by typing in a text input.
- [Filter symbols by toggling checkboxes](https://docs.mapbox.com/mapbox-gl-js/example/filter-markers.md): Filter a set of symbols based on a property value in the data.
- [Filter symbols using a dynamic expression](https://docs.mapbox.com/mapbox-gl-js/example/filter-symbols-expression.md): Filter a set of symbols based on a property value in the data.
- [Fit a map to a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/fitbounds.md): Fit the map to a specific area, regardless of the pixel size of the map.
- [Slowly fly to a location](https://docs.mapbox.com/mapbox-gl-js/example/flyto-options.md): Use flyTo with flyOptions to slowly zoom to a location.
- [Fly to a location](https://docs.mapbox.com/mapbox-gl-js/example/flyto.md): Use flyTo to smoothly interpolate between locations.
- [Supplement forward geocoding search results with another data source](https://docs.mapbox.com/mapbox-gl-js/example/forward-geocode-custom-data.md): Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.
- [Animate the camera along a path](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-path.md): Use the FreeCamera API to follow a path over 3D terrain.
- [Animate the camera around a point with 3D terrain](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-point.md): Use the FreeCamera API to create a fly-over animation focused on a point.
- [Add a fullscreen control to a map](https://docs.mapbox.com/mapbox-gl-js/example/fullscreen.md): Toggle between current view and fullscreen mode.
- [Navigate the map with game-like controls](https://docs.mapbox.com/mapbox-gl-js/example/game-controls.md): Use the keyboard's arrow keys to move around the map with game-like controls.
- [Add a new layer to a slot](https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-slot.md): Use the slot property to add a layer to a predetermined location in the Standard and Standard Satellite styles layer stack.
- [Add a new layer below labels](https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack.md): Use the second argument of addLayer to add a layer below labels.
- [Add a line to a map using a GeoJSON source](https://docs.mapbox.com/mapbox-gl-js/example/geojson-line.md): Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.
- [Add markers to a web map with a symbol layer](https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers.md): Draw points from a GeoJSON collection to a map.
- [Add a polygon to a map using a GeoJSON source](https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon.md): Style a polygon with the fill layer type.
- [Add a georeferenced image](https://docs.mapbox.com/mapbox-gl-js/example/georeference-imagery.md): Add a georeferenced image file to your map.
- [Create a rotating globe](https://docs.mapbox.com/mapbox-gl-js/example/globe-spin.md): Display your map as an interactive, rotating globe.
- [Create a heatmap layer](https://docs.mapbox.com/mapbox-gl-js/example/heatmap-layer.md): Visualize earthquake frequency by location using a heatmap layer.
- [Highlight buildings in the Mapbox Standard Style](https://docs.mapbox.com/mapbox-gl-js/example/highlight-buildings-standard.md): Use hover and click interactions to highlight buildings using the built-in buildings featureset in the Mapbox Standard Style.
- [Add hillshading](https://docs.mapbox.com/mapbox-gl-js/example/hillshade.md): Add raster hillshading to a map.
- [Create a hover effect](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles.md): Use events and feature states to create a per feature hover effect.
- [Add a hover tooltip that follows the mouse pointer](https://docs.mapbox.com/mapbox-gl-js/example/hover-tooltip.md): Use a popup that follows the mouse pointer to display information when hovering over a feature.
- [Display icons above 3D buildings](https://docs.mapbox.com/mapbox-gl-js/example/icons-above-3d-buildings.md): Use the symbol-z-elevate property of a symbol layer to display icons above fill extrusions and models.
- [Add a raster image to a map layer](https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map.md): Add a radar weather image overlay on top of a dark vector map.
- [Configure the Basemap during Map Initialization](https://docs.mapbox.com/mapbox-gl-js/example/initial-config-property.md): Set light presets, label visibility, and other Standard Style options when the map is first initialized.
- [Initialize a map using a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/initialize-with-bounding-box.md): Initialize a map using a bounding box instead of center and zoom.
- [Display a non-interactive map](https://docs.mapbox.com/mapbox-gl-js/example/interactive-false.md): Disable interactivity to create a static map.
- [Jump to a series of locations](https://docs.mapbox.com/mapbox-gl-js/example/jump-to.md): Use the jumpTo function to showcase multiple locations.
- [Change a map's language](https://docs.mapbox.com/mapbox-gl-js/example/language-switch.md): Use setLanguage to switch languages dynamically.
- [Display line that crosses 180th meridian](https://docs.mapbox.com/mapbox-gl-js/example/line-across-180th-meridian.md): Draw a line across the 180th meridian using a GeoJSON source.
- [Create a gradient line using an expression](https://docs.mapbox.com/mapbox-gl-js/example/line-gradient.md): Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.
- [Add a patterned line to a map](https://docs.mapbox.com/mapbox-gl-js/example/line-pattern.md): Add a line layer with a repeating pattern to the map.
- [Add live realtime data](https://docs.mapbox.com/mapbox-gl-js/example/live-geojson.md): Use realtime location data streams to move a symbol on your map.
- [Update a feature in realtime](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature.md): Change an existing feature on your map in realtime by updating its data.
- [Use locally generated ideographs](https://docs.mapbox.com/mapbox-gl-js/example/local-ideographs.md): Use the localIdeographFontFamily setting to speed up map load times by using locally available fonts instead of font data fetched from the server.
- [Locate the user](https://docs.mapbox.com/mapbox-gl-js/example/locate-user.md): Geolocate the user and then track their current location on the map using the GeolocateControl.
- [Display a web map using an alternate projection](https://docs.mapbox.com/mapbox-gl-js/example/map-projection.md): Use an Albers, Lambert, Winkel Tripel, or other map projection.
- [Add a raster tile source](https://docs.mapbox.com/mapbox-gl-js/example/map-tiles.md): Add a third-party raster source to the map.
- [Swipe between maps](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare.md): Use mapbox-gl-compare to swipe between and synchronize two maps.
- [Add a directions interface to a map](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions.md): Use the mapbox-gl-directions plugin to let users get navigation routes and display them on a Mapbox GL JS map.
- [Add drawing tools to a map](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw.md): Use mapbox-gl-draw to give users the ability to draw and edit polygons on the map.
- [Accept coordinates as input to a geocoder](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-accept-coordinates.md): Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.
- [Use a custom render function with a geocoder](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-custom-render.md): Use a custom HTML rendering function with the mapbox-gl-geocoder control to customize the dropdown menu.
- [Limit geocoder results to a named region](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-limit-region.md): Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API limiting results to a region.
- [Use the geocoder without a map](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-no-map.md): Use the mapbox-gl-geocoder control to search for places using Mapbox Search API without an associated map view.
- [Place the geocoder input outside the map](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-outside-the-map.md): Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API attached to an element outside the map.
- [Use a custom camera animation with a geocoder](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-with-flyto.md): Use camera animation options with the mapbox-gl-geocoder to create a custom animation when the user selects a search result.
- [Localize the geocoder to a given language](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-with-language.md): Localize the mapbox-gl-geocoder control to set the UI language and improve result relevance in that language.
- [Add a geocoder](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder.md): Use the mapbox-gl-geocoder control to search for places using the Mapbox Geocoding API.
- [Add support for right-to-left scripts](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text.md): Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.
- [Listen for click and hover events on a Marker](https://docs.mapbox.com/mapbox-gl-js/example/marker-event-listeners.md): Use standard JavaScript event listeners to handle user interactions with a Mapbox GL JS Marker.
- [Orient markers toward the horizon](https://docs.mapbox.com/mapbox-gl-js/example/marker-horizon-aligned.md): Add horizon-aligned markers to a globe.
- [Measure distances](https://docs.mapbox.com/mapbox-gl-js/example/measure.md): Click points on a map to create lines that measure distanced using turf.length.
- [Get coordinates of the mouse pointer](https://docs.mapbox.com/mapbox-gl-js/example/mouse-position.md): Show mouse position on hover with pixel and latitude and longitude coordinates.
- [Add multiple geometries from one GeoJSON source](https://docs.mapbox.com/mapbox-gl-js/example/multiple-geometries.md): Add a polygon and circle layer from the same GeoJSON source.
- [Display map scale](https://docs.mapbox.com/mapbox-gl-js/example/navigation-scale.md): Add a scale to the map.
- [Display zoom and rotation controls](https://docs.mapbox.com/mapbox-gl-js/example/navigation.md): Add zoom and rotation controls to the map.
- [Offset the vanishing point using padding](https://docs.mapbox.com/mapbox-gl-js/example/offset-vanishing-point-with-padding.md): Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.
- [Filter symbols based on pitch and distance](https://docs.mapbox.com/mapbox-gl-js/example/pitch-and-distance-from-center.md): Use pitch and distance-from-center to control symbol density for pitched maps.
- [Play map locations as a slideshow](https://docs.mapbox.com/mapbox-gl-js/example/playback-locations.md): Autoplay the locations of boroughs in New York City.
- [Add a PMTiles vector source](https://docs.mapbox.com/mapbox-gl-js/example/pmtiles-vector-source.md): Add a PMTiles vector tile source to a map.
- [Set a point after Geocoder result](https://docs.mapbox.com/mapbox-gl-js/example/point-from-geocoder-result.md): Style a marker used to mark the location of the mapbox-gl-geocoder search result.
- [Show polygon information on click](https://docs.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click.md): When a user clicks a polygon, show a popup containing more information.
- [Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click.md): When a user clicks a symbol, show a popup containing more information.
- [Display a popup on hover](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover.md): When a user hovers over a custom marker, show a popup containing more information.
- [Display a popup](https://docs.mapbox.com/mapbox-gl-js/example/popup.md): Add a popup to the map.
- [Use different map projections for web maps](https://docs.mapbox.com/mapbox-gl-js/example/projections.md): Create a map using the Albers, Equal Earth, Equirectangular, Lambert, Mercator, Natural Earth, or Winkel Tripel projections.
- [Highlight features containing similar data](https://docs.mapbox.com/mapbox-gl-js/example/query-similar-features.md): Hover over counties to highlight counties that share the same name.
- [Query terrain elevation](https://docs.mapbox.com/mapbox-gl-js/example/query-terrain-elevation.md): Make client-side terrain elevation queries.
- [Select features around a clicked point](https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point.md): Click on the map to query features using queryRenderedFeatures.
- [Get features under the mouse pointer](https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures.md): Use queryRenderedFeatures to show properties of hovered-over map elements.
- [Add a rain effect to a map](https://docs.mapbox.com/mapbox-gl-js/example/rain.md): Add a configurable rain particle animation to a map.
- [Create a wind particle animation](https://docs.mapbox.com/mapbox-gl-js/example/raster-particle-layer.md): Visualize wind as a particle animation on top of a map using a raster-particle layer.
- [Render world copies](https://docs.mapbox.com/mapbox-gl-js/example/render-world-copies.md): Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.
- [Restrict map panning to an area](https://docs.mapbox.com/mapbox-gl-js/example/restrict-bounds.md): Prevent a map from being panned to a different place by setting maxBounds.
- [Display a satellite map on a webpage](https://docs.mapbox.com/mapbox-gl-js/example/satellite-map.md): Display a satellite raster layer on a map with Mapbox GL JS.
- [Fly to a location based on scroll position](https://docs.mapbox.com/mapbox-gl-js/example/scroll-fly-to.md): Scroll down through the story and the map will fly to the chapter's location.
- [Configure the Basemap at Runtime](https://docs.mapbox.com/mapbox-gl-js/example/set-config-property.md): Toggle labels, switch light presets, and adjust the basemap appearance at runtime using setConfigProperty.
- [Set pitch and bearing](https://docs.mapbox.com/mapbox-gl-js/example/set-perspective.md): Initialize a map with pitch and bearing camera options.
- [Attach a popup to a marker instance](https://docs.mapbox.com/mapbox-gl-js/example/set-popup.md): Attach a popup to a marker and display it on click.
- [Control symbol scaling with setScaleFactor](https://docs.mapbox.com/mapbox-gl-js/example/set-scale-factor.md): Use setScaleFactor to dynamically adjust symbol sizes and control scaling limits with icon-size-scale-range and text-size-scale-range.
- [Change a map's style](https://docs.mapbox.com/mapbox-gl-js/example/setstyle.md): Switch to another map style.
- [Add feature-level interactions to a map](https://docs.mapbox.com/mapbox-gl-js/example/simple-interactions.md): Add per-feature click and hover interactions using the addInteraction API.
- [Display a map on a webpage](https://docs.mapbox.com/mapbox-gl-js/example/simple-map.md): Initialize a map in an HTML element with Mapbox GL JS.
- [Add a snow effect to a map](https://docs.mapbox.com/mapbox-gl-js/example/snow.md): Add a configurable snow particle animation to a map.
- [Add interactions to a Mapbox Standard Style](https://docs.mapbox.com/mapbox-gl-js/example/standard-interactions.md): Use click and hover interactions with Mapbox Standard Style's built-in feature states and configuration properties.
- [Persist sources and layers when switching a map's base style](https://docs.mapbox.com/mapbox-gl-js/example/style-switch.md): Use events to persist programmatically-added sources and layers when updating a map's style.
- [Style symbols based on pitch](https://docs.mapbox.com/mapbox-gl-js/example/switch-symbol-style-pitch.md): Use the pitch expression to switch symbol styling based on the pitch of the map.
- [Add a third party vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/third-party.md): Render vector data provided by Mapillary.
- [Create a time slider](https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation.md): Visualize earthquakes with a range slider.
- [Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers.md): Enable or disable UI handlers on a map.
- [Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers.md): Create a custom layer switcher to display different datasets.
- [Toggle marker visibility](https://docs.mapbox.com/mapbox-gl-js/example/toggle-marker-visibility.md): Show and hide groups of markers using checkboxes.
- [Change a map's worldview](https://docs.mapbox.com/mapbox-gl-js/example/toggle-worldviews.md): Use setWorldview to switch worldviews dynamically.
- [Update a choropleth layer by zoom level](https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth.md): Display state or county population depending on zoom level.
- [Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures.md): Hold the Shift key and drag the map to query features using queryRenderedFeatures.
- [Variable label placement](https://docs.mapbox.com/mapbox-gl-js/example/variable-label-placement.md): Use text-variable-anchor to allow high priority labels to shift position to stay on the map.
- [Add a vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/vector-source.md): Add a vector source to a map.
- [Add a video](https://docs.mapbox.com/mapbox-gl-js/example/video-on-a-map.md): Display a video on top of a satellite raster baselayer.
- [Visualize population density](https://docs.mapbox.com/mapbox-gl-js/example/visualize-population-density.md): Use a variable binding expression to calculate and display population density.
- [Style layers based on geographic inclusion](https://docs.mapbox.com/mapbox-gl-js/example/within-expressions.md): Use a 'within' expression to paint certain features of layers.
- [Add a WMS source](https://docs.mapbox.com/mapbox-gl-js/example/wms.md): Add an external Web Map Service raster layer to the map using addSource's tiles option.
- [Fit to the bounds of a LineString](https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring.md): Get the bounds of a LineString.

## API Reference

- [Events and event types](https://docs.mapbox.com/mapbox-gl-js/api/events.md): Events emitted by Map (and some other classes) in response to user interactions or changes in state.
- [Geography and geometry](https://docs.mapbox.com/mapbox-gl-js/api/geography.md): Classes and types for working with geographic coordinates, bounding boxes, and screen positions.
- [User interaction handlers](https://docs.mapbox.com/mapbox-gl-js/api/handlers.md): Use handlers to add different kinds of interactivity to the map such as mouse interactivity, touch interactions, and other gestures.
- [API Reference](https://docs.mapbox.com/mapbox-gl-js/api.md): The Mapbox GL JS API documentation to render interactive maps from vector tiles and Mapbox styles.
- [Map](https://docs.mapbox.com/mapbox-gl-js/api/map.md): The Map object represents the map on your page. It exposes methods and properties that enable you to programmatically change the map, and fires events as users interact with it.
- [Markers and controls](https://docs.mapbox.com/mapbox-gl-js/api/markers.md): User interface elements that can be aded to the map at runtime, such as custom controls or markers and popups to represent point data.
- [Properties and options](https://docs.mapbox.com/mapbox-gl-js/api/properties.md): Includes global mapboxgl properties, including the access token to use, utility functions, and checks for browser compatibility.
- [Sources](https://docs.mapbox.com/mapbox-gl-js/api/sources.md): Sources specify the geographic data to be rendered on the map. Source types include GeoJSON data, vector tilesets, raster tilesets, and more.

## Other

- [Plugins and frameworks](https://docs.mapbox.com/mapbox-gl-js/plugins.md): Extend your Mapbox GL JS map with plugins and frameworks.