How to create a map with the Leaflet JavaScript library

Copy & paste sample source code

Creating a map with the Leaflet JavaScript library is straightforward on MapTiler Cloud. Go to MapTiler Cloud Maps, create a free account, select the map you like, go to the Raster tiles section and click on the Leaflet. Here just copy the sample source code and paste it into your HTML file (your key is included).

Or just copy the code below and replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
  <style>
    #map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div id="map">
    <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img
        src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
  </div>
  <p><a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a
      href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a></p>
  <script>
    var map = L.map('map').setView([0, 0], 1);
    L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=YOUR_MAPTILER_API_KEY_HERE', {
      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);  
  </script>
</body>

</html>

Write your code from scratch

You can also write your code from scratch. The following video will teach you how:

Create Circles, Polygons, and PopUps

The map can be further manipulated. You can, for instance, add the position of your shop or mark a trail of a race:

Change Marker Icon, and Add Shadow

Multiple Icon Definition Using JavaScript

Add GeoJSON

Add scale and watermark