MapTiler SDK JS examples

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

Maps SDK TypeScript

Create maps using TypeScript for type safety and completion.

Built-in map styles

Easily create beautiful maps using reliable built-in styles.

Change map styles

Switch between built-in and custom map styles dynamically.

Display marker

Learn how to add a default marker to your map.

GeoJSON line layer

Add a GeoJSON line overlay to the map application.

GeoJSON point layer

Add a GeoJSON point overlay to your map application.

Show polygon data from GeoJSON on the map

GeoJSON polygon layer

Add GeoJSON polygon overlay to your web map application.

Show multiGeometry data from GeoJSON on the map

GeoJSON multiGeometry layer

Add a GeoJSON MultiGeometry overlay to your map application.

Raster layer

Add a raster image overlay to the map.

Custom map

Display your customized MapTiler map on any web page.

3D terrain map

Create and display 3D terrain maps on web pages.

How to make a map of US election results

US election map

Create an interactive map displaying USA election results.

How to create a choropleth Map from GeoJSON

Choropleth GeoJSON

Create a styled choropleth map using a GeoJSON overlay.

Geocoding API

Tutorials Geocoding

Search for places using the MapTiler Geocoding API.

Reverse geocoding

Tutorials Geocoding

Search places by coordinates using reverse geocoding.

Geocoding control

Tutorials Geocoding

Search for places using the map geocoding control component.

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

Geolocate control (GPS)

Enable GPS location tracking using the geolocate map control.

Hide map navigation controls

Hide the map navigation and zoom controls.

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

Projection control (globe)

Toggle between Mercator and globe projections using map controls.

How to use and filter data for MapTiler Countries

Countries filter

Filter MapTiler Countries data to create choropleth maps.

How to create a countries map with your own data

Countries with data

Join custom data with MapTiler Countries for choropleth maps.

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

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.

Enable/disable map terrain

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

Scale control

Learn to add and display map scale control.

Style switcher

Add a style switcher control to your map.

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

Minimap control

Display an overview minimap control to aid map navigation.

Legend control

Display a map legend control to toggle layer visibility.

How to display an interactive choropleth map legend control

Choropleth legend

Implement an interactive legend control for a choropleth map.

Switch from MapLibre

Steps to switch from MapLibre GL JS to MapTiler SDK.

Switch from Mapbox

Guide for migrating from Mapbox GL JS to MapTiler SDK.

Missing map from feedback button

Fix missing map in feedback using screenshot helper.

Screenshot with Usersnap

Take map screenshot with Usersnap integration using helper.

Screenshot with Ybug

Take map screenshot with Ybug integration using helper.

Custom color ramp (color ramp)

Visualize point layers by creating custom map color ramps.

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

Download a map screenshot (screenshot helper)

Download map screenshot as PNG file using helper.

Heatmap layer (heatmap helper)

Quickly add a heatmap layer using the heatmap helper.

Line layer (polyline helper)

Add minimal line layer using MapTiler polyline helper.

Point layer (point helper)

Add minimal point layer using MapTiler point helper.

Polygon layer (polygon helper)

Add minimal polygon layer using MapTiler polygon helper.

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

Take screenshot (screenshot helper)

Capture map view as PNG blob using helper.

Add a GPX Line layer (polyline helper)

Add GPX line layer using MapTiler polyline helper.

Add a KML Line layer (polyline helper)

Add KML line layer using MapTiler polyline helper.

Color ramp resampling (color ramp)

Visualize point layers by resampling existing map color ramps.

Heatmap layer custom color ramp (heatmap helper)

Add a heatmap layer featuring a custom color ramp.

Heatmap layer custom radius (heatmap helper)

Implement custom zoom-ramping radius in heatmap layers.

Heatmap layer custom radius by property (heatmap helper)

Apply property-ramping radius configurations to heatmap layers.

Heatmap layer intensity (heatmap helper)

Configure custom intensity levels for your heatmap layer visualization.

Heatmap layer min and max zoom (heatmap helper)

Set minimum and maximum zoom levels for heatmap layers.

Heatmap layer opacity (heatmap helper)

Customize the opacity of your heatmap layer visualization.

Heatmap layer weight (heatmap helper)

Use data properties as weight values for heatmap layers.

Moving marker on click

Move a map marker by clicking on it.

Point layer cluster (point helper)

Add clustered point layer using MapTiler point helper.

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

Style point layer by property using point helper.

Point layer disabled zoom compensation (point helper)

Disable zoom compensation for point layer using helper.

Point layer labels (point helper)

Add labeled point layer using MapTiler point helper.

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

Point layer min and max size (point helper)

Modify point layer size and transparency using helper.

Polygon fill pattern (polygon helper)

Add fill pattern to polygon layer using helper.

Style a GeoJSON Line layer (polyline helper)

Style GeoJSON line layer using MapTiler polyline helper.

Heatmap layer no zoom compensation (heatmap helper)

Create heatmap layers without zoom-based radius compensation.

Heatmap layer radius and weight by property (heatmap helper)

Control heatmap radius and weight using data properties.

Line dash pattern symbol (polyline helper)

Add dash pattern to line layer using helper.

Point layer outline (point helper)

Add outlined point layer using MapTiler point helper.

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

Point layer scaled radius (point helper)

Scale point layer radius by map zoom level.

Point layer scaled radius by property (point helper)

Scale point layer radius and color by property.

Polygon color ramp symbol (polygon helper)

Style polygon fill color based on zoom level.

Line color ramp symbol (polyline helper)

Style line color based on map zoom level.

Line outline glow blur symbol (polyline helper)

Add glowing outline to line layer using helper.

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

QR code to access AR maps

Provide a QR code to access mobile AR maps.

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

Start with AR maps

Add an AR control button to map 3D viewports.

Add GeoJSON to AR maps

Display GeoJSON biking or hiking routes in AR maps.

Custom AR experience

Customize the appearance of the augmented reality map control.

How to trigger actions in the AR control

Trigger AR control actions

Trigger AR map control actions using keyboard input.

3D globe with custom marker overlays

Create non-colliding marker overlays on interactive 3D globe maps.

3D globe with custom weather markers

Create interactive weather globe maps with animated custom markers.

3D model events

Listen for mouse events on 3D models in maps.

3D model pitch

Rotate 3D models by setting the pitch tilt property.

3D model pitch and roll

Rotate 3D models using pitch and roll properties.

3D model set the position relative to another 3D model

3D model position relative

Position 3D models relative to other models or coordinates.

3D model roll

Rotate 3D models by setting the roll property.

3D models intersections

Detect intersections between 3D models using MapTiler JS module.

Add Contour Lines

Add map contour lines generated from a raster-dem source.

Add a 3D model on a map

Add 3D glTF models to maps using MapTiler SDK.

Add a 3D model on terrain with three.js

Integrate 3D models on terrain with three.js custom layers.

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

Integrate 3D models into your interactive globe map surface.

Add a 3D model with babylon.js

Add 3D models using custom layers and babylon.js.

Add a 3D model with three.js

Add 3D models using custom layers and three.js.

Add a WMS source

Add an external Web Map Service raster layer.

Add a canvas source

Integrate a dynamic HTML canvas source into the map.

Add a custom style layer

Use a custom style layer for WebGL content.

Add a generated icon to the map

Add custom map icons generated dynamically at runtime.

Add a map to a webpage

Create maps in HTML elements using MapTiler SDK JS.

Add a new layer below labels

Add new layers below labels using the addLayer method.

Add a pattern to a polygon

Draw polygons using repeating image patterns with fill-pattern.

Add a plane 3D model

Add and position flying 3D airplane models on maps.

Add a raster tile source

Add a third-party raster source to the map.

Add a stretchable image to the map

Use stretchable images as background for map text labels.

Add a third party vector tile source

Add and render third-party vector data sources on maps.

Add a vector tile source

Add and display custom vector tile sources on maps.

Add a video

Display videos overlaying a satellite raster baselayer on maps.

Add an animated icon to the map

Add animated icons generated at runtime using Canvas API.

Add an icon to the map

Add icons from external URLs to symbol map layers.

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

Add custom icon (PNG) to a point layer

Display a point layer using custom PNG icons.

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

Add custom icon (SVG) to a point layer

Display a point layer using custom SVG icons.

Add custom icons with markers

Add custom marker icons to your map.

Add custom zoom control

Add custom zoom level control to your map interface.

Add dynamic hillshading

Adjust hillshade lighting dynamically to simulate sun movement.

Add elevation profile control

Show elevation profiles for GeoJSON traces using MapTiler.

Add hillshading

Add raster hillshading effect to a MapTiler map.

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.

Add multiple 3D models

Incorporate multiple 3D models with adjustable parameters on maps.

Animate a 3D model

Animate 3D models and display them on a map.

Animate a 3D plane flight

Simulate and animate a 3D plane flight between cities.

Animate a 3D plane flight in a globe

Animate airplane flight paths using 3D models on globe.

Animate a line

Animate lines by updating GeoJSON sources on every frame.

Animate a marker

Animate map marker positions by updating locations each frame.

Animate a point

Animate a point position using GeoJSON frame updates.

Animate a point along a route

Smoothly animate a point along a route using Turf.

Animate a series of images

Create animations using a sequence of image map sources.

Animate map camera around a point

Animate the map camera rotating around a specific point.

Animate routes dynamic camera

Animate multidimensional routes with a dynamic camera that follows the journey in real-time.

Animation with 3D Module

Animates a 3D model (UFO) around the Burj Khalifa using MaptilerAnimation and the 3D module.

Animations and Animated Routes

Animates a path or route on the map based on keyframes or GeoJSON data.

Attach a popup to a marker instance

Attach and display a popup to a map marker.

Interact with cadastral map information effectively

Cadastre map

Learn how to effectively interact with cadastral map information.

Center the map on a clicked symbol

Center the map on a clicked symbol using flyTo.

Change a layer's color with buttons

Change layer fill colors dynamically using the setPaintProperty method.

Change a map's language

Use setLanguage function to switch languages dynamically.

Change the default position for attribution

Change attribution default position

Position map attribution in the top-left corner on initialization.

Change building color based on zoom level

Change color based on zoom level

Dynamically adjust 3D building colors based on zoom levels.

Change the case of labels

Modify label text casing using upcase and downcase expressions.

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

Change to dark mode at sunset

Toggle light and dark map modes based on time.

Compass rose control

Add a compass rose to indicate map bearing rotation.

Cooperative gestures

Enable cooperative gestures with specific language support.

Create a 3D choropleth map of Europe with countries extruded

Create 3D choropleth map with extruded country polygons.

Create a draggable marker

Create a draggable marker and display its map coordinates.

Create a draggable point

Create a draggable point and display its map coordinates.

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.

Create a heatmap layer

Visualize point data frequency using a custom heatmap layer.

Create a hover effect

Create per-feature hover effect using events and states.

Create a non-interactive map

Disable interactivity to create a static map.

Create a time slider

Visualize and filter earthquake data using a time slider.

Create and style clusters

Visualize point data as clusters using built-in SDK functions.

Creates an animated map to fly between different locations

Animate map flights between locations using a heatmap layer.

Custom control declarative

Add interactive custom controls to maps using declarative HTML.

Custom control programmatically

Programmatically add custom controls for dynamic map logic integration.

Customize API request from geocoding control

Customize API request (geocoding control)

Modify geocoding URLs before fetching using the adjustUrl option.

Customize Elevation profile control

Customize the MapTiler SDK elevation profile control interface.

Customize camera animations

Customize map camera animations using the AnimationOptions property.

Disable map rotation

Prevent users from rotating your interactive map.

Disable scroll zoom

Prevent scroll actions from zooming your interactive map.

Display GPX track elevation profile

Display the elevation profile of any GPX track.

Display a 3D building model generated with photogrammetry software

Display a 3D photogrammetry building model

Show 3D photogrammetry building models using MapTiler 3D module.

Display a LIDAR data 3D city model

Render LIDAR-based 3D city models on interactive maps.

Display a building model

Display wireframe 3D building models from point cloud data.

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.

Display a point cloud 3D building model

Display point cloud 3D building models on interactive maps.

Display a popup

Add an information popup to the map.

Display a popup on click

Display a popup when a user clicks a symbol.

Display a popup on hover

Show a popup when hovering over a custom marker.

Display a satellite map

Display a satellite raster map baselayer.

Display and style rich text labels

Display multilingual rich text labels using format expressions.

Display buildings in 3D

Use extrusions to display height of buildings in 3D.

Display line that crosses 180th meridian

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

Draw GeoJSON points

Draw point markers from a GeoJSON collection on maps.

Elevation at point

Get elevation data in meters by clicking the map.

Extrude polygons for 3D indoor mapping

Create a 3D indoor map with fill extrude height.

Filter symbols by text input

Filter symbols by typing names into a text input.

Filter symbols by toggling a list

Filter symbols based on property values in the dataset.

Filter within a Layer

Use setFilter to filter map layers based on input.

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.

Fit a map to a bounding box

Fit map to a specific area using fitBounds method.

Fit to the bounds of a lineString

Get the bounds of a lineString.

Fly to a location

Smoothly interpolate between locations using the flyTo animation.

Fly to a location based on the scroll position

Fly to locations on the map by scrolling.

Generate and add a missing icon to the map

Generate a missing icon to the map

Dynamically generate and add missing icons to the map.

Search features by coordinates using the geocoding control

Geocoding control (reverse geocoding)

Perform coordinate-based searches using the reverse geocoding control.

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

Geocoding language

Specify languages for geocoding response text and query weighting.

Geocoding limit results by a drawn area

Limit geocoding search results to a drawn polygon bounding box.

Geocoding limit results by area

Limit geocoding search results to a specific bounding box area.

Geocoding search for POIs near the user's location

Filter geocoding search results by specific place types.

Geocoding search results closer to specific point

Geocoding search results by proximity to a specific point

Rank geocoding search results higher based on proximity.

Geocoding search results to specified country(ies)

Limit geocoding control search results to specific countries.

Get POIs information on click

Get POI information by clicking the map.

Get coordinates of the mouse pointer

Show mouse position on hover with coordinates.

Get features under the mouse pointer

Show properties of hovered map elements with queryRenderedFeatures.

Globe projection

Enable the 3D globe map projection in your application.

Add a custom color background to the globe

Globe with color background

Add a custom color background to the globe.

Globe with custom halo

Add a custom atmospheric glow effect around your globe.

Create a globe map with 3D terrain elevation

Globe with elevation terrain

Create a 3D globe map featuring terrain elevation.

Add an atmospheric glow (halo) around the globe

Globe with halo

Add a simulated atmospheric glow around the 3D globe.

Add a start space background to the globe

Globe with initial space background

Add a deep space background environment to the globe.

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

Globe with milkyway and halo

Add a red Milky Way and halo to the globe.

Add a milkyway and stars background to the globe

Globe with milkyway and stars

Add a milkyway and stars background to the globe.

Create a globe map with ocean bathymetry terrain elevation

Globe with ocean bathymetry

Display ocean bathymetry and terrain elevation on 3D globe.

HTML clusters with custom properties

Enhance map clustering using HTML markers and custom expressions.

Icon image URL inside a rich text format label

Display rich text labels with texts and icons.

Interactive 3D urban explorer with animated building components

Interactive 3D building components

Explore a dynamic 3D urban environment where buildings come to life

Interactive choropleth map

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

Jump to a series of locations

Use the jumpTo function to showcase multiple locations.

Level of detail control

Modify tile level of detail at high pitch angles.

How to display a map with custom projections

Map projections

Display a map with custom map projections.

How to keep the map view with the URL hash

Map view URL hash

Synchronize map view position with the page URL hash.

Add markers to a non-georeferenced image

Markers in a non-georeferenced image

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

Measure distances

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

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

Mobile PWA MapTiler SDK

Create mobile PWA using MapTiler SDK JS.

Navigate the map with game-like controls

Navigate map using keyboard arrow keys with game controls.

Custom night satellite image in a goble with space background

Night globe in space

Display Earth's night satellite imagery on a 3D globe.

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

Ocean bathymetry 3D

Show a detailed 3D ocean bathymetry map.

Offset the vanishing point using padding

Offset the map vanishing point using padding.

Play GLTF animations

Play animations in GLTF models simulating a plane flight.

Point filtering by property

Filter features in real time by property.

Visualize and animate the evolution of population data

Population data animation

Visualize and animate global population density using weather modules.

Ready event

Use the ready event to safely add custom controls.

Render world copies

Toggle rendering multiple copies of the world.

Restrict map panning to an area

Prevent map panning by setting maximum bounds.

Reverse geocoding uses the user’s location

Search for places by transforming coordinates into place names.

Set dark mode based on system settings

Switch map light/dark mode based on system color settings.

Set pitch and bearing

Initialize a map with pitch and bearing.

Show drawn polygon area

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

Show polygon information on click

Display a popup when a user clicks a polygon.

Show trace position Elevation profile control

Synchronize a moving map marker with elevation profile cursor.

Sky, Fog, Terrain

Create a map with sky, fog and 3D terrain.

Slowly fly to a location

Slowly zoom to locations using flyTo with flyOptions.

Style lines with a data-driven property

Create visualizations using data expressions for line colors.

Switch between contour lines heights in meters and feet

Switch map contour line altitude units between meters and feet.

How to switch map projection programmatically

Switch between “mercator” and “globe”

Programmatically switch between Mercator and globe map projections.

Switch to dark mode inside tunnels

Change map style to dark mode when entering tunnels.

Toggle interactions

Enable or disable specific user interaction handlers on maps.

Update a feature in realtime

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

Use a fallback image

Use a coalesce expression to display a fallback image.

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.

Variable label placement

Dynamically shift label positions to keep them visible.

View a fullscreen map

Toggle between the current map view and fullscreen mode.

View local GeoJSON

View local GeoJSON without server upload.

View local GeoJSON (experimental)

View local GeoJSON with experimental File System Access API.

Visualize population density

Calculate and display population density using variable expressions.

Weather Cloud coverage displayed from radar data

Examples Weather Marker-layout

Visualize cloud coverage using weather radar data and tooltips.

Weather custom popup

Create highly customizable popups for weather maps using MarkerLayout.

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

Weather icons Marker Layout

Examples Marker-layout Weather

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

Weather layer with a custom color blind ramp

Weather layer custom color blind ramp

Visualize temperature layer with custom color blind ramp.

Weather layer switcher

Switch weather layers and view detailed data under cursors.

Weather precipitation layer

Visualize precipitation layers and view localized data under cursors.

Weather pressure layer

Visualize pressure layers and view localized data under cursors.

Weather radar layer

Visualize weather radar layers and view localized radar data.

Weather temperature layer

Visualize temperature layers and view localized data under cursors.

Weather wind and temperature layer

Visualize wind and temperature layers with cursor data.

Weather wind direction

Visualize wind layer with speed and direction.

Weather wind layer

Visualize weather wind layer and get wind speed.

Weather+ pressure isolines layer

Visualize atmospheric pressure isolines using Weather Plus datasets.

Weather Plus pressure isolines layer animated

Weather+ pressure isolines layer animated

Animate atmospheric pressure isolines and view precise cursor data.

Weather Plus pressure isolines layer labels

Weather+ pressure isolines layer labels

Display high and low atmospheric pressure extreme value labels.

Weather+ wind arrow layer

Visualize wind direction and speed using animated wind arrows.

Weather+ wind arrow layer animated

Animate wind arrows and view cursor-specific wind speed data.

Zoomed section Elevation profile control

Tutorials React Geocoding

Display a zoomed-in section on the elevation profile.

How to display a map in Angular using MapTiler SDK JS

Learn the basics - Angular

Tutorials Angular

Render MapTiler maps in Angular using MapTiler SDK JS.

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

Geocoding component - React

Search places using Geocoding control component in React JS.

Map in React JS point data from geojson data

Points from geojson - React

Add GeoJSON points to React JS maps with MapTiler.

Heatmap in React JS

Tutorials React Geocoding

Create heatmap visualizations in React JS maps using MapTiler.

Geocoding control - React

Add geocoding control to React JS maps using MapTiler.

3D Map in React js with geocoding control

3D Terrain Map

Create 3D terrain maps with geocoding in React JS.

Learn the basics - React

Create React JS components for MapTiler SDK JS maps.

Map with Material UI

Create React JS maps with Material UI and MapTiler.

Popup and sidebar - React

Create popups and sidebars in React JS maps.

Get started

Tutorials Vite

Learn how to display maps in Vite using MapTiler SDK.

Create deck.gl layer using REST API

Create Deck.gl layers from REST API overlays using SDK.

Toggle deck.gl layer

Toggle visibility of Deck.gl layers using MapTiler SDK.

GeoJSON in Deck.gl

Visualize GeoJSON layers and arc connections in Deck.gl.

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

Interleaved Deck.gl layer

Interleave Deck.gl layers with MapTiler SDK JS maps.

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

POIs info Deck.gl MVT layer

Display MVT POI layers with tooltips in Deck.gl.

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

Buildings Deck.gl MVT layer

Tutorials Svelte Geocoding

Render extruded building layers in Deck.gl using Vector Tiles.

MapTiler SDK JS geocoding control how to search places using Svelte

Geocoding control - Svelte

Search places in Svelte using MapTiler geocoding control.

Learn the basics - Svelte

Tutorials Svelte

Create Svelte components to render MapTiler SDK maps.

Standalone vanilla JS component