Examples

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

Use a custom style layer with three.js to add a 3D model to the map.

Use goong-geocoder-js to display a search box.

Add a canvas source to the map.

Use a custom style layer to render custom WebGL content.

Add a default marker to the map.

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

Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.

Style a polygon with the fill layer type.

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 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.

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

Add custom marker icons to your map.

Use realtime GeoJSON 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.

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.

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

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

Use setPaintProperty to change a layer's fill color.

Use setLayoutProperty to switch languages dynamically.

Change style of the map.

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.

Check for Goong 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.

Visualize earthquakes with a range slider.

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

Customize camera animations using AnimationOptions.

Prevent users from rotating a map.

Prevent scroll from zooming a map.

Disable interactivity to create a static map.

Add a popup to the map.

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

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

Display a satellite raster baselayer.

Use the format expression to display country labels in larger size.

Use extrusions to display buildings' height in 3D.

Extend clustering with HTML markers and custom property expressions.

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

Add zoom and rotation controls to the map.

Draw points from a GeoJSON collection to a map.

Draw a route line on map using Goong Directions API.

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

Filter symbols by icon name by typing in a text input.

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 a missing icon at runtime and add it to the map.

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

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

Use the jumpTo function to showcase multiple locations.

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.

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.

Initialize a map with pitch and bearing camera options.

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

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 line-color.

Enable or disable UI handlers on a map.

Change an existing feature on your map in real-time by updating its data.

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

Use goong-geocoder-js to display a search box without a map.

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

Toggle between current view and fullscreen mode.

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