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.

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 install --save @maptiler/sdk @maptiler/leaflet-maptilersdk leaflet

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Plotting thousands or millions of points in Leaflet | 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

#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

<!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.1.0/maptiler-sdk.umd.min.js"></script>
    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.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 map = L.map('map').setView([36.69, -92.570801], 5);
      const mtLayer = L.maptiler.maptilerLayer({
        apiKey: 'YOUR_MAPTILER_API_KEY_HERE',
        style: L.maptiler.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: maptilersdk.ColorRampCollection.PORTLAND.scale(200, 2000).resample("ease-out-sqrt"),
          pointOpacity: 0.8,
          minPointRadius: 6,
          maxPointRadius: 30,
        });

      });
    </script>
  </body>
</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.