Create a map with the TypeScript-based SDK. Take advantage of code completion, type safety, and backward compatibility.
This tutorial shows how to create a map and display it on a web page using MapTiler Cloud.
This tutorial shows how to add a default marker to the map.
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 add a GeoJSON polygon 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 line 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 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 search for places using the geocoding control.
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 build a web mapping application that allows us to draw a path and retrieve the elevation profile along that path.
This tutorial shows how to center map based on the visitor’s country bounds using the MapTiler Geolocation API.
This tutorial shows how to center map based on the visitor's location 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 change the default map labels language.
This tutorial shows how to automatically change the map labels language based on 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 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 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 migrate/switch from Mapbox to MapTiler.
This tutorial shows how to display an interactive choropleth map legend control.
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 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.
Initialize 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 realtime 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.
Check for SDK JS browser support.
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 USA schools by location using a heatmap layer.
Use events and feature states to create a per feature hover effect.
Visualize 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.
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.
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.
Draw points from a GeoJSON collection to a map.
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.
Scroll down through the story and the map will fly to the chapter's location.
Dynamically generate a missing icon at runtime and add it to the map.
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.
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.
Click points on a map to create lines that measure distanced using turf.length.
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.
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, show a popup containing more information.
Use flyTo with flyOptions to slowly zoom to a location.
Create a visualization with a data expression for line-color.
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.
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 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.
