MapTiler SDK Examples

Learn the basics

Tutorial

This tutorial shows how to create a map and display it on a web page using MapTiler.

Maps SDK TypeScript

Tutorial

Create a map with the TypeScript-based SDK. Take advantage of code completion, type safety, and backward compatibility.

Built-in map styles

Tutorial

Our built-in styles are designed to make it easier for you to create beautiful maps, without the need for extra coding or worrying about outdated versions.

Change map styles

Tutorial

This tutorial shows how to change the map styles, you can switch between the built-in maps and your own custom maps.

Display marker

Tutorial

This tutorial shows how to add a default marker to the map.

GeoJSON line layer

Tutorial

This tutorial shows how to add a GeoJSON line overlay to the map.

GeoJSON point layer

Tutorial

This tutorial shows how to add a GeoJSON point overlay to the map.

Show polygon data from GeoJSON on the map

GeoJSON polygon layer

Tutorial

This tutorial shows how to add a GeoJSON polygon overlay to the map.

Show multiGeometry data from GeoJSON on the map

GeoJSON multiGeometry layer

Tutorial

This tutorial shows how to add a GeoJSON MultiGeometry overlay to the map.

Raster layer

Tutorial

This tutorial shows how to add a raster image overlay to the map.

Custom map

Tutorial

This example demonstrates how to display a custom map on the web page using MapTiler.

3D terrain map

Tutorial

This tutorial demonstrates how to create a 3D terrain map and display it on a web page using MapTiler.

How to make a map of US election results

US election map

Tutorial

This tutorial demonstrates how to make a map of USA election results.

How to create a choropleth Map from GeoJSON

Choropleth GeoJSON

Tutorial

This tutorial shows how to add a styled GeoJSON overlay to the map, display a popup on click, and create a map legend.

Geocoding API

Tutorial

This tutorial shows how to search places using the MapTiler Geocoding API.

Reverse geocoding

Tutorial

This tutorial shows how to search places by coordinates (reverse geocoding).

Geocoding control

Tutorial

This tutorial shows how to search for places using the geocoding control.

Geolocate control how to get the user's location using the GPS

Geolocate control (GPS)

Tutorial

This tutorial shows how to disable the geolocate control to show the user's location using the GPS or the browser location.

Projection control how to toggle the map between mercator and globe projection

Projection control (globe)

Tutorial

This tutorial shows how to add the projection control that toggles the map between "mercator" and "globe" projection.

Hide map navigation controls

Tutorial

This tutorial shows how to hide the navigation control (zoom and rotation controls to the map).

How to use and filter data for MapTiler Countries

Countries filter

Tutorial

This tutorial shows how to use and filter data for MapTiler Countries and make a choropleth map.

How to create a countries map with your own data

Countries with data

Tutorial

This tutorial shows how to Join MapTiler Countries with your own custom data and make a choropleth map.

How to center map based on visitor's location

Center map by IP

Tutorial

This tutorial shows how to center map based on the visitor's location using the MapTiler Geolocation API.

How to center map based on visitor’s country bounds

Center map by visitor’s country IP

Tutorial

This tutorial shows how to center map based on the visitor’s country bounds using the MapTiler Geolocation API.

How to display disputed borders based on visitor's location

Disputed borders by IP

Tutorial

This tutorial shows how to automatically change disputed borders according to your map visitor's location usign the MapTiler Geolocation API.

How to change the map labels language based on visitor's location

Map language by IP

Tutorial

This tutorial shows how to automatically change the map labels language based on visitor's location usign the MapTiler Geolocation API.

How to change the default map labels language

Set map language

Tutorial

This tutorial shows how to change the default map labels language.

List of places

Tutorial

This tutorial shows how to sync the map with a list of places.

How to display the cookies consent bar according to the visitor's location

Cookie consent by IP

Tutorial

This tutorial shows how to display the cookies consent bar according to the visitor's location usign the MapTiler Geolocation API.

Enable/disable map terrain\

Tutorial

This tutorial demonstrates how to enable/disable the 3D terrain map programmatically using SDK functions.

Scale control

Tutorial

This tutorial shows how to add and display a scale control on the map.

Style switcher

Tutorial

This tutorial shows how to add and display a style switcher control on the map.

How to display a minimap or overview map control to aid the map navigation

Minimap control

Tutorial

This tutorial shows how to display a minimap or overview map control in MapTiler SDK JS to aid the map navigation.

Legend control

Tutorial

This tutorial shows how to display a map legend control to toggle layers visualization.

How to display an interactive choropleth map legend control

Choropleth legend

Tutorial

This tutorial shows how to display an interactive choropleth map legend control.

Switch from Mapbox

Tutorial

This tutorial shows how to migrate/switch from Mapbox to MapTiler.

Switch from MapLibre

Tutorial

This tutorial shows how to migrate/switch from MapLibre to MapTiler.

Missing map from feedback button

Tutorial

This example shows how to capture the current map view as a blob (PNG image).

Screenshot with Usersnap

Tutorial

This example shows how to capture the current map view with Usersnap.

Screenshot with Ybug

Tutorial

This example shows how to capture the current map view with Ybug.

3D globe with custom marker overlays

Example

Create custom non-colliding marker overlays on your 3D globe map using the Marker Layout module.

3D globe with custom weather markers

Example

Create a weather globe map using the Marker Layout to show your custom weather markers icons, animated SVGs or Lotties.

3D model pitch and roll

Example

Use the MapTiler 3D JS module to rotate a 3D model, setting the pitch and roll properties.

3D model pitch

Example

Use the MapTiler 3D JS module to rotate a 3D model, setting the pitch property.

3D model roll

Example

Use the MapTiler 3D JS module to rotate a 3D model, setting the roll property.

Add Contour Lines

Example

Add contour lines to your map from a raster-dem source.

Add a 3D model on a map

Example

Use the MapTiler 3D JS module to add a 3D model to the map.

Add a 3D model on terrain with three.js

Example

Add a 3D model into a map with 3D terrain, use a custom style layer with three.js.

Add a 3D model to globe using MapTiler 3D JS

Example

Add a 3D model to globe using MapTiler 3D JS module.

Add a 3D model with babylon.js

Example

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

Add a 3D model with three.js

Example

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

Add a WMS source

Example

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

Add a plane 3D model

Example

Use the MapTiler 3D JS module to add a airplane model to the map.

Globe with color background

Example

Add a custom color background to the globe.

Custom control declarative

Example

How to add a custom control in a declarative way. A simple way to add interactive UI elements to the map by using HTML attributes alone

Custom control programmatically

Example

How to add a custom control programmatically. Ideal for applications that require dynamic logic, event-driven behaviour, or a deeper integration with a framework like React

Globe with custom halo

Example

Create a custom halo, define a radial gradient with scale and stops to add a custom atmospheric glow around the globe.

Add a custom milkyway, stars and halo background to the globe

Globe with milkyway and halo

Example

Customize the map background to create a red Milky Way effect and create a halo around the Earth.

Add a custom style layer

Example

Use a custom style layer to render custom WebGL content.

Add a generated icon to the map

Example

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

Add a map to a webpage

Example

Create a map in an HTML element with the MapTiler SDK JS.

Add a milkyway and stars background to the globe

Globe with milkyway and stars

Example

Add a milkyway and stars background to the globe.

Add a new layer below labels

Example

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

Add a pattern to a polygon

Example

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

Add a raster tile source

Example

Add a third-party raster source to the map.

Add a start space background to the globe

Globe with initial space background

Example

Add a start space background enviroment to the globe, simulating deep space.

Add a stretchable image to the map

Example

Use a stretchable image as a background for text.

Add a third party vector tile source

Example

Render vector data provided by Mapillary.

Add a video

Example

Display a video on top of a satellite raster baselayer.

Add an animated icon to the map

Example

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

Add an atmospheric glow (halo) around the globe

Globe with halo

Example

Adds an atmospheric glow around the globe, simulating the visual effect of Earth's atmosphere when viewed from space.

Add an icon to the map

Example

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

Add custom icons with markers

Example

Add custom marker icons to your map.

Add custom zoom control

Example

This example demonstrates how to add a custom control that shows the current zoom.

Add dynamic hillshading

Example

This example demonstrates how to adjust hillshade lighting dynamically. You could use a change in hillshade lightning to simulate the movement of the sun in the sky.

3D model events

Example

Use the MapTiler 3D JS module to linsten for mouse events on 3D models.

Add hillshading

Example

This example adds raster hillshading to a map by adding the MapTiler Terrain-DEM raster tileset as a raster-dem source with a hillshade layer.

Add interaction to landmarks

Example

Create a map with custom landmarks and add interactions like popups to display additional information.

Add live realtime data

Example

Use real-time GeoJSON data streams to move a symbol on your map.

Add markers to a non-georeferenced image

Markers in a non-georeferenced image

Example

Add markers to a zoomable non-georeferenced, geographically "inaccurate" maps.

Add multiple 3D models

Example

Use the MapTiler 3D JS module to add multiple 3D models to the map.

Animate a 3D plane flight

Example

Use the MapTiler 3D JS module to simulate and animate a plane flight between two cities.

Animate a 3D plane flight in a globe

Example

This example shows how to simulate and animate a airplane flight in a globe using MapTiler 3D JS module.

Animate a line

Example

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

Animate a marker

Example

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

Animate a point

Example

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

Animate a point along a route

Example

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

Animate a series of images

Example

Use a series of image sources to create an animation.

Animate map camera around a point

Example

Animate the map camera around a point.

Attach a popup to a marker instance

Example

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

Center the map on a clicked symbol

Example

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

Change a layer's color with buttons

Example

Use setPaintProperty to change a layer's fill color.

Change a map's language

Example

Use setLanguage function to switch languages dynamically.

Change between light and dark mode based on the time of day

Change to dark mode at sunset

Example

This example shows how to change the map mode between light and dark based on the time of day.

Change building color based on zoom level

Change color based on zoom level

Example

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

Change the case of labels

Example

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

Change the default position for attribution

Change attribution default position

Example

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

Cooperative gestures

Example

Enable cooperative gestures with a specific language. .

Create a 3D choropleth map of Europe with countries extruded

Example

This 3D choropleth map of Europe with countries extruded uses an external dataset to provide data-driven values for the fill-extrusion-height paint property of various country polygons in a fill-extrusion layer.

Create a draggable marker

Example

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

Create a draggable point

Example

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

Create a globe map with 3D terrain elevation

Globe with elevation terrain

Example

Create a globe map with 3D terrain elevation.

Create a globe map with ocean bathymetry terrain elevation

Globe with ocean bathymetry

Example

Create a globe map with ocean bathymetry terrain elevation.

Create a gradient line using an expression

Example

Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.

Create a heatmap layer

Example

This example uses SDK JS to visualize the frequency of US schools by location using a heatmap layer.

Create a hover effect

Example

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

Create a non-interactive map

Example

Disable interactivity to create a static map.

Fly to a location based on the scroll position

Example

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

Create a time slider

Example

Visualize and filter earthquakes with a range slider.

Create and style clusters

Example

Use SDK JS built-in functions to visualize points as clusters.

Create custom marker overlays using the Marker Layout

Non filtered Marker Layout

Example

Create custom non-colliding marker overlays on your map using the Marker Layout on top of MapTiler SDK. .

Create deck.gl layer using REST API

Example

This example shows how to create a deck.gl layer as an overlay from a REST API using MapTiler SDK JS.

Creates an animated map to fly between different locations

Example

This example uses SDK JS to fly between different locations and visualize the frequency of US schools by location using a heatmap layer with low zoom levels and a styled circles layer with a data-driven property for zoom levels in more detail.

Custom night satellite image in a goble with space background

Night globe in space

Example

Use a custom map of the Earth's satellite image at night and display it on a globe with a space background.

Customize API request from geocoding control

Customize API request (geocoding control)

Example

Use the adjustUrl option in the geocoding control constructor to modify the geocoding URL before the fetch. This capability enables complete control over the search control's functionality.

Customize Elevation profile control

Example

The elevation profile control for MapTiler SDK, can be customized in many ways and is compatible with both metric and imperial units. It has many built-in defaults and does not need much to look nice!

Customize camera animations

Example

Customize camera animations using AnimationOptions.

Disable map rotation

Example

Prevent users from rotating a map.

Disable scroll zoom

Example

Prevent scroll from zooming a map.

HTML clusters with custom properties

Example

Extend clustering with HTML markers and custom property expressions.

Display a 3D building model generated with photogrammetry software

Display a 3D photogrammetry building model

Example

Use the MapTiler 3D JS module to display a 3D building model generated with photogrammetry software processing thousands images on a map.

Display a LIDAR data 3D city model

Example

Use the MapTiler 3D JS module to display a LIDAR data 3D city model on a map.

Display a building model

Example

Use the MapTiler 3D JS module to display the wireframe of a building 3D model based on point cloud data on a map.

Display a point cloud 3D building model

Example

Use the MapTiler 3D JS module to display a point cloud 3D building model on a map.

Display a popup

Example

Add a popup to the map.

Display a popup on click

Example

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

Display a popup on hover

Example

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

Display a satellite map

Example

Display a satellite raster baselayer.

Display a tiled, non-georeferenced image

Display a non-georeferenced image

Example

Display a zoomable non-georeferenced, geographically "inaccurate" maps in your application using the ImageViewer.

Animate a 3D model

Example

With animation, your 3D models take on a whole new dimension. You can bring them to life and display them on a map

Display and style rich text labels

Example

Use the format expression to display country labels in both English and in the local language.

Display buildings in 3D

Example

Use extrusions to display buildings' height in 3D.

Display line that crosses 180th meridian

Example

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

Measure distances

Example

To calculate distances on the map, simply click on different points to create lines that will measure the distances using turf.length.

Draw GeoJSON points

Example

Draw points from a GeoJSON collection to a map.

Add elevation profile control

Example

The elevation profile control for MapTiler SDK is a super easy way to show the elevation profile of any GeoJSON trace, with elevation data fueled by MapTiler.

Extrude polygons for 3D indoor mapping

Example

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

Filter symbols by text input

Example

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

Filter symbols by toggling a list

Example

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

Filter within a Layer

Example

Filter a layer based on user input using setFilter().

Fit a map to a bounding box

Example

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

Fit to the bounds of a lineString

Example

Get the bounds of a lineString.

Fly to a location

Example

Use flyTo to smoothly interpolate between locations.

Generate and add a missing icon to the map

Generate a missing icon to the map

Example

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

Geocoding limit results by a drawn area

Example

Limit geocode control search results to the bounding box of the drawn area. Draw a polygon on the map to filter the search results to the polygon bounding box.

Geocoding limit results by area

Example

Limit the search results of the geocoding control to the specific area (bounding box).

Geocoding search for POIs near the user's location

Example

Geocoding control search results filter by type and given higher priority for the results near the user's location.

Geocoding search results closer to specific point

Geocoding search results by proximity to a specific point

Example

Geocoding control search results closer to the specific geographical point, results near the provided point are ranked higher.

Geocoding search results to specified country(ies)

Example

Geocoding control limit search results to specified country(ies).

Get POIs information on click

Example

Get POI information from MapTiler, OpenStreetMap (OSM), and Wikidata data by clicking on the map.

Get coordinates of the mouse pointer

Example

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

Get features under the mouse pointer

Example

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

How to add a custom icon (PNG) to a point layer

Add custom icon (PNG) to a point layer

Example

This example shows how to make a map with pins to display a point layer from a MapTiler Tileset using a custom PNG icon.

How to add a custom icon (SVG) to a point layer

Add custom icon (SVG) to a point layer

Example

This example shows how to make a map with pins to display a point layer from a MapTiler Tileset using a custom SVG icon.

How to create a mobile app (PWA) with MapTiler SDK JS

Mobile PWA MapTiler SDK

Example

Learn how to create a mobile-friendly Progressive Web App using the MapTiler SDK for JavaScript.

How to create non-colliding marker overlays

Filtered Marker Layout

Example

Create non-colliding marker overlays to display the information from the city and town label layers.

Display GPX track elevation profile

Example

The elevation profile control for MapTiler SDK is a super easy way to show the elevation profile of any GPX track, with elevation data fueled by MapTiler.

How to keep the map view with the URL hash

Map view URL hash

Example

Share and retrieve a particular map view by simply copying and pasting the URL. Maintain the map view in the URL hash.

How to specify the geocoding control language(s) response text and prioritization

Geocoding language

Example

Specify the geocoding control language(s) that are used for the response text and weighting of the query results.

How to switch map projection programmatically

Switch between “mercator” and “globe”

Example

This example shows how to switch between “mercator” and “globe” map projection programmatically.

Globe projection

Example

Specify the map projection to view the map in a 3D globe.

Icon image URL inside a rich text format label

Example

Use the Formatted type to display a rich text labels with texts and icons from images URL.

Play GLTF animations

Example

Use the MapTiler 3D JS module to play animations in a GLTF model and move the models to simulate a flight over the map.

Interact with cadastral map information effectively

Cadastre map

Example

Learn how to interact with cadastral information effectively.

Interactive choropleth map

Example

Use events and feature states to create a interactive choropleth map.

Jump to a series of locations

Example

Use the jumpTo function to showcase multiple locations.

Navigate the map with game-like controls

Example

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

Ocean bathymetry 3D

Example

Show a detailed 3D map of the ocean seafloor and bathymetry.

Offset the vanishing point using padding

Example

Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.

Point filtering by property

Example

Filter thousands of features in real time to quickly and easily find those with a property that meets your search criteria.

Ready event

Example

Use the ready event to waits until the style and all the basic controls are nicely positioner to add other custom controls or custom layers to a map.

Render world copies

Example

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

Restrict map panning to an area

Example

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

Reverse geocoding uses the user’s location

Example

How to search for places by coordinates (reverse geocoding) using the user's location. Reverse geocoding transforms coordinates into place names.

Search features by coordinates using the geocoding control

Geocoding control (reverse geocoding)

Example

Support coordinate-based searches (reverse geocoding) using the geocoding control.

Set dark mode based on system settings

Example

This example shows how to change the map mode (light/dark) based on system settings.

Set pitch and bearing

Example

Initialize a map with pitch and bearing camera options.

Show drawn polygon area

Example

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

Elevation at point

Example

How to get elevation in meters at any location by clicking to map.

Show polygon information on click

Example

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

Show trace position Elevation profile control

Example

With the onMove event of the elevation profile control for MapTiler SDK, we can show a marker moving on top of the trace on the map. This way, we can synchronize the position of the elevation profile cursor with the position of the map.

Zoomed section Elevation profile control

Example

With the onChangeView event of the elevation profile control for MapTiler SDK, we have access to a GeoJSON LineString corresponding to the zoomed section. This way, we can display the section on top of the full-length route.

Slowly fly to a location

Example

Use flyTo with flyOptions to slowly zoom to a location.

Style lines with a data-driven property

Example

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

Switch between contour lines heights in meters and feet

Example

Change the units for the altitude of the contour lines, converting from meters to feet. The Global Contours schema, created by MapTiler, contains contour lines in both common unit systems meters and feet.

Switch to dark mode inside tunnels

Example

This example shows how to change the map mode (light/dark) based on the position in a route.

Toggle deck.gl layer

Example

This example shows how to toggle a deck.gl layer using MapTiler SDK JS.

Toggle interactions

Example

Enable or disable UI handlers on a map.

Update a feature in realtime

Example

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

Use a fallback image

Example

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

Use locally generated ideographs

Example

Use the localIdeographFontFamily setting to speed up map load times by using locally available fonts instead of font data fetched from the server.

Variable label placement

Example

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

View a fullscreen map

Example

Toggle between the current view and fullscreen mode.

View local GeoJSON

Example

View local GeoJSON without server upload.

View local GeoJSON (experimental)

Example

View local GeoJSON with experimental File System Access API.

Visualize and animate the evolution of population data

Population data animation

Example

Visualize and animate the evolution of the Global population density data with the MapTiler SDK Weather module.

Visualize population density

Example

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

Weather Cloud coverage displayed from radar data

Example

Visualize weather cloud coverage displayed from radar data from MapTiler Weather Radar dataset and get the radar at the point under the cursor.

Weather+ pressure isolines layer

Example

Visualize weather pressure isolines layer from MapTiler Weather Plus Pressure dataset.

Weather Plus pressure isolines layer animated

Weather+ pressure isolines layer animated

Example

Visualize weather pressure isolines layer from MapTiler Weather Plus Pressure dataset and get the pressure at the point under the cursor.

Weather Plus pressure isolines layer labels

Weather+ pressure isolines layer labels

Example

Visualize weather pressure isolines layer from MapTiler Weather Plus Pressure dataset and display the Hi/Lo pressure extreme values.

Weather+ wind arrow layer

Example

Visualize weather wind arrow layer from MapTiler Weather Plus Wind dataset .

Weather+ wind arrow layer animated

Example

Visualize weather wind arrow layer from MapTiler Weather Plus Wind dataset and get the wind speed at the point under the cursor.

Weather custom popup

Example

This example demonstrates using custom popups on top of a map because MapLibre's popups were originally quite limited in layout and style.

Weather layer switcher

Example

Switch the display of the different weather layers in MapTiler Weather data set and get the data information at the point under the cursor.

Weather layer with a custom color blind ramp

Weather layer custom color blind ramp

Example

Visualize weather temperature layer from MapTiler Weather Temperature dataset with a custom color blind ramp and get the temperature at the point under the cursor.

Weather map with custom icons, animated SVGs or Lotties via Marker Layout

Weather icons Marker Layout

Example

Create a weather map using the Marker Layout to show your custom weather markers icons, animated SVGs or Lotties.

Weather precipitation layer

Example

Visualize weather precipitation layer from MapTiler Weather Precipitation dataset and get the precipitation at the point under the cursor.

Weather pressure layer

Example

Visualize weather pressure layer from MapTiler Weather Pressure dataset and get the pressure at the point under the cursor.

Weather radar layer

Example

Visualize weather radar layer from MapTiler Weather Radar dataset and get the radar at the point under the cursor.

Weather temperature layer

Example

Visualize weather temperature layer from MapTiler Weather Temperature dataset and get the temperature at the point under the cursor.

Weather wind and temperature layer

Example

Visualize weather wind and temperature layer from MapTiler Weather Wind dataset and get the wind speed and temperature at the point under the cursor.

Weather wind layer

Example

Visualize weather wind layer from MapTiler Weather Wind dataset and get the wind speed at the point under the cursor.

Weather wind direction

Example

Visualize weather wind layer from MapTiler Weather Wind dataset and get the wind speed and direction at the point under the cursor.

Custom color ramp (color ramp)

Example

This example shows how to create a custom color ramp and use it to visualize a point layer.

Heatmap layer (heatmap helper)

Example

This example shows how to add a heatmap layer to the map using the heatmap layer helper.

How to download a map screenshot as a PNG file (screenshot helper)

Download a map screenshot (screenshot helper)

Example

This example shows how to download a map screenshot as a PNG file using the screenshot helper.

How to take a screenshot of the current map view (screenshot helper)

Take screenshot (screenshot helper)

Example

This example shows how to capture the current map view as a blob (PNG image).

Line layer (polyline helper)

Example

This example shows how to add a line layer to the map using the polyline layer helper.

Point layer (point helper)

Example

This example shows how to add a point layer to the map using the point layer helper.

Polygon layer (polygon helper)

Example

This example shows how to add a polygon layer to the map using the polygon layer helper.

Add a GPX Line layer (polyline helper)

Example

This example shows how to add and a GPX line layer to the map using the polyline layer helper.

Add a KML Line layer (polyline helper)

Example

This example shows how to add and a KML line layer to the map using the polyline layer helper.

Color ramp resampling (color ramp)

Example

This example shows how to resample a color ramp and use it to visualize a point layer.

Heatmap layer custom color ramp (heatmap helper)

Example

This example shows how to add a heatmap layer with a custom color ramp to the map using the heatmap layer helper.

Heatmap layer custom radius (heatmap helper)

Example

This example shows how to add a heatmap layer with a custom zoom-ramping radius to the map using the heatmap layer helper

Heatmap layer custom radius by property (heatmap helper)

Example

This example shows how to add a heatmap layer with a custom propertry-ramping radius to the map using the heatmap layer helper.

Heatmap layer intensity (heatmap helper)

Example

This example shows how to add a heatmap layer with a custom intensity to the map using the heatmap layer helper.

Heatmap layer min and max zoom (heatmap helper)

Example

This example shows how set the min and max zoom of a heatmap layer using the heatmap layer helper.

Heatmap layer opacity (heatmap helper)

Example

This example shows how to add a heatmap layer with a custom opacity to the map using the heatmap layer helper.

Heatmap layer weight (heatmap helper)

Example

This example shows how to add a heatmap layer with a property as weight to the map using the heatmap layer helper.

Moving marker on click

Example

This example shows how to move a marker by clicking on the map.

Point layer cluster (point helper)

Example

This example shows how to add a point layer cluster to the map using the point layer helper with the default values.

Point layer colored and sized according to a property (point helper)

Example

This example shows how to add a point layer colored and sized according to the property "mag" (= earthquake magnitude) to the map using the point layer helper.

Point layer disabled zoom compensation (point helper)

Example

This example shows how to add a point layer to the map using the point layer helper with zoom compensation disabled.

Point layer labels (point helper)

Example

This example shows how to add a point layer with labels to the map using the point layer helper.

Point layer modify min and max size. Apply transparency (point helper)

Point layer min and max size (point helper)

Example

This example shows how to modify the default point size values of a point layer with a bit of transparency using the point layer helper.

Polygon fill pattern (polygon helper)

Example

This example shows how to add a polygon layer with a fill pattern to the map using the polygon layer helper.

Style a GeoJSON Line layer (polyline helper)

Example

This example shows how to add and style a GeoJSON line layer to the map using the polyline layer helper.

Heatmap layer no zoom compensation (heatmap helper)

Example

This example shows how to add a heatmap layer without zoom compensation radius to the map using the heatmap layer helper.

Heatmap layer radius and weight by property (heatmap helper)

Example

This example shows how to add a heatmap layer to the map, simultaneously controlling the radius and weight based on a property using the heatmap layer helper.

Line dash pattern symbol (polyline helper)

Example

This example shows how to add a line layer with a dash pattern symbol to the map using the polyline layer helper.

Point layer outline (point helper)

Example

This example shows how to add a point layer with an outline to the map using the point layer helper.

Point layer scaled radius by property (point helper)

Example

This example shows how to add a point layer to the map with size and color scaled by property using the point layer helper.

Polygon color ramp symbol (polygon helper)

Example

This example shows how to add a polygon layer with a color ramp symbol that changes the fill color based on the map's zoom level using the polygon layer helper.

Scale point radius based on the zoom level (point helper)

Point layer scaled radius (point helper)

Example

This example shows how to scale the radius of a point layer based on the map zoom level using the point layer helper.

Line color ramp symbol (polyline helper)

Example

This example shows how to add a line layer with a color ramp symbol that changes the line color based on the map zoom level using the polyline layer helper.

Line outline glow blur symbol (polyline helper)

Example

This example shows how to add a line layer with an outline glow blur symbol to the map using the polyline layer helper.

Getting started with AR maps: Display an AR control on your maps

Start with AR maps

Example

Getting started with AR maps: The Augmented reality (AR) control adds a button on your map to create a 3D model of the viewport, including 3D terrain and any layer you have put on top. Compatible with WebXR or Apple Quick Look.

Include a QR code to access your augmented reality (AR) maps on a mobile device

QR code to access AR maps

Example

Include a QR code to access your augmented reality (AR) maps on a mobile device. Compatible with WebXR or Apple Quick Look.

Add GeoJSON to AR maps

Example

Add a GeoJSON line to Augmented reality (AR) map, to create a biking or hiking route 3D model. Compatible with WebXR or Apple Quick Look.

Custom AR experience

Example

Customize the AR experience: The Augmented reality (AR) control accepts an option object to customize the look and feel. Compatible with WebXR or Apple Quick Look.

How to trigger actions in the AR control

Trigger AR control actions

Example

How to trigger actions in the AR control: Display the Augmented reality (AR) control using the keyboard to create a 3D viewport model, including 3D terrain and any layer you have put on top. Compatible with WebXR or Apple Quick Look.