# Using with Leaflet

[Leaflet](<https://github.com/Leaflet/Leaflet>) is the leading open-source JavaScript library for mobile-friendly interactive maps.

You can add vector tiles using [`Leaflet.VectorGrid`](<https://github.com/Leaflet/Leaflet.VectorGrid>) plugin. You must initialize a [`VectorGrid.Protobuf`](<https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#vectorgrid-protobuf>) with a URL template, just like in `L.TileLayers`. The difference is that you should define the styling for all the features.

```js
L.vectorGrid
  .protobuf('http://localhost:3000/points/{z}/{x}/{y}', {
    vectorTileLayerStyles: {
      'points': {
        color: 'red',
        fill: true
      }
    }
  })
  .addTo(map);
```

> [!WARNING]
>
> Style serving is specific to [maplibre](<https://maplibre.org/martin/using-with-maplibre/index.md>) or [deck.gl](<https://maplibre.org/martin/using-with-deck-gl/index.md>).