How to use Leaflet
This tutorial shows how to create a map and display it on a web page using MapTiler Cloud.
-
Create a basic HTML file.
-
Include the Leaflet JavaScript and CSS files in the
<head>
of your HTML file. -
Create a
<div>
element with a certain id where you want your map to be.Add
<div>
tag into your page. This div will be the container where the map will be loaded. -
The div must have non-zero height.
body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }
-
Finally, load the map with the style
const key = 'YOUR_MAPTILER_API_KEY_HERE'; const map = L.map('map').setView([0, 0], 2); L.tileLayer(`https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=${key}`,{ tileSize: 512, zoomOffset: -1, minZoom: 1, attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", crossOrigin: true }).addTo(map);
-
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key.
View complete source code on GitHub
Learn more
Leaflet doesn’t support vector tiles by default. For basemaps, it is recommended to use it with traditional raster tiles (Mercator XYZ).
There are two ways to use MapTiler maps in Leaflet:
If you do not know the difference between Raster and Vector or you have doubts about which format is better for you, consult the article Raster vs Vector Map Tiles: What Is the Difference Between the Two Data Types?
Leaflet
Examples
- Get started
- Learn the basics
- Vector Tiles in Leaflet
- Display Marker
- GeoJSON Layer
- Raster Layer
- Custom Map
- Choropleth GeoJSON
- Raster tiles
- Geocoding control
- Leaflet with NPM
- Leaflet with TypeScript
- Geolocate control
- Map events
- Multi-lingual map
- Built-in basemap styles
- Points as cluster
- Marker with custom icon