---
title: "Plotting thousands or millions of points in Leaflet | Leaflet"
description: "Display millions of points 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.
# Plotting thousands or millions of points in Leaflet
Learn how to handle thousands or millions of location points with Leaflet JavaScript library using the leaflet-maptilersdk plugin. Download the [Public School sample data](https://docs.maptiler.com/sdk-js/assets/Public_School_Characteristics_2020-21_no_prop.geojson).
In this Leaflet JS example, the size and color of points are scaled by the number of students in each school. You can load millions of points into Leaflet without affecting the performance of your application.
### NPM module setup
```bash
npm install --save @maptiler/sdk @maptiler/leaflet-maptilersdk leaflet
```
#### main.js
```js
import { ColorRampCollection } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const map = L.map('map').setView([36.69, -92.570801], 5);
const mtLayer = new MaptilerLayer({
apiKey: 'YOUR_MAPTILER_API_KEY_HERE',
style: MapStyle.DATAVIZ.DARK, // optional
}).addTo(map);
mtLayer.on("ready", () => {
// Leverage the MapTiler SDK layer helpers to easily add polyline / point / polygon / heatmap layers
mtLayer.addPoint({
data: 'Public_School_Characteristics_2020-21_no_prop.geojson',
property: "students",
pointColor: ColorRampCollection.PORTLAND.scale(200, 2000).resample("ease-out-sqrt"),
pointOpacity: 0.8,
minPointRadius: 6,
maxPointRadius: 30,
});
});
```
#### index.html
```html
Plotting thousands or millions of points 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 [Point Layer Helper](https://docs.maptiler.com/sdk-js/api/helpers/#point) documentation and look at the [Point Helper examples](https://docs.maptiler.com/sdk-js/examples/?q=point+helper) to see the visualization possibilities.
Look at the [Visualize points as cluster maps in Leaflet](https://docs.maptiler.com/leaflet/examples/cluster/) example.
## 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.
### [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.
### [Points as cluster](https://docs.maptiler.com/leaflet/examples/cluster/)
Examples
Visualize data points as cluster maps using Leaflet JS.