This is the easiest and fastest way to use your MapTiler maps in JavaScript.
This tutorial shows how to create a map and display it on a web page using MapTiler Cloud data.
This tutorial shows how to add a default Marker to the map.
This tutorial shows how to add a GeoJSON polygon 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 point overlay to the map.
This tutorial shows how to add a raster image overlay to the map.
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.
This tutorial demonstrates how to create a 3D map and display it on a web page using MapTiler Cloud data.
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 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 visitor's location usign 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 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 onm the map.
This tutorial shows how to display a minimap or overview map control in MapLibre GL 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.
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.
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 custom marker icons to your map.
Use realtime GeoJSON data streams to move a symbol on your map.
Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.
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 setLayoutProperty to switch languages dynamically.
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 MapLibre GL browser support.
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.
Use events and feature states to create a per feature hover effect.
Visualize earthquakes with a range slider.
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.
Add zoom and rotation controls to the map.
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.
Show mouse position on hover with pixel and latitude and longitude coordinates.
Use queryRenderedFeatures to show properties of hovered-over map elements.
Use the jumpTo function to showcase multiple locations.
Geolocate the user and then track their current location on the map using the GeolocateControl.
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.
Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.
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.
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.
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.
