Display thousands of lines in Leaflet

Learn how to handle thousands of lines with Leaflet JavaScript library using the leaflet-maptilersdk plugin. No matter how many vertices your lines have, the performance of your application will not be affected.

This Leaflet example shows how to add a line layer with an outline glow blur symbol to the map using the polyline layer helper. Download the NY Subway lines sample data.


npm install --save @maptiler/leaflet-maptilersdk leaflet

main.js

import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const map = L.map('map').setView([40.7396, -73.8931], 11);
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.addPolyline({
    data: 'YOUR_MAPTILER_DATASET_ID_HERE',
    // --> Main line
    lineColor: "#fff",       // White
    lineOpacity: 0.7,        // Partially transparent to see the halo color through

    // --> Halo line
    outline: true,           // To create the electric halo, the outline is
    outlineColor: "#d83bff", // purple
    outlineOpacity: 0.5,     // half transparent
    outlineWidth: 15,        // quite large compared to the main line
    outlineBlur: 15,         // and blurry
  });

});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Display thousands of lines 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([40.7396, -73.8931], 11);
      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.addPolyline({
          data: 'YOUR_MAPTILER_DATASET_ID_HERE',
          // --> Main line
          lineColor: "#fff",       // White
          lineOpacity: 0.7,        // Partially transparent to see the halo color through

          // --> Halo line
          outline: true,           // To create the electric halo, the outline is
          outlineColor: "#d83bff", // purple
          outlineOpacity: 0.5,     // half transparent
          outlineWidth: 15,        // quite large compared to the main line
          outlineBlur: 15,         // and blurry
        });

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

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