Goong Documents
Examples

Examples

Alt text Display a map

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

Alt text Add a 3D model

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

Alt text Add a autocomplete widget to Goong JS

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

Alt text Add a canvas source

Add a canvas source to the map.

Alt text Add a custom style layer

Use a custom style layer to render custom WebGL content.

Alt text Add a default marker

Add a default marker to the map.

Alt text Add a generated icon to the map

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

Alt text Add a GeoJSON line

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

Alt text Add a GeoJSON polygon

Style a polygon with the fill layer type.

Alt text Add a new layer below labels

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

Alt text Add a pattern to a polygon

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

Alt text Add a raster tile source

Add a third-party raster source to the map.

Alt text Add a stretchable image to the map

Use a stretchable image as a background for text.

Alt text Add a third party vector tile source

Render vector data provided by Mapillary.

Alt text Add a vector tile source

Add a vector source to a map.

Alt text Add a video

Display a video on top of a satellite raster baselayer.

Alt text Add a WMS source

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

Alt text Add an animated icon to the map

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

Alt text Add an icon to the map

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

Alt text Add custom icons with Markers

Add custom marker icons to your map.

Alt text Add live realtime data

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

Alt text Add multiple geometries from one GeoJSON source

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

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

Alt text Animate a line

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

Alt text Animate a marker

Animate the position of a marker by updating its location on each frame.

Alt text Animate a point

Animate the position of a point by updating a GeoJSON source on each frame.

Alt text Animate a point along a route

Use Turf to smoothly animate a point along the distance of a line.

Alt text Animate a series of images

Use a series of image sources to create an animation.

Alt text Animate map camera around a point

Animate the map camera around a point.

Alt text Attach a popup to a marker instance

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

Alt text Center the map on a clicked symbol

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

Alt text Change a layer's color with buttons

Use setPaintProperty to change a layer's fill color.

Alt text Change a map's language

Use setLayoutProperty to switch languages dynamically.

Alt text Change a map's style

Change style of the map.

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

Alt text Change the case of labels

Use the upcase and downcase expressions to change the case of labels.

Alt text Change the default position for attribution

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

Alt text Check if Goong GL JS is supported

Check for Goong GL browser support.

Alt text Create a draggable Marker

Drag the marker to a new location on a map and populate its coordinates in a display.

Alt text Create a draggable point

Drag the point to a new location on a map and populate its coordinates in a display.

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

Alt text Create a heatmap layer

Visualize earthquake frequency by location using a heatmap layer.

Alt text Create a hover effect

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

Alt text Create a time slider

Visualize earthquakes with a range slider.

Alt text Create and style clusters

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

Alt text Customize camera animations

Customize camera animations using AnimationOptions.

Alt text Disable map rotation

Prevent users from rotating a map.

Alt text Disable scroll zoom

Prevent scroll from zooming a map.

Alt text Display a non-interactive map

Disable interactivity to create a static map.

Alt text Display a popup

Add a popup to the map.

Alt text Display a popup on click

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

Alt text Display a popup on hover

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

Alt text Display a satellite map

Display a satellite raster baselayer.

Alt text Display and style rich text labels

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

Alt text Display buildings in 3D

Use extrusions to display buildings' height in 3D.

Alt text Display HTML clusters with custom properties

Extend clustering with HTML markers and custom property expressions.

Alt text Display line that crosses 180th meridian

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

Alt text Display map navigation controls

Add zoom and rotation controls to the map.

Alt text Draw GeoJSON points

Draw points from a GeoJSON collection to a map.

Alt text Draw route on map using Goong Directions API

Draw a route line on map using Goong Directions API.

Alt text Extrude polygons for 3D indoor mapping

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

Alt text Filter symbols by text input

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

Alt text Filter symbols by toggling a list

Filter a set of symbols based on a property value in the data.

Alt text Fit a map to a bounding box

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

Alt text Fit to the bounds of a LineString

Get the bounds of a LineString.

Alt text Fly to a location

Use flyTo to smoothly interpolate between locations.

Alt text Fly to a location based on scroll position

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

Alt text Generate and add a missing icon to the map

Dynamically generate a missing icon at runtime and add it to the map.

Alt text Get coordinates of the mouse pointer

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

Alt text Get features under the mouse pointer

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

Alt text Jump to a series of locations

Use the jumpTo function to showcase multiple locations.

Alt text Locate the user

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

Alt text Measure distances

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

Alt text Navigate the map with game-like controls

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

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

Alt text Render world copies

Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.

Alt text Restrict map panning to an area

Prevent a map from being panned to a different place by setting maxBounds.

Alt text Set pitch and bearing

Initialize a map with pitch and bearing camera options.

Alt text Show drawn polygon area

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

Alt text Show polygon information on click

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

Alt text Slowly fly to a location

Use flyTo with flyOptions to slowly zoom to a location.

Alt text Style lines with a data-driven property

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

Alt text Toggle interactions

Enable or disable UI handlers on a map.

Alt text Update a feature in realtime

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

Alt text Use a fallback image

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

Alt text Use the autocomplete widget without a map

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

Alt text Variable label placement

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

Alt text View a fullscreen map

Toggle between current view and fullscreen mode.

Alt text Visualize population density

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

Filters
Search
Topic