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.

  1. Install the npm package.

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

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

    Including the CSS file using a <link> in the head of the document via the CDN is the easiest way.
  5. 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 ='map', {
       center: L.latLng(49.2125578, 16.62662018),
       zoom: 14,
     const key = 'YOUR_MAPTILER_API_KEY_HERE';
     L.tileLayer(`{z}/{x}/{y}.png?key=${key}`,{ //style URL
       tileSize: 512,
       zoomOffset: -1,
       minZoom: 1,
       attribution: "\u003ca href=\"\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
       crossOrigin: true
  6. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Learn more

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

Related examples