This tutorial shows how to create a map and display it on a web page using MapTiler Cloud.
Create a map with the TypeScript-based SDK. Take advantage of code completion, type safety, and backward compatibility.
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.
This tutorial shows how to change the map styles, you can switch between the built-in maps and your own custom maps.
This tutorial shows how to add a default marker to the map.
This tutorial shows how to add a GeoJSON line overlay to the map.
This tutorial shows how to add a GeoJSON point overlay to the map.
This tutorial shows how to add a GeoJSON polygon overlay to the map.
This tutorial shows how to add a GeoJSON MultiGeometry overlay to the map.
This tutorial shows how to add a raster image overlay to the map.
This example demonstrates how to display a custom map on the web page using MapTiler Cloud.
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 using the MapTiler Geocoding API.
This tutorial shows how to search places by coordinates (reverse geocoding).
This tutorial shows how to search for places using the geocoding control.
This tutorial shows how to disable the geolocate control to show the user's location using the GPS or the browser location.
This tutorial shows how to hide the navigation control (zoom and rotation controls to the map).
This tutorial shows how to use and filter data for MapTiler Countries and make a choropleth map.
This tutorial shows how to Join MapTiler Countries with your own custom data and make a choropleth map.
This tutorial shows how to center map based on the visitor's location using the MapTiler Geolocation API.
This tutorial shows how to center map based on the visitor’s country bounds using the MapTiler Geolocation API.
This tutorial shows how to automatically change disputed borders according to your map visitor's location usign the MapTiler Geolocation API.
This tutorial shows how to automatically change the map labels language based on visitor's location usign the MapTiler Geolocation API.
This tutorial shows how to change the default map labels language.
This tutorial shows how to display the cookies consent bar according to the visitor's location usign the MapTiler Geolocation API.
This tutorial demonstrates how to enable/disable the 3D terrain map programmatically using SDK functions.
This tutorial shows how to add and display a scale control on the map.
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.
This tutorial shows how to migrate/switch from Mapbox to MapTiler.
This tutorial shows how to migrate/switch from MapLibre to MapTiler.
Use a custom style layer with three.js to add a 3D model to the map.
Add a 3D model into a map with 3D terrain, use a custom style layer with three.js.
Use a custom style layer with babylon.js to add a 3D model to the map.
Add an external Web Map Service raster layer to the map using addSource's tiles option.
Add a canvas source to the map.
Use a custom style layer to render custom WebGL content.
Add an icon to the map that was generated at runtime.
Create a map in an HTML element with the MapTiler SDK JS.
Use the second argument of addLayer to add a layer below labels.
Use fill-pattern to draw a polygon from a repeating image pattern.
Add a third-party raster source to the map.
Use a stretchable image as a background for text.
Render vector data provided by Mapillary.
Add a vector source to a map.
Display a video on top of a satellite raster baselayer.
Add an animated icon to the map that was generated at runtime with the Canvas API.
Add an icon to the map from an external URL and use it in a symbol layer.
Add custom marker icons to your map.
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.
Use real-time GeoJSON data streams to move a symbol on your map.
Animate a line by updating a GeoJSON source on each frame.
Animate the position of a marker by updating its location on each frame.
Animate the position of a point by updating a GeoJSON source on each frame.
Use Turf to smoothly animate a point along the distance of a line.
Use a series of image sources to create an animation.
Animate the map camera around a point.
Attach a popup to a marker and display it on click.
Use events and flyTo to center the map on a symbol.
Use setPaintProperty to change a layer's fill color.
Use setLanguage function to switch languages dynamically.
This example shows how to change the map mode between light and dark based on the time of day.
Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.
Use the upcase and downcase expressions to change the case of labels.
Place attribution in the top-left position when initializing a map.
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.
Drag the marker to a new location on a map and populate its coordinates in a display.
Drag the point to a new location on a map and populate its coordinates in a display.
Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.
This example uses SDK JS to visualize the frequency of US schools by location using a heatmap layer.
Use events and feature states to create a per feature hover effect.
Scroll down through the story and the map will fly to the chapter's location.
Visualize and filter earthquakes with a range slider.
Use SDK JS built-in functions to visualize points as clusters.
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.
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 using AnimationOptions.
Prevent users from rotating a map.
Prevent scroll from zooming a map.
Extend clustering with HTML markers and custom property expressions.
Disable interactivity to create a static map.
Add a popup to the map.
When a user clicks a symbol, show a popup containing more information.
When a user hovers over a custom marker, show a popup containing more information.
Display a satellite raster baselayer.
Use the format expression to display country labels in both English and in the local language.
Use extrusions to display buildings' height in 3D.
Draw a line across the 180th meridian using a GeoJSON source.
To calculate distances on the map, simply click on different points to create lines that will measure the distances using turf.length.
Draw points from a GeoJSON collection to a map.
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 Cloud.
Create a 3D indoor map with the fill-extrude-height paint property.
Filter symbols by icon name by typing in a text input.
Filter a set of symbols based on a property value in the data.
Fit the map to a specific area, regardless of the pixel size of the map.
Get the bounds of a lineString.
Use flyTo to smoothly interpolate between locations.
Dynamically generate a missing icon at runtime and add it to the map.
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.
Limit the search results of the geocoding control to the specific area (bounding box).
Geocoding control search results filter by type and given higher priority for the results near the user's location.
Geocoding control search results closer to the specific geographical point, results near the provided point are ranked higher.
Geocoding control limit search results to specified country(ies).
Get POI information from MapTiler, OpenStreetMap (OSM), and Wikidata data by clicking on the map.
Show mouse position on hover with pixel and latitude and longitude coordinates.
Use queryRenderedFeatures to show properties of hovered-over map elements.
This example shows how to make a map with pins to display a point layer from a MapTiler Cloud Tileset using a custom PNG icon.
This example shows how to make a map with pins to display a point layer from a MapTiler Cloud Tileset using a custom SVG icon.
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 Cloud.
Share and retrieve a particular map view by simply copying and pasting the URL. Maintain the map view in the URL hash.
Specify the geocoding control language(s) that are used for the response text and weighting of the query results.
Use the Formatted type to display a rich text labels with texts and icons from images URL.
Use events and feature states to create a interactive choropleth map.
Use the jumpTo function to showcase multiple locations.
Use the keyboard's arrow keys to move around the map with game-like controls.
Show a detailed 3D map of the ocean seafloor and bathymetry.
Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.
Filter thousands of features in real time to quickly and easily find those with a property that meets your search criteria.
Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.
Prevent a map from being panned to a different place by setting maxBounds.
How to search for places by coordinates (reverse geocoding) using the user's location. Reverse geocoding transforms coordinates into place names.
This example shows how to change the map mode (light/dark) based on system settings.
Initialize a map with pitch and bearing camera options.
Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.
When a user clicks a polygon, display a popup containing more information.
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.
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.
Use flyTo with flyOptions to slowly zoom to a location.
Create a visualization with a data expression for line-color.
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.
This example shows how to change the map mode (light/dark) based on the position in a route.
Enable or disable UI handlers on a map.
Change an existing feature on your map in real-time by updating its data.
Use a coalesce expression to display another image when a requested image is not available.
Use the localIdeographFontFamily setting to speed up map load times by using locally available fonts instead of font data fetched from the server.
Use text-variable-anchor to allow high priority labels to shift position to stay on the map.
Toggle between the current view and fullscreen mode.
View local GeoJSON without server upload.
View local GeoJSON with experimental File System Access API.
Use a variable binding expression to calculate and display population density.
Visualize weather cloud coverage displayed from radar data from MapTiler Cloud Weather Radar dataset and get the radar at the point under the cursor.
Visualize weather pressure isolines layer from MapTiler Cloud Weather Plus Pressure dataset.
Visualize weather pressure isolines layer from MapTiler Cloud Weather Plus Pressure dataset and get the pressure at the point under the cursor.
Visualize weather pressure isolines layer from MapTiler Cloud Weather Plus Pressure dataset and display the Hi/Lo pressure extreme values.
Visualize weather wind arrow layer from MapTiler Cloud Weather Plus Wind dataset .
Visualize weather wind arrow layer from MapTiler Cloud Weather Plus Wind dataset and get the wind speed at the point under the cursor.
This example demonstrates using custom popups on top of a map because MapLibre's popups were originally quite limited in layout and style.
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.
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.
Visualize weather precipitation layer from MapTiler Cloud Weather Precipitation dataset and get the precipitation at the point under the cursor.
Visualize weather pressure layer from MapTiler Cloud Weather Pressure dataset and get the pressure at the point under the cursor.
Visualize weather radar layer from MapTiler Cloud Weather Radar dataset and get the radar at the point under the cursor.
Visualize weather temperature layer from MapTiler Cloud Weather Temperature dataset and get the temperature at the point under the cursor.
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.
Visualize weather wind layer from MapTiler Cloud Weather Wind dataset and get the wind speed at the point under the cursor.
Visualize weather wind layer from MapTiler Cloud Weather Wind dataset and get the wind speed and direction at the point under the cursor.
This example shows how to create a custom color ramp and use it to visualize a point layer.
This example shows how to add a heatmap layer to the map using the heatmap layer helper.
This example shows how to add a line layer to the map using the polyline layer helper.
This example shows how to add a point layer to the map using the point layer helper.
This example shows how to add a polygon layer to the map using the polygon layer helper.
This example shows how to add and a GPX line layer to the map using the polyline layer helper.
This example shows how to add and a KML line layer to the map using the polyline layer helper.
This example shows how to resample a color ramp and use it to visualize a point layer.
This example shows how to add a heatmap layer with a custom color ramp to the map using the heatmap layer helper.
This example shows how to add a heatmap layer with a custom zoom-ramping radius to the map using the heatmap layer helper
This example shows how to add a heatmap layer with a custom propertry-ramping radius to the map using the heatmap layer helper.
This example shows how to add a heatmap layer with a custom intensity to the map using the heatmap layer helper.
This example shows how set the min and max zoom of a heatmap layer using the heatmap layer helper.
This example shows how to add a heatmap layer with a custom opacity to the map using the heatmap layer helper.
This example shows how to add a heatmap layer with a property as weight to the map using the heatmap layer helper.
This example shows how to add a point layer cluster to the map using the point layer helper with the default values.
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.
This example shows how to add a point layer to the map using the point layer helper with zoom compensation disabled.
This example shows how to add a point layer with labels to the map using the point layer 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.
This example shows how to add a polygon layer with a fill pattern to the map using the polygon layer helper.
This example shows how to add and style a GeoJSON line layer to the map using the polyline layer helper.
This example shows how to add a heatmap layer without zoom compensation radius to the map using the heatmap layer 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.
This example shows how to add a line layer with a dash pattern symbol to the map using the polyline layer helper.
This example shows how to add a point layer with an outline to the map using the point layer 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.
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.
This example shows how to scale the radius of a point layer based on the map zoom level using the point layer 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.
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: 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. Compatible with WebXR or Apple Quick Look.
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: 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: 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.
