Examples
![Alt text](/img/geojson-line.png)
Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.
![Alt text](/img/wms.png)
Add an external Web Map Service raster layer to the map using addSource's tiles option.
![Alt text](/img/add-image-animated.png)
Add an animated icon to the map that was generated at runtime with the Canvas API.
![Alt text](/img/multiple-geometries.png)
Add a polygon and circle layer from the same GeoJSON source.
![Alt text](/img/mapbox-gl-rtl-text.png)
Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.
![Alt text](/img/change-building-color-based-on-zoom-level.png)
Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.
![Alt text](/img/attribution-position.png)
Place attribution in the top-left position when initializing a map.
![Alt text](/img/drag-a-marker.png)
Drag the marker to a new location on a map and populate its coordinates in a display.
![Alt text](/img/drag-a-point.png)
Drag the point to a new location on a map and populate its coordinates in a display.
![Alt text](/img/line-gradient.png)
Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.
![Alt text](/img/popup-on-hover.png)
When a user hovers over a custom marker, show a popup containing more information.
![Alt text](/img/display-and-style-rich-text-labels.png)
Use the format expression to display country labels in larger size.
![Alt text](/img/cluster-html.png)
Extend clustering with HTML markers and custom property expressions.
![Alt text](/img/line-across-180th-meridian.png)
Draw a line across the 180th meridian using a GeoJSON source.
![Alt text](/img/3d-extrusion-floorplan.png)
Create a 3D indoor map with the fill-extrude-height paint property.
![Alt text](/img/fitbounds.png)
Fit the map to a specific area, regardless of the pixel size of the map.
![Alt text](/img/scroll-fly-to.png)
Scroll down through the story and the map will fly to the chapter's location.
![Alt text](/img/add-image-missing-generated.png)
Dynamically generate a missing icon at runtime and add it to the map.
![Alt text](/img/mouse-position.png)
Show mouse position on hover with pixel and latitude and longitude coordinates.
![Alt text](/img/queryrenderedfeatures.png)
Use queryRenderedFeatures to show properties of hovered-over map elements.
![Alt text](/img/locate-user.png)
Geolocate the user and then track their current location on the map using the GeolocateControl.
![Alt text](/img/game-controls.png)
Use the keyboard's arrow keys to move around the map with game-like controls.
![Alt text](/img/offset-vanishing-point-with-padding.png)
Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.
![Alt text](/img/render-world-copies.png)
Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.
![Alt text](/img/restrict-bounds.png)
Prevent a map from being panned to a different place by setting maxBounds.
![Alt text](/img/mapbox-gl-draw.png)
Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.
![Alt text](/img/polygon-popup-on-click.png)
When a user clicks a polygon, show a popup containing more information.
![Alt text](/img/data-driven-lines.png)
Create a visualization with a data expression for line-color.
![Alt text](/img/live-update-feature.png)
Change an existing feature on your map in real-time by updating its data.
![Alt text](/img/fallback-image.png)
Use a coalesce expression to display another image when a requested image is not available.
![Alt text](/img/goong-geocoder-without-map.png)
Use goong-geocoder-js to display a search box without a map.
![Alt text](/img/variable-label-placement.png)
Use text-variable-anchor to allow high priority labels to shift position to stay on the map.
![Alt text](/img/visualize-population-density.png)
Use a variable binding expression to calculate and display population density.