---
title: "How to use Leaflet with NPM | Leaflet"
description: "Install Leaflet via NPM to create and display web maps."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# 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](https://parceljs.org/), [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Turbopack](https://turbo.build/pack), or anything else.

1.  Install the npm package.

```bash
npm install --save leaflet
```

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

```css
body { 
  margin: 0;
  padding: 0;
}

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

1.  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.
    
    ```html
    <div id="map"></div>
    ```
    
2.  Include the CSS file.
    
    If you have a bundler that can handle CSS, you can import the CSS from leaflet/dist/leaflet.css.
    
    ```js
    import '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.
    
    ```html
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    ```
    
3.  Finally, load the map with the style. Include the following code in your JavaScript.
    

```js
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);
```

1.  Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.

### Complete source code

```bash
npm install --save leaflet
```

#### main.js

```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

```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

```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](#).

1.  Install bundler and build tools. This tutorial will use Parcel because it works out of the box without any additional configuration.
    
    ```bash
    npm i -D parcel-bundler
    ```
    
2.  Update the package.json scripts. Create the `dev` and `build` scripts.
    
    ```json
    "scripts": {
          "dev": "parcel src/index.html",
          "build": "parcel build src/index.html"
        },
    ```
    
3.  Install the Leaflet npm package.
    
    ```bash
    npm install --save leaflet
    ```
    
4.  Create a `src` folder and inside this forder create 3 files: `index.html`, `app.js`, and `style.css`.
5.  Copy the following code, paste it into `index.html` file. The `<div id="map">` will be the container where the map will be loaded.
    
    ```html
    <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Leaflet with NPM</title>
          <link rel="stylesheet" href="./style.css">
          <script src="./app.js" defer></script>
        </head>
        <body>
          <div id="map"></div>
        </body>
        </html>
    ```
    
6.  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.
    
    ```css
    body { margin: 0; padding: 0; }
    
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    ```
    
7.  Include the following code in your `app.ts` file.
    
    ```js
    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);
    ```
    
8.  Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
    
9.  Running the dev server. To see the map run the local server. Open a terminal and write.
    
    ```bash
    npm run dev
    ```
    
10.  Now you can see your application opening `http://localhost:1234` in your browser.

## Related examples

### [Leaflet with React](https://docs.maptiler.com/leaflet/examples/react/)

Tutorials

Integrate Leaflet and MapTiler Vector Tiles in React applications.

### [Leaflet with TypeScript](https://docs.maptiler.com/leaflet/examples/ts-get-started/)

Tutorials

Install Leaflet via NPM to display maps in TypeScript apps.

### [Leaflet with Next.js](https://docs.maptiler.com/leaflet/examples/nextjs/)

Tutorials

Integrate Leaflet and MapTiler Vector Tiles in Next.js applications.

### [Leaflet with Vite (vanilla JS)](https://docs.maptiler.com/leaflet/examples/vite-vanilla-js-default/)

Tutorials

Integrate Leaflet and MapTiler Vector Tiles in Vite vanilla JS.