How to use Leaflet with NPM

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.

You can pick from a large selection of bundlers and always find the best solution for your project. Whether you prefer Parcel, Webpack, Rollup, Turbopack, or anything else.

Install the npm package.

Create the map style. Add the map style to your stylesheet. The div must have non-zero height.


body { 
  margin: 0;
  padding: 0;
}

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

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.
Include the CSS file.

If you have a bundler that can handle CSS, you can import the CSS from leaflet/dist/leaflet.css.
Note

Including the CSS file using a <link> in the head of the document via the CDN is the easiest way.
```
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
```
Finally, load the map with the style. Include the following code in your JavaScript.


import L from "leaflet";

import 'leaflet/dist/leaflet.css';

const map = L.map('map', {
  center: L.latLng(49.2125578, 16.62662018),
  zoom: 14,
});

const key = 'YOUR_MAPTILER_API_KEY_HERE';

L.tileLayer(`https://api.maptiler.com/maps/streets-v4/{z}/{x}/{y}.png?key=${key}`,{ //style URL
  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 own API key. Make sure to secure the key before you publish it.

Complete source code


npm install --save leaflet

main.js

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const key = 'YOUR_MAPTILER_API_KEY_HERE';
  
const map = L.map('map').setView([0,0], 2);
const layer = L.tileLayer(`https://api.maptiler.com/maps/streets-v4/{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);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>How to use Leaflet with NPM | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

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

Learn more

Check out the tutorial How to create a map with Leaflet, NPM and Parcel.

Install bundler and build tools. This tutorial will use Parcel because it works out of the box without any additional configuration.
Update the package.json scripts. Create the dev and build scripts.
Install the Leaflet npm package.
Create a src folder and inside this forder create 3 files: index.html, app.js, and style.css.
Copy the following code, paste it into index.html file. The <div id="map"> will be the container where the map will be loaded.
Create the map container style. Add the map container style to you stylesheet style.css. The div must have non-zero height. In this case we are going to make a fullscreen map.
Include the following code in your app.ts file.
Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.
Running the dev server. To see the map run the local server. Open a terminal and write.
Now you can see your application opening http://localhost:1234 in your browser.