JavaScript Maps API library Documentation
At MapTiler we are committed to web maps based on vector tiles, we use MapLibre GL JS as the main map library. Using MapLibre GL JS with vector tiles from MapTiler Cloud gives you a beautiful and smooth map browsing experience.
MapLibre GL JS (open-source fork of Mapbox GL JS) is a web mapping library based on WebGL. Using MapLibre GL JS with vector tiles from MapTiler Cloud gives you a beautiful and smooth experience from map browsing. MapLibre GL JS loads vector tiles and style from hosting and draws a map in the browser. This solution requires WebGL support in a browser.
Get Started with JavaScript Maps API

Get your FREE API key and follow a simple tutorial to implement your first web application using JavaScript Maps API and MapTiler Cloud.
Tutorials
-
How to use the JavaScript Maps API
-
Display simple Marker on the Map
-
Show Polygon Data from GeoJSON on the Map
-
Show Line Data from GeoJSON on the Map
-
Show Point Data from GeoJSON on the Map
-
Show Raster Image on the Map
-
Show MultiGeometry data from GeoJSON on the Map
-
How to display your custom map on the web page.
-
Display a 3D terrain map
-
How to create a choropleth Map from GeoJSON
-
How to search places (geocoding)
-
How to search places by coordinates (reverse geocoding)
-
How to search places using the geocoder component
-
How to use and filter data for MapTiler Countries
-
How to create a countries map with your own data
-
How to draw an elevation profile along a path
-
How to center map based on visitor's location
-
How to display disputed borders based on visitor's location
-
How to change the map labels language based on visitor's location
-
How to display the cookies consent bar according to the visitor's location
-
How to display a scale control
-
How to display a style switcher control
-
How to display a minimap or overview map control to aid the map navigation
-
How to display a map legend control to toggle layers visualization
-
How to display an interactive choropleth map legend control
Examples
-
Create a hillshade layer
-
View a fullscreen map
-
Customize camera animations
-
Set pitch and bearing
-
Add a custom style layer
-
Disable map rotation
-
Measure distances
-
Change the case of labels
-
Add a pattern to a polygon
-
Display buildings in 3D
-
Show drawn polygon area
-
Change a map's language
-
Animate a point along a route
-
Display a popup
-
Jump to a series of locations
-
Use locally generated ideographs
-
Render world copies
-
Display a popup on hover
-
Fly to a location based on scroll position
-
Animate a marker
-
Offset the vanishing point using padding
-
Fit to the bounds of a LineString
-
Fly to a location
-
Animate a line
-
Draw GeoJSON points
-
Generate and add a missing icon to the map
-
Check if MapLibre GL JS is supported
-
Center the map on a clicked symbol
-
View local GeoJSON (experimental)
-
Create a gradient line using an expression
-
Get coordinates of the mouse pointer
-
Display map navigation controls
-
Display a satellite map
-
Add a third party vector tile source
-
Add a WMS source
-
Add a new layer below labels
-
Display HTML clusters with custom properties
-
Add a canvas source
-
Show polygon information on click
-
Update a feature in realtime
-
Create a heatmap layer
-
Create a draggable Marker
-
Add a vector tile source
-
Display a non-interactive map
-
Animate map camera around a point
-
Change building color based on zoom level
-
Create a hover effect
-
Create a polygon extrusion
-
Fit a map to a bounding box
-
Animate a series of images
-
Attach a popup to a marker instance
-
Change the default position for attribution
-
Style lines with a data-driven property
-
Add a stretchable image to the map
-
Add a video
-
Display and style rich text labels
-
Add a 3D model
-
Create and style clusters
-
Add multiple geometries from one GeoJSON source
-
Variable label placement
-
Create a time slider
-
Add a generated icon to the map
-
Display line that crosses 180th meridian
-
Toggle interactions
-
Filter symbols by text input
-
Get features under the mouse pointer
-
Restrict map panning to an area
-
Slowly fly to a location
-
Filter symbols by toggling a list
-
Add support for right-to-left scripts
-
Visualize population density
-
Disable scroll zoom
-
Display a popup on click
-
Locate the user
-
Add a raster tile source
-
Change a layer's color with buttons
-
Extrude polygons for 3D indoor mapping
-
Add live realtime data
-
Create a draggable point
-
Add custom icons with Markers
-
Navigate the map with game-like controls
-
Use a fallback image
-
Animate a point
-
Add an animated icon to the map
-
View local GeoJSON
API Reference
JavaScript Maps API
Tutorials
- Get Started
- Learn the basics
- Display Marker
- GeoJSON Polygon Layer
- GeoJSON Line Layer
- GeoJSON Point Layer
- Raster Layer
- GeoJSON MultiGeom Layer
- Custom Map
- 3D Map
- Choropleth GeoJSON
- Geocoding
- Reverse Geocoding
- Geocoder component
- Countries filter
- Countries with data
- Elevation profile
- Center map by IP
- Disputed borders by IP
- Map language by IP
- Cookie consent by IP
- Scale control
- Style switcher
- Minimap control
- Legend control
- Choropleth Legend
Examples
- Add a 3D model
- Add a WMS source
- Add a canvas source
- Add a custom style layer
- Add a generated icon to the map
- Add a new layer below labels
- Add a pattern to a polygon
- Add a raster tile source
- Add a stretchable image to the map
- Add a third party vector tile source
- Add a vector tile source
- Add a video
- Add an animated icon to the map
- Add custom icons with Markers
- Add live realtime data
- Add multiple geometries from one GeoJSON source
- Add support for right-to-left scripts
- Animate a line
- Animate a marker
- Animate a point
- Animate a point along a route
- Animate a series of images
- Animate map camera around a point
- Attach a popup to a marker instance
- Center the map on a clicked symbol
- Change a layer's color with buttons
- Change a map's language
- Change building color based on zoom level
- Change the case of labels
- Change the default position for attribution
- Check if MapLibre GL JS is supported
- Create a draggable Marker
- Create a draggable point
- Create a gradient line using an expression
- Heatmap layer
- Hillshade layer
- Create a hover effect
- Polygon extrusion
- Create a time slider
- Style clusters
- Customize camera animations
- Disable map rotation
- Disable scroll zoom
- Display HTML clusters with custom properties
- Display a non-interactive map
- Display a popup
- Display a popup on click
- Display a popup on hover
- Display a satellite map
- Display and style rich text labels
- Display buildings in 3D
- Display line that crosses 180th meridian
- Display map navigation controls
- Draw GeoJSON points
- Extrude polygons for 3D indoor mapping
- Filter symbols by text input
- Filter symbols by toggling a list
- Fit a map to a bounding box
- Fit to the bounds of a LineString
- Fly to a location
- Fly to a location based on scroll position
- Generate and add a missing icon to the map
- Get coordinates of the mouse pointer
- Get features under the mouse pointer
- Jump to a series of locations
- Locate the user
- Measure distances
- Navigate the map with game-like controls
- Offset the vanishing point using padding
- Render world copies
- Restrict map panning to an area
- Set pitch and bearing
- Show drawn polygon area
- Show polygon information on click
- Slowly fly to a location
- Style lines with a data-driven property
- Toggle interactions
- Update a feature in realtime
- Use a fallback image
- Use locally generated ideographs
- Variable label placement
- View a fullscreen map
- View local GeoJSON
- View local GeoJSON (experimental)
- Visualize population density