On this page

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. Go to MapTiler 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. Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to protect the key before you publish it!


<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@{{site.versions.leaflet}}/dist/leaflet.css"
    />
    <script src="https://unpkg.com/leaflet@{{site.versions.leaflet}}/dist/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>
      const map = L.map("map").setView([0, 0], 1);
      L.tileLayer(
        "https://api.maptiler.com/maps/{{site.map-styles.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:

How to create a map with the Leaflet JavaScript library

Copy & paste sample source code

Write your code from scratch

Create Circles, Polygons, and PopUps

Change Marker Icon, and Add Shadow

Multiple Icon Definition Using JavaScript

Add GeoJSON

Add scale and watermark

Was this helpful?