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.

Get Started

Tutorials

• Learn the basics
  How to use the JavaScript Maps API
• Display Marker
  Display simple Marker on the Map
• GeoJSON Polygon Layer
  Show Polygon Data from GeoJSON on the Map
• GeoJSON Line Layer
  Show Line Data from GeoJSON on the Map
• GeoJSON Point Layer
  Show Point Data from GeoJSON on the Map
• Raster Layer
  Show Raster Image on the Map
• GeoJSON MultiGeom Layer
  Show MultiGeometry data from GeoJSON on the Map
• Custom Map
  How to display your custom map on the web page.
• 3D Map
  Display a 3D terrain map
• Choropleth GeoJSON
  How to create a choropleth Map from GeoJSON
• Geocoding
  How to search places (geocoding)
• Reverse Geocoding
  How to search places by coordinates (reverse geocoding)
• Geocoder component
  How to search places using the geocoder component
• Countries filter
  How to use and filter data for MapTiler Countries
• Countries with data
  How to create a countries map with your own data
• Elevation profile
  How to draw an elevation profile along a path
• Center map by IP
  How to center map based on visitor's location
• Disputed borders by IP
  How to display disputed borders based on visitor's location
• Map language by IP
  How to change the map labels language based on visitor's location
• Cookie consent by IP
  How to display the cookies consent bar according to the visitor's location
• Scale control
  How to display a scale control
• Style switcher
  How to display a style switcher control
• Minimap control
  How to display a minimap or overview map control to aid the map navigation
• Legend control
  How to display a map legend control to toggle layers visualization
• Choropleth Legend
  How to display an interactive choropleth map legend control

Examples

• Hillshade layer
  Create a hillshade layer
• View a fullscreen map
  View a fullscreen map
• Customize camera animations
  Customize camera animations
• Set pitch and bearing
  Set pitch and bearing
• Add a custom style layer
  Add a custom style layer
• Disable map rotation
  Disable map rotation
• Measure distances
  Measure distances
• Change the case of labels
  Change the case of labels
• Add a pattern to a polygon
  Add a pattern to a polygon
• Display buildings in 3D
  Display buildings in 3D
• Show drawn polygon area
  Show drawn polygon area
• Change a map's language
  Change a map's language
• Animate a point along a route
  Animate a point along a route
• Display a popup
  Display a popup
• Jump to a series of locations
  Jump to a series of locations
• Use locally generated ideographs
  Use locally generated ideographs
• Render world copies
  Render world copies
• Display a popup on hover
  Display a popup on hover
• Fly to a location based on scroll position
  Fly to a location based on scroll position
• Animate a marker
  Animate a marker
• Offset the vanishing point using padding
  Offset the vanishing point using padding
• Fit to the bounds of a LineString
  Fit to the bounds of a LineString
• Fly to a location
  Fly to a location
• Animate a line
  Animate a line
• Draw GeoJSON points
  Draw GeoJSON points
• Generate and add a missing icon to the map
  Generate and add a missing icon to the map
• Check if MapLibre GL JS is supported
  Check if MapLibre GL JS is supported
• Center the map on a clicked symbol
  Center the map on a clicked symbol
• View local GeoJSON (experimental)
  View local GeoJSON (experimental)
• Create a gradient line using an expression
  Create a gradient line using an expression
• Get coordinates of the mouse pointer
  Get coordinates of the mouse pointer
• Display map navigation controls
  Display map navigation controls
• Display a satellite map
  Display a satellite map
• Add a third party vector tile source
  Add a third party vector tile source
• Add a WMS source
  Add a WMS source
• Add a new layer below labels
  Add a new layer below labels
• Display HTML clusters with custom properties
  Display HTML clusters with custom properties
• Add a canvas source
  Add a canvas source
• Show polygon information on click
  Show polygon information on click
• Update a feature in realtime
  Update a feature in realtime
• Heatmap layer
  Create a heatmap layer
• Create a draggable Marker
  Create a draggable Marker
• Add a vector tile source
  Add a vector tile source
• Display a non-interactive map
  Display a non-interactive map
• Animate map camera around a point
  Animate map camera around a point
• Change building color based on zoom level
  Change building color based on zoom level
• Create a hover effect
  Create a hover effect
• Polygon extrusion
  Create a polygon extrusion
• Fit a map to a bounding box
  Fit a map to a bounding box
• Animate a series of images
  Animate a series of images
• Attach a popup to a marker instance
  Attach a popup to a marker instance
• Change the default position for attribution
  Change the default position for attribution
• Style lines with a data-driven property
  Style lines with a data-driven property
• Add a stretchable image to the map
  Add a stretchable image to the map
• Add a video
  Add a video
• Display and style rich text labels
  Display and style rich text labels
• Add a 3D model
  Add a 3D model
• Style clusters
  Create and style clusters
• Add multiple geometries from one GeoJSON source
  Add multiple geometries from one GeoJSON source
• Variable label placement
  Variable label placement
• Create a time slider
  Create a time slider
• Add a generated icon to the map
  Add a generated icon to the map
• Display line that crosses 180th meridian
  Display line that crosses 180th meridian
• Toggle interactions
  Toggle interactions
• Filter symbols by text input
  Filter symbols by text input
• Get features under the mouse pointer
  Get features under the mouse pointer
• Restrict map panning to an area
  Restrict map panning to an area
• Slowly fly to a location
  Slowly fly to a location
• Filter symbols by toggling a list
  Filter symbols by toggling a list
• Add support for right-to-left scripts
  Add support for right-to-left scripts
• Visualize population density
  Visualize population density
• Disable scroll zoom
  Disable scroll zoom
• Display a popup on click
  Display a popup on click
• Locate the user
  Locate the user
• Add a raster tile source
  Add a raster tile source
• Change a layer's color with buttons
  Change a layer's color with buttons
• Extrude polygons for 3D indoor mapping
  Extrude polygons for 3D indoor mapping
• Add live realtime data
  Add live realtime data
• Create a draggable point
  Create a draggable point
• Add custom icons with Markers
  Add custom icons with Markers
• Navigate the map with game-like controls
  Navigate the map with game-like controls
• Use a fallback image
  Use a fallback image
• Animate a point
  Animate a point
• Add an animated icon to the map
  Add an animated icon to the map
• View local GeoJSON
  View local GeoJSON

API Reference

• Map
• Properties and options
• Markers and controls
• Geometry and geography
• User interaction handlers
• Sources
• Events