---
title: "Use Leaflet JS with Vector Tiles | Leaflet"
description: "Display MapTiler vector tiles in Leaflet using maptilersdk plugin."
---

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

# Use Leaflet JS with Vector Tiles

Leaflet doesn’t support vector tiles by default. You can use one of the available plugins to display vector tiles, but the best and easiest way is by using the [leaflet-maptilersdk](https://github.com/maptiler/leaflet-maptilersdk) plugin. Simply use the code below the map.

Use your MapTiler vector tiles basemaps in Leaflet using the [**L.maptiler.maptilerLayer**](https://github.com/maptiler/leaflet-maptilersdk). For basemaps, you can also use traditional [raster tiles](https://docs.maptiler.com/leaflet/examples/raster-tiles-in-leaflet-js/) without the need to use any plugins.

Using the **L.maptiler.maptilerLayer** you have:

-   All the power of [MapTiler SDK JS](https://docs.maptiler.com/sdk-js/) to use vector tile layers (for data overlays) in your applications without any kind of limitation (show millions of geometries, choropleth maps, etc).
-   Multi-lingual vector tiles basemaps for Leaflet using the MapTiler SDK.
-   Use any of the many [professional looking basemaps](https://docs.maptiler.com/sdk-js/api/map-styles/) created by MapTiler or use a map with your own custom basemap.
-   Easily change the language of your map without having to create a new basemap.
-   Locate the user and center the map accordingly.

```html
<!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
      <title>Vector Tiles in Leaflet JS</title>
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
      <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
      <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
      <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css" rel="stylesheet" />
      <script src="https://cdn.maptiler.com/leaflet-maptilersdk/v4.1.0/leaflet-maptilersdk.umd.min.js"></script>
      <style>
        #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
      </style>
    </head>
    <body>
      <div id="map"></div>
      <script>
        const key = 'YOUR_MAPTILER_API_KEY_HERE';
        const map = L.map('map').setView([0, 0], 1);
        const mtLayer = L.maptiler.maptilerLayer({
          apiKey: key,
          style: L.maptiler.MapStyle.STREETS, //optional
        }).addTo(map);
      </script>
    </body>
  </html>
```

1.  Install the npm package.
    
    ```bash
    npm install --save leaflet @maptiler/leaflet-maptilersdk
    ```
    
2.  Include the CSS file.
    
    If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [`<link>`](#) in the head of the document via the CDN
    
    ```js
    import 'leaflet/dist/leaflet.css';
    ```
    
    ```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';
    
          // Import the Leaflet MapTiler Plugin
          import "@maptiler/leaflet-maptilersdk";
          
          const map = L.map('map', {
            center: L.latLng(49.2125578, 16.62662018),
            zoom: 14,
          });
    
          // Create a MapTiler Layer inside Leaflet
          const mtLayer = new L.maptiler.maptilerLayer({
            // Get your free API key at https://cloud.maptiler.com
            apiKey: "YOUR_MAPTILER_API_KEY_HERE",
          }).addTo(map);
    ```
    

If you would rather stick to more modern API design and do not feel like using the `L` object, we got you covered:

```js
import { MaptilerLayer } from "@maptiler/leaflet-maptilersdk";

  // ...

  const mtLayer = new MaptilerLayer( options );
```

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/developer/credentials/api-key/#secure-key) before you publish it.

## Learn more

Check out the tutorial [How to create a Vector Tiles map with Leaflet, NPM, MapTiler 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 @maptiler/leaflet-maptilersdk
    ```
    
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';
    
          // Import the Leaflet MapTiler Plugin
          import "@maptiler/leaflet-maptilersdk";
    
          const map = L.map('map', {
            center: L.latLng(49.2125578, 16.62662018),
            zoom: 14,
          });
    
          // Create a MapTiler Layer inside Leaflet
          const mtLayer = new L.maptiler.maptilerLayer({
            // Get your free API key at https://cloud.maptiler.com
            apiKey: "YOUR_MAPTILER_API_KEY_HERE",
          }).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/developer/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.

Vector maps are made of mathematical interpretations of geometric features such as points, curves or polygons. Vector tiles are rendered on the client’s side with a style, which is a small text file that defines how certain map elements look and how they are displayed. Read more about Vector tiles in this article [What are vector tiles and why you should care?](https://www.maptiler.com/news/2019/02/what-are-vector-tiles-and-why-you-should-care/)

If you do not know the difference between Raster and Vector or you have doubts about which format is better for you, consult the article [Raster vs Vector Map Tiles: What Is the Difference Between the Two Data Types?](https://docs.maptiler.com/guides/how-maps-work/raster-vector-tiles/)

## Related examples

### [Plotting millions of points in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-point/)

Examples

Display millions of points efficiently in Leaflet using maptilersdk.

### [Display thousands of lines in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-polyline/)

Examples

Display thousands of lines efficiently in Leaflet using maptilersdk.

### [Display thousands of polygons in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-polygon/)

Examples

Display thousands of polygons efficiently in Leaflet using maptilersdk.

### [How to create a heatmap layer in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-heatmap/)

Examples

Create heatmap layers in Leaflet using the maptilersdk plugin.