MapTiler SDK Examples

How to use the MapTiler SDK JS

Learn the basics

Tutorial

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

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

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

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 simple marker on the map

Display marker

Tutorial

This tutorial shows how to add a default marker to the map.
Show line data from GeoJSON on the map

GeoJSON line layer

Tutorial

This tutorial shows how to add a GeoJSON line overlay to the map.
Show point data from GeoJSON on 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.
Show raster image on the map

Raster layer

Tutorial

This tutorial shows how to add a raster image overlay to the map.
How to display your custom map on the web page.

Custom map

Tutorial

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

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.
Place search with Geocoding API

Geocoding API

Tutorial

This tutorial shows how to search places using the MapTiler Geocoding API.
How to search places by coordinates (reverse geocoding)

Reverse geocoding

Tutorial

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

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

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.
How to sync the map with a list of places

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

Enable/disable map terrain

Tutorial

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

Scale control

Tutorial

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

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.
How to display a map legend control to toggle layers visualization

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.
How to migrate/switch from Mapbox to MapTiler

Switch from Mapbox

Tutorial

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

Switch from MapLibre

Tutorial

This tutorial shows how to migrate/switch from MapLibre to MapTiler.
How to fix a missing map from feedback button

Missing map from feedback button

Tutorial

This example shows how to capture the current map view as a blob (PNG image).
How to take a map screenshot with Usersnap

Screenshot with Usersnap

Tutorial

This example shows how to capture the current map view with Usersnap.
How to take a map screenshot with Ybug

Screenshot with Ybug

Tutorial

This example shows how to capture the current map view with Ybug.
3D globe with custom marker overlays

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

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.
Add Contour Lines.

Add Contour Lines

Example

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

Add a 3D model

Example

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

Add a 3D model on terrain

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

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

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 WMS source

Add a WMS source

Example

Add an external Web Map Service raster layer to the map using addSource's tiles option.
Add a airplane 3D model

Add a plane 3D model

Example

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

Add a canvas source

Example

Add a canvas source to the map.
Add a custom style layer

Add a custom style layer

Example

Use a custom style layer to render custom WebGL content.
Add a generated icon to the map

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

Add a map to a webpage

Example

Create a map in an HTML element with the MapTiler SDK JS.
Add a new layer below labels

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

Add a pattern to a polygon

Example

Use fill-pattern to draw a polygon from a repeating image pattern.
Add a raster tile source

Add a raster tile source

Example

Add a third-party raster source to the map.
Add a stretchable image to the map

Add a stretchable image to the map

Example

Use a stretchable image as a background for text.
Add a third party vector tile source

Add a third party vector tile source

Example

Render vector data provided by Mapillary.
Add a vector tile source

Add a vector tile source

Example

Add a vector source to a map.
Add a video

Add a video

Example

Display a video on top of a satellite raster baselayer.
Add an animated icon to the map

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 icon to the map

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

Add custom icons with markers

Example

Add custom marker icons to your map.
Add hillshading

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

Add interaction to landmarks

Example

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

Add live realtime data

Example

Use real-time GeoJSON data streams to move a symbol on your map.
Add multiple 3D models to the map

Add multiple 3D models

Example

Use the MapTiler 3D JS module to add multiple 3D models to the map.
Animate a 3D plane flight

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 using MapTiler 3D JS

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

Animate a line

Example

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

Animate a marker

Example

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

Animate a point

Example

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

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

Animate a series of images

Example

Use a series of image sources to create an animation.
Animate map camera around a point

Animate map camera around a point

Example

Animate the map camera around a point.
Attach a popup to a marker instance

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

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

Change a layer's color with buttons

Example

Use setPaintProperty to change a layer's fill color.
Change a map's language

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

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

Cooperative gestures

Example

Enable cooperative gestures with a specific language. .
Create a 3D choropleth map of Europe with countries extruded

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

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

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

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

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

Create a hover effect

Example

Use events and feature states to create a per feature hover effect.
Create a story map, fly to a location based on the scroll position

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

Create a time slider

Example

Visualize and filter earthquakes with a range slider.
Create and style clusters

Create and style clusters

Example

Use SDK JS built-in functions to visualize points as clusters.
Create custom marker overlays using the Marker Layout

Marker Layout (no filter)

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

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

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

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

Customize camera animations

Example

Customize camera animations using AnimationOptions.
Disable map rotation

Disable map rotation

Example

Prevent users from rotating a map.
Disable scroll zoom

Disable scroll zoom

Example

Prevent scroll from zooming a map.
Display HTML clusters with custom properties

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

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 based on point cloud data 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 non-interactive map

Display a non-interactive map

Example

Disable interactivity to create a static map.
Display a point cloud 3D building model 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

Display a popup

Example

Add a popup to the map.
Display a popup on click

Display a popup on click

Example

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

Display a popup on hover

Example

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

Display a satellite map

Example

Display a satellite raster baselayer.
Display and style rich text labels

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

Display buildings in 3D

Example

Use extrusions to display buildings' height in 3D.
Display line that crosses 180th meridian

Display line that crosses 180th meridian

Example

Draw a line across the 180th meridian using a GeoJSON source.
Distance measurement on map

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

Draw GeoJSON points

Example

Draw points from a GeoJSON collection to a map.
Elevation profile control

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

Extrude polygons for 3D indoor mapping

Example

Create a 3D indoor map with the fill-extrude-height paint property.
Filter symbols by text input

Filter symbols by text input

Example

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

Filter symbols by toggling a list

Example

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

Filter within a Layer

Example

Filter a layer based on user input using setFilter().
Fit a map to a bounding box

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

Fit to the bounds of a lineString

Example

Get the bounds of a lineString.
Fly to a location

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

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

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)

Geocoding search results to specified country(ies)

Example

Geocoding control limit search results to specified country(ies).
Get POIs information on click

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

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

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

Marker Layout (filter)

Example

Create non-colliding marker overlays to display the information from the city and town label layers.
How to display GPX track elevation profile

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 get the elevation at a given position.

Elevation at point

Example

How to get the elevation in meters from any location.
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.
How to turn on the globe projection

Globe projection

Example

Specify the map projection to view the map in a 3D globe.
Icon image URL inside a rich text format label

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.
Interact with cadastral map information effectively

Cadastre map

Example

Learn how to interact with cadastral information effectively.
Interactive choropleth map

Interactive choropleth map

Example

Use events and feature states to create a interactive choropleth map.
Jump to a series of locations

Jump to a series of locations

Example

Use the jumpTo function to showcase multiple locations.
Navigate the map with game-like controls

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

Ocean bathymetry 3D

Example

Show a detailed 3D map of the ocean seafloor and bathymetry.
Offset the vanishing point using padding

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

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

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

Render world copies

Example

Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.
Restrict map panning to an area

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 to search for places

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

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

Set pitch and bearing

Example

Initialize a map with pitch and bearing camera options.
Show drawn polygon area

Show drawn polygon area

Example

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

Show polygon information on click

Example

When a user clicks a polygon, display a popup containing more information.
Show the trace position with Elevation profile control

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.
Show zoomed section in Elevation profile control

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

Slowly fly to a location

Example

Use flyTo with flyOptions to slowly zoom to a location.
Style lines with a data-driven property

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.

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

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

Toggle deck.gl layer

Example

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

Toggle interactions

Example

Enable or disable UI handlers on a map.
Update a feature in realtime

Update a feature in realtime

Example

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

Use a fallback image

Example

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

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

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

View a fullscreen map

Example

Toggle between the current view and fullscreen mode.
View local GeoJSON

View local GeoJSON

Example

View local GeoJSON without server upload.
View local GeoJSON (experimental)

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

Visualize population density

Example

Use a variable binding expression to calculate and display population density.
Weather Cloud coverage displayed from radar data

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 Plus pressure isolines layer

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 Plus wind arrow layer

Weather+ wind arrow layer

Example

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

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

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

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

Marker Layout weather icons

Example

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

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

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

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

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

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

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 show direction arrow

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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

Moving marker on click

Example

This example shows how to move a marker by clicking on the map.
Point layer cluster (point helper)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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

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.
Customize the AR experience.

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.