MapTiler SDK Examples

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

Maps SDK TypeScript

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

Built-in map styles

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

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

Display marker

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

Show polygon data from GeoJSON on the map

GeoJSON polygon layer

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

GeoJSON line layer

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

GeoJSON point layer

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

Show multiGeometry data from GeoJSON on the map

GeoJSON multiGeometry layer

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

Raster layer

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

Custom map

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

How to make a map of US election results

US election map

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

3D terrain map

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

How to create a choropleth Map from GeoJSON

Choropleth GeoJSON

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

Tutorials Geocoding

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

Reverse geocoding

Tutorials Geocoding

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

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

Projection control (globe)

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

Geocoding control

Tutorials Geocoding

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)

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

Hide map navigation controls

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

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

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 country bounds

Center map by visitor’s country IP

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

How to center map based on visitor's location

Center map by IP

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

How to display disputed borders based on visitor's location

Disputed borders by IP

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

List of places

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

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

Map language by IP

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

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

Enable/disable map terrain\

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

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

Cookie consent by IP

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

Scale control

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

Style switcher

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

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

Legend control

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

Switch from MapLibre

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

Switch from Mapbox

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

How to display an interactive choropleth map legend control

Choropleth legend

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

Missing map from feedback button

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

Screenshot with Usersnap

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

Screenshot with Ybug

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

Weather precipitation layer

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

Geocoding search results to specified country(ies)

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

Add a 3D model with three.js

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

Switch to dark mode inside tunnels

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

HTML clusters with custom properties

Extend clustering with HTML markers and custom property expressions.

Generate and add a missing icon to the map

Generate a missing icon to the map

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

Add a 3D model on terrain with three.js

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

Geocoding limit results by area

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

How to keep the map view with the URL hash

Map view URL hash

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

Create a draggable point

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

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

Geocoding language

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

Display a 3D building model generated with photogrammetry software

Display a 3D photogrammetry building model

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

Create a draggable marker

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

Animate a line

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

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

Globe with milkyway and halo

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

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

Add custom icon (PNG) to a point layer

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

Change the default position for attribution

Change attribution default position

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

Use locally generated ideographs

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

Customize camera animations

Customize camera animations using AnimationOptions.

Fit a map to a bounding box

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

Weather Cloud coverage displayed from radar data

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

Add interaction to landmarks

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

Add live realtime data

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

Weather pressure layer

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

Animate a 3D model

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

Add an atmospheric glow (halo) around the globe

Globe with halo

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

Create a hover effect

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

Style lines with a data-driven property

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

3D globe with custom weather markers

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

Measure distances

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

Weather wind and temperature layer

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

Compass rose control

Add a compass rose as a visual indicator of the map’s bearing (rotation) using Custom Controls.

Toggle interactions

Enable or disable UI handlers on a map.

Add a plane 3D model

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

Elevation at point

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

Add custom zoom control

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

Weather layer with a custom color blind ramp

Weather layer custom color blind ramp

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.

Variable label placement

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

Navigate the map with game-like controls

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

Filter symbols by text input

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

Ocean bathymetry 3D

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

Weather wind layer

Examples Marker-layout Weather

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

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

Weather icons Marker Layout

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

Jump to a series of locations

Use the jumpTo function to showcase multiple locations.

Add an animated icon to the map

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

Set pitch and bearing

Initialize a map with pitch and bearing camera options.

Display a tiled, non-georeferenced image

Display a non-georeferenced image

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

Center the map on a clicked symbol

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

Filter within a Layer

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

Interactive choropleth map

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

Add multiple 3D models

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

Visualize and animate the evolution of population data

Population data animation

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

Fit to the bounds of a lineString

Get the bounds of a lineString.

Get features under the mouse pointer

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

Switch between contour lines heights in meters and feet

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.

3D model pitch and roll

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

3D model events

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

Ready event

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.

Weather Plus pressure isolines layer labels

Weather+ pressure isolines layer labels

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

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

Add custom icon (SVG) to a point layer

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

Change the case of labels

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

Add Contour Lines

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

Add a new layer below labels

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

Display a point cloud 3D building model

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

Weather+ wind arrow layer animated

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

Animate a point along a route

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

Display a popup on click

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

Add a map to a webpage

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

Weather+ pressure isolines layer

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

Display a LIDAR data 3D city model

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

Add a 3D model on a map

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

Visualize population density

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

Change building color based on zoom level

Change color based on zoom level

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

Add dynamic hillshading

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.

Add markers to a non-georeferenced image

Markers in a non-georeferenced image

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

Disable map rotation

Prevent users from rotating a map.

View local GeoJSON

View local GeoJSON without server upload.

Attach a popup to a marker instance

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

Display a popup

Add a popup to the map.

Animate a series of images

Use a series of image sources to create an animation.

Add a generated icon to the map

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

Zoomed section Elevation profile control

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.

Create a time slider

Visualize and filter earthquakes with a range slider.

Display line that crosses 180th meridian

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

Create a globe map with 3D terrain elevation

Globe with elevation terrain

Create a globe map with 3D terrain elevation.

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

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

Use a fallback image

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

Add hillshading

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.

Point filtering by property

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

Play GLTF animations

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

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.

Fly to a location based on the scroll position

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

Geocoding search for POIs near the user's location

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

Get POIs information on click

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

Reverse geocoding uses the user’s location

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

Add custom icons with markers

Add custom marker icons to your map.

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.

Create a globe map with ocean bathymetry terrain elevation

Globe with ocean bathymetry

Create a globe map with ocean bathymetry terrain elevation.

Animate a point

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

Fly to a location

Use flyTo to smoothly interpolate between locations.

Add a video

Display a video on top of a satellite raster baselayer.

Create custom marker overlays using the Marker Layout

Non filtered Marker Layout

Examples Marker-layout

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

Filter symbols by toggling a list

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

Slowly fly to a location

Use flyTo with flyOptions to slowly zoom to a location.

Add elevation profile control

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.

Disable scroll zoom

Prevent scroll from zooming a map.

Add a custom color background to the globe

Globe with color background

Add a custom color background to the globe.

Icon image URL inside a rich text format label

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

Globe with custom halo

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

Restrict map panning to an area

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

Animate a marker

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

Add an icon to the map

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

Custom control programmatically

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

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

Change to dark mode at sunset

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

Change a layer's color with buttons

Use setPaintProperty to change a layer's fill color.

Weather wind direction

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

View local GeoJSON (experimental)

View local GeoJSON with experimental File System Access API.

Cooperative gestures

Enable cooperative gestures with a specific language. .

Add a 3D model with babylon.js

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

Display GPX track elevation profile

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.

Add a stretchable image to the map

Use a stretchable image as a background for text.

Animate a 3D plane flight

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

Search features by coordinates using the geocoding control

Geocoding control (reverse geocoding)

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

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

Mobile PWA MapTiler SDK

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

Examples Marker-layout

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

Animate map camera around a point

Animate the map camera around a point.

Weather radar layer

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

Display and style rich text labels

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

Get coordinates of the mouse pointer

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

Display buildings in 3D

Use extrusions to display buildings' height in 3D.

Render world copies

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

Create and style clusters

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

Customize Elevation profile control

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!

Add a third party vector tile source

Render vector data provided by Mapillary.

Geocoding search results closer to specific point

Geocoding search results by proximity to a specific point

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

Create a 3D choropleth map of Europe with countries extruded

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 non-interactive map

Disable interactivity to create a static map.

How to switch map projection programmatically

Switch between “mercator” and “globe”

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

Animate a 3D plane flight in a globe

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

View a fullscreen map

Toggle between the current view and fullscreen mode.

Show trace position Elevation profile control

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.

3D model roll

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

Weather+ wind arrow layer

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

Add a start space background to the globe

Globe with initial space background

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

Draw GeoJSON points

Draw points from a GeoJSON collection to a map.

Add a custom style layer

Use a custom style layer to render custom WebGL content.

Weather Plus pressure isolines layer animated

Weather+ pressure isolines layer animated

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

Customize API request from geocoding control

Customize API request (geocoding control)

Examples Weather Marker-layout

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.

Weather custom popup

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

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

Update a feature in realtime

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

Weather temperature layer

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

3D model pitch

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

Add a WMS source

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

Custom control declarative

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

Interact with cadastral map information effectively

Cadastre map

Learn how to interact with cadastral information effectively.

3D globe with custom marker overlays

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

Create a heatmap layer

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

Add a pattern to a polygon

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

Extrude polygons for 3D indoor mapping

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

Add a canvas source

Add a canvas source to the map.

Add a raster tile source

Add a third-party raster source to the map.

Change a map's language

Use setLanguage function to switch languages dynamically.

Show polygon information on click

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

Display a satellite map

Display a satellite raster baselayer.

Add a milkyway and stars background to the globe

Globe with milkyway and stars

Add a milkyway and stars background to the globe.

Custom night satellite image in a goble with space background

Night globe in space

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

Geocoding limit results by a drawn area

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.

Globe projection

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

Display a building model

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 popup on hover

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

Show drawn polygon area

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

Set dark mode based on system settings

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

Creates an animated map to fly between different locations

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 color ramp (color ramp)

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

Point layer (point helper)

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

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

Take screenshot (screenshot helper)

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

Line layer (polyline helper)

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

Polygon layer (polygon helper)

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

Heatmap layer (heatmap helper)

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)

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

Color ramp resampling (color ramp)

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

Heatmap layer weight (heatmap helper)

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

Point layer labels (point helper)

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

Heatmap layer opacity (heatmap helper)

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

Point layer disabled zoom compensation (point helper)

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

Heatmap layer min and max zoom (heatmap helper)

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

Heatmap layer custom radius (heatmap helper)

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

Style a GeoJSON Line layer (polyline helper)

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

Moving marker on click

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

Heatmap layer intensity (heatmap helper)

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

Add a KML Line layer (polyline helper)

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

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

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.

Heatmap layer custom radius by property (heatmap helper)

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 custom color ramp (heatmap helper)

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

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

Point layer min and max size (point helper)

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.

Point layer cluster (point helper)

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

Polygon fill pattern (polygon helper)

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

Add a GPX Line layer (polyline helper)

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

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

Point layer scaled radius (point helper)

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

Line dash pattern symbol (polyline helper)

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

Polygon color ramp symbol (polygon helper)

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.

Heatmap layer no zoom compensation (heatmap helper)

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

Point layer outline (point helper)

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

Heatmap layer radius and weight by property (heatmap helper)

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.

Point layer scaled radius by property (point helper)

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

Line color ramp symbol (polyline helper)

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)

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

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

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

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

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.

Learn the basics - Vue.js

Tutorials Vuejs

In this tutorial, you’ll learn how to create a Vue.js component to render a map using MapTiler SDK JS

Get started

Tutorials Vite

In this tutorial, you’ll learn how to display a map in Vite using MapTiler SDK JS

MapTiler SDK JS geocoding component how to search places using React JS

Geocoding component - React

This tutorial shows how to search for places using the Geocoding control component in React JS

Learn the basics - React

In this step-by-step tutorial, you’ll learn how to create a React JS component to render a map using MapTiler SDK JS.

Heatmap in React JS

In this step-by-step tutorial, you’ll learn how to create a heatmap in your React JS map using the MapTiler SDK JS

Geocoding control - React

In this step-by-step tutorial, you’ll learn how to create a map with a geocoding control in your React JS map using the MapTiler SDK JS

3D Map in React js with geocoding control

3D Terrain Map

In this step-by-step tutorial, you’ll learn how to create a 3D terrain map with a geocoding control in your React JS map using the MapTiler SDK JS

Map with Material UI

In this step-by-step tutorial, you’ll learn how to create a application in React JS with Material UI (MUI) to render a map using the MapTiler SDK JS

Map in React JS point data from geojson data

Points from geojson - React

In this step-by-step tutorial, you’ll learn how to add geojson points to your React JS map using the MapTiler SDK JS

Popup and sidebar - React

In this step-by-step tutorial, you’ll learn how to create a map with a sidebar and popup in your React JS map using the MapTiler SDK JS

How to display a Deck.gl layers in MapTiler SDK JS

Interleaved Deck.gl layer

This example shows how to use Deck.gl layers in a MapTiler SDK JS map. This example shows how to display a Deck.gl GeoJSON layer, along with an Deck.gl arc layer on top of your MapTiler maps.

Toggle deck.gl layer

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

How to display an MVT layer of POIs and show a tooltip in Deck.gl

POIs info Deck.gl MVT layer

This example demonstrates the process of loading an MVT layer of Points of Interest (POIs) using Deck.gl and displaying a tooltip. The example shows the poi layer that comes from the MapTiler Planet tileset.

GeoJSON in Deck.gl

This example illustrates the process of showcasing a GeoJSON layer in Deck.gl. In this particular instance, we utilize an arc layer to visually represent the connections between the various features of the GeoJSON layer.

Create deck.gl layer using REST API

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

How to display a MVT layer of buildings in Deck.gl

Buildings Deck.gl MVT layer