Examples

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

Go beyond hillshade and show elevation in actual 3D.

Use a custom style layer with babylon.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 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.

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 contour lines to your map from a raster-dem source.

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.

Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.

Use the setStyle to change the style of the map.

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 TrackAsia 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 TrackAsia GL JS' built-in functions to visualize points as clusters.

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

Customize camera animations using AnimationOptions.

Example routing multiple custom points.

Example routing multiple points.

Example routing from point A to point B.

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 both English and in the local language.

Use extrusions to display buildings' height in 3D.

Display contextmenu to map.

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.

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.

Generate iframe TrackAsia map that can embedded on the website.

Geocode with Nominatim and the maplibre-gl-geocoder plugin.

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.

List TrackAsia map styles.

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 the localIdeographFontFamily setting to speed up map load times by using locally available fonts instead of font data fetched from the server.

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

Vehicle Routing Problem solver.

Toggle between current view and fullscreen mode.

View local GeoJSON without server upload.

View local GeoJSON with experimental File System Access API.

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