Get started with Leaflet JavaScript library. Copy the code to get your first map online.
How to use Leaflet: This tutorial shows how to create a Leaflet map and display it on a web page using MapTiler Cloud.
Learn how to display vector tiles in Leaflet JavaScript library. You will learn what is the difference beween raster and vector tiles and how to use the leaflet-maptilersdk plugin.
Display a Marker on the Map: this tutorial shows how to add the default Marker to the map using Leaflet JS.
How to use Leaflet with React and MapTiler Vector Tiles: this tutorial shows how to install Leaflet from NPM and create a map and display it on a React application.
How to use Leaflet with TypeScript: this tutorial shows how to install Leaflet from NPM and create a map and display it on a TypeScript application.
How to use Leaflet with NPM: this tutorial shows how to install Leaflet from NPM and create a map and display it on a web page.
This tutorial shows how to search for places using the geocoding control with Leaflet
This tutorial shows how to add a styled GeoJSON overlay to the map using Leaflet, display a popup on click, and create a map legend.
Show Polygon Data from GeoJSON on the Map: this tutorial shows how to add a GeoJSON overlay to the map using Leaflet JS.
Learn how to display raster tiles in Leaflet JavaScript library. There are both examples for both raster tiles XYZ (Mercator XYZ) and raster tiles TileJSON (via plugin).
Show Raster Image on the Map: this tutorial shows how to add a raster image overlay to the map using Leaflet JS.
How to display your custom map on a web page: this tutorial demonstrates how to display a custom map from MapTiler Cloud on a web page using Leaflet JS.
How to create a Vite application with Leaflet and MapTiler Vector Tiles in vanilla JS: this tutorial shows how to install Leaflet from NPM and create a map and display it on a Vite application.
How to use Leaflet with Vite and MapTiler Vector Tiles in vanilla JS: this tutorial shows how to install Leaflet from NPM and create a map and display it on a Vite application.
How to use Leaflet with Next.js and MapTiler Vector Tiles: this tutorial shows how to install Leaflet from NPM and create a map and display it on a Next.js application.
Learn how to display thousands of lines in Leaflet JavaScript library using the leaflet-maptilersdk plugin.
Learn how to display thousands of polygons in Leaflet JavaScript library using the leaflet-maptilersdk plugin.
Learn how to create a heatmap layer in Leaflet JavaScript library using the leaflet-maptilersdk plugin.
Learn how to display thousands or millions of points in Leaflet JavaScript library using the leaflet-maptilersdk plugin.
This tutorial shows how to use the geolocate control with Leaflet to get the user’s location using the GPS or the browser location
This tutorial shows how to deal with map events in Leaflet. Discover how to incorporate interactivity and responsiveness into your map applications.
This tutorial shows how to change the default map labels language.
This tutorial shows how to change the basemap style. Explore different basemap styles to enhance the aesthetic and communication of your maps.
This tutorial shows how to visualize points as cluster maps with Leaflet JS. Learn how to group data points into clusters for effective data analysis and visualization.
This tutorial shows how to make a map with pins using Leaflet JS.
This tutorial shows how to detect a retina/HiDPI display to utilize the high resolution in the map images.
This tutorial shows how to define your custom icons for markers using Leaflet JS.
Please tell us what's unclear or missing on this page, so we can improve it for you.
Thank you for your feedback!
