---
title: "Display thousands of polygons in Leaflet | Leaflet"
description: "Display thousands of polygons efficiently in Leaflet using maptilersdk."
---
> 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.
# Display thousands of polygons in Leaflet
In this Leaflet JS example, you will learn how to handle thousands of polygons using the leaflet-maptilersdk plugin. Load large amounts of data into Leaflet without affecting the performance of your application.
This example shows how to add a polygon layer with a color ramp symbol that changes the fill color based on the map zoom level, with the help of the polygon layer helper. Download the [building’s sample data](https://docs.maptiler.com/sdk-js/assets/guixols.geojson).
### NPM module setup
```bash
npm install --save @maptiler/leaflet-maptilersdk leaflet
```
#### main.js
```js
import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const map = L.map('map').setView([41.782993,3.030553], 14);
const mtLayer = new MaptilerLayer({
apiKey: 'YOUR_MAPTILER_API_KEY_HERE',
style: MapStyle.DATAVIZ.LIGHT, // optional
}).addTo(map);
mtLayer.on("ready", () => {
// Leverage the MapTiler SDK layer helpers to easily add polyline / point / polygon / heatmap layers
mtLayer.addPolygon({
data: 'guixols.geojson',
fillColor: [
{zoom: 14, value: "#593895"},
{zoom: 15, value: "#761FE8"},
{zoom: 16, value: "#F1175D"},
{zoom: 17, value: "#FB3A1B"},
{zoom: 18, value: "#FBC935"},
{zoom: 19, value: "#FFAA01"},
],
outline: true,
outlineWidth: [
{zoom: 14, value: 0},
{zoom: 15, value: 1},
{zoom: 16, value: 2},
{zoom: 17, value: 3},
{zoom: 18, value: 4},
{zoom: 19, value: 5},
],
outlineColor: [
{zoom: 14, value: "#805CC2"},
{zoom: 16, value: "#E25041"},
{zoom: 18, value: "#FFD65F"},
],
outlinePosition: "inside",
});
});
```
#### index.html
```html
Display thousands of polygons in Leaflet | NPM example
```
#### style.css
```css
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
```
### Basic JavaScript setup
```html
Vector Tiles in Leaflet JS
```
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.
## Learn more
Check out the [Polygon Layer Helper](https://docs.maptiler.com/sdk-js/api/helpers/#polygon) documentation and look at the [Polygon Helper examples](https://docs.maptiler.com/sdk-js/examples/?q=polygon+helper) to see the visualization possibilities.
## Related examples
### [Display thousands of lines in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-polyline/)
Examples
Display thousands of lines efficiently in Leaflet using maptilersdk.
### [Choropleth GeoJSON](https://docs.maptiler.com/leaflet/examples/choropleth-geojson/)
Tutorials
Create a styled choropleth map using GeoJSON and Leaflet.
### [GeoJSON Layer](https://docs.maptiler.com/leaflet/examples/geojson-polygon/)
Tutorials
Add GeoJSON polygon overlays to Leaflet JS maps.
### [Plotting millions of points in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-point/)
Examples
Display millions of points efficiently in Leaflet using maptilersdk.