How to use Leaflet

This tutorial shows how to create a map and display it on a web page using MapTiler Cloud data.

  1. Create a basic HTML file.

  2. Include the Leaflet JavaScript and CSS files in the <head> of your HTML file.

  3. 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.

  4. The div must have non-zero height.

    
 body {
   margin: 0;
   padding: 0;
 }

 #map {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
 }

  5. Finally, load the map with the style

    
 const key = 'YOUR_MAPTILER_API_KEY_HERE';
 const map = L.map('map').setView([49.2125578, 16.62662018], 14);
 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);

  6. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

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?