MapTiler SDK Examples
Maps SDK TypeScriptTutorial
Create a map with the TypeScript-based SDK. Take advantage of code completion, type safety, and backward compatibility.
Learn the basicsTutorial
This tutorial shows how to create a map and display it on a web page using MapTiler Cloud.
Built-in map stylesTutorial
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 stylesTutorial
This tutorial shows how to change the map styles, you can switch between the built-in maps and your own custom maps.
GeoJSON multiGeometry layerTutorial
This tutorial shows how to add a GeoJSON multiGeometry overlay to the map.
This example demonstrates how to display a custom map on the web page using MapTiler Cloud.
3D terrain mapTutorial
This tutorial demonstrates how to create a 3D terrain map and display it on a web page using MapTiler Cloud.
This tutorial shows how to add a styled GeoJSON overlay to the map, display a popup on click, and create a map legend.
This tutorial shows how to search places by coordinates (reverse geocoding).
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.
Hide map navigation controlsTutorial
This tutorial shows how to hide the navigation control (zoom and rotation controls to the map).
This tutorial shows how to search for places using the geocoding control.
This tutorial shows how to use and filter data for MapTiler Countries and make a choropleth map.
Countries with dataTutorial
This tutorial shows how to Join MapTiler Countries with your own custom data and make a choropleth map.
This tutorial shows how build a web mapping application that allows us to draw a path and retrieve the elevation profile along that path.
Center map by visitor’s country IPTutorial
This tutorial shows how to center map based on the visitor’s country bounds using the MapTiler Geolocation API.
Center map by IPTutorial
This tutorial shows how to center map based on the visitor's location using the MapTiler Geolocation API.
Disputed borders by IPTutorial
This tutorial shows how to automatically change disputed borders according to your map visitor's location usign the MapTiler Geolocation API.
Map language by IPTutorial
This tutorial shows how to automatically change the map labels language based on visitor's location usign the MapTiler Geolocation API.
Enable/disable map terrainTutorial
This tutorial demonstrates how to enable/disable the 3D terrain map programmatically using SDK functions.
Cookie consent by IPTutorial
This tutorial shows how to display the cookies consent bar according to the visitor's location usign the MapTiler Geolocation API.
This tutorial shows how to add and display a style switcher control on the map.
This tutorial shows how to display a minimap or overview map control in MapTiler SDK JS to aid the map navigation.
This tutorial shows how to display a map legend control to toggle layers visualization.
This tutorial shows how to display an interactive choropleth map legend control.
Add a 3D model with babylon.jsExample
Use a custom style layer with babylon.js to add a 3D model to the map.
Add a WMS sourceExample
Add an external Web Map Service raster layer to the map using addSource's tiles option.
Add a new layer below labelsExample
Use the second argument of addLayer to add a layer below labels.
Add a pattern to a polygonExample
Use fill-pattern to draw a polygon from a repeating image pattern.
Add an animated icon to the mapExample
Add an animated icon to the map that was generated at runtime with the Canvas API.
Add an icon to the mapExample
Add an icon to the map from an external URL and use it in a symbol layer.
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.
Animate a point along a routeExample
Use Turf to smoothly animate a point along the distance of a line.
Change to dark mode at sunsetExample
This example shows how to change the map mode between light and dark based on the time of day.
Change color based on zoom levelExample
Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.
Change the case of labelsExample
Use the upcase and downcase expressions to change the case of labels.
Change attribution default positionExample
Place attribution in the top-left position when initializing a map.
Create a 3D choropleth map of Europe with countries extrudedExample
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 markerExample
Drag the marker to a new location on a map and populate its coordinates in a display.
Create a draggable pointExample
Drag the point to a new location on a map and populate its coordinates in a display.
Create a gradient line using an expressionExample
Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.
Create a heatmap layerExample
This example uses SDK JS to visualize the frequency of USA schools by location using a heatmap layer.
Creates an animated map to fly between different locationsExample
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.
HTML clusters with custom propertiesExample
Extend clustering with HTML markers and custom property expressions.
Display a popup on clickExample
When a user clicks a symbol, show a popup containing more information.
Display a popup on hoverExample
When a user hovers over a custom marker, show a popup containing more information.
Display and style rich text labelsExample
Use the format expression to display country labels in both English and in the local language.
Display line that crosses 180th meridianExample
Draw a line across the 180th meridian using a GeoJSON source.
Extrude polygons for 3D indoor mappingExample
Create a 3D indoor map with the fill-extrude-height paint property.
Filter symbols by toggling a listExample
Filter a set of symbols based on a property value in the data.
Fit a map to a bounding boxExample
Fit the map to a specific area, regardless of the pixel size of the map.
Fly to a location based on scroll positionExample
Scroll down through the story and the map will fly to the chapter's location.
Generate a missing icon to the mapExample
Dynamically generate a missing icon at runtime and add it to the map.
Geocoding limit results by a drawn areaExample
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 areaExample
Limit the search results of the geocoding control to the specific area (bounding box).
Geocoding search for POIs near the user's locationExample
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 pointExample
Geocoding control search results closer to the specific geographical point will be given higher priority.
Geocoding search results to specified country(ies)Example
Geocoding control limit search results to specified country(ies).
Get POIs information on clickExample
Get POI information from MapTiler, OpenStreetMap (OSM), and Wikidata data by clicking on the map.
Get coordinates of the mouse pointerExample
Show mouse position on hover with pixel and latitude and longitude coordinates.
Get features under the mouse pointerExample
Use queryRenderedFeatures to show properties of hovered-over map elements.
Icon image URL inside a rich text format labelExample
Use the Formatted type to display a rich text labels with texts and icons from images URL.
Interactive choropleth mapExample
Use events and feature states to create a interactive choropleth map.
Click points on a map to create lines that measure distanced using turf.length.
Navigate the map with game-like controlsExample
Use the keyboard's arrow keys to move around the map with game-like controls.
Offset the vanishing point using paddingExample
Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.
Point filtering by propertyExample
Filter thousands of features in real time to quickly and easily find those with a property that meets your search criteria.
Render world copiesExample
Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.
Restrict map panning to an areaExample
Prevent a map from being panned to a different place by setting maxBounds.
Reverse geocoding uses the user’s locationExample
How to search for places by coordinates (reverse geocoding) using the user's location. Reverse geocoding transforms coordinates into place names.
Set dark mode based on system settingsExample
This example shows how to change the map mode (light/dark) based on system settings.
Show drawn polygon areaExample
Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.
Show polygon information on clickExample
When a user clicks a polygon, show a popup containing more information.
Specify the geocoding control language(s) that are used for the response text and weighting of the query results.
Style lines with a data-driven propertyExample
Create a visualization with a data expression for line-color.
Switch between contour lines heights in meters and feetExample
Change the units of the heights of the contour lines between meters and feet. The Global Contours schema, created by MapTiler, contains contour lines in both common unit systems meters and feet.
Switch to dark mode inside tunnelsExample
This example shows how to change the map mode (light/dark) based on the position in a route.
Update a feature in realtimeExample
Change an existing feature on your map in real-time by updating its data.
Use a fallback imageExample
Use a coalesce expression to display another image when a requested image is not available.
Use locally generated ideographsExample
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 placementExample
Use text-variable-anchor to allow high priority labels to shift position to stay on the map.
View local GeoJSON (experimental)Example
View local GeoJSON with experimental File System Access API.
Visualize population densityExample
Use a variable binding expression to calculate and display population density.
Weather Cloud coverage displayed from radar dataExample
Visualize weather cloud coverage displayed from radar data from MapTiler Cloud Weather Radar dataset and get the radar at the point under the cursor.
Weather+ pressure isolines layerExample
Visualize weather pressure isolines layer from MapTiler Cloud Weather Plus Pressure dataset.
Weather+ pressure isolines layer animatedExample
Visualize weather pressure isolines layer from MapTiler Cloud Weather Plus Pressure dataset and get the pressure at the point under the cursor.
Weather+ pressure isolines layer labelsExample
Visualize weather pressure isolines layer from MapTiler Cloud Weather Plus Pressure dataset and display the Hi/Lo pressure extreme values.
Weather+ wind arrow layerExample
Visualize weather wind arrow layer from MapTiler Cloud Weather Plus Wind dataset .
Weather+ wind arrow layer animatedExample
Visualize weather wind arrow layer from MapTiler Cloud Weather Plus Wind dataset and get the wind speed at the point under the cursor.
Weather layer switcherExample
Switch the display of the different weather layers in the MapTiler Cloud Weather data set and get the data information at the point under the cursor.
Weather layer custom color blind rampExample
Visualize weather temperature layer from MapTiler Cloud Weather Temperature dataset with a custom color blind ramp and get the temperature at the point under the cursor.
Weather precipitation layerExample
Visualize weather precipitation layer from MapTiler Cloud Weather Precipitation dataset and get the precipitation at the point under the cursor.
Weather pressure layerExample
Visualize weather pressure layer from MapTiler Cloud Weather Pressure dataset and get the pressure at the point under the cursor.
Weather radar layerExample
Visualize weather radar layer from MapTiler Cloud Weather Radar dataset and get the radar at the point under the cursor.
Weather temperature layerExample
Visualize weather temperature layer from MapTiler Cloud Weather Temperature dataset and get the temperature at the point under the cursor.
Weather wind and temperature layerExample
Visualize weather wind and temperature layer from MapTiler Cloud Weather Wind dataset and get the wind speed and temperature at the point under the cursor.
Weather wind layerExample
Visualize weather wind layer from MapTiler Cloud Weather Wind dataset and get the wind speed at the point under the cursor.