Get started with leaflet-vector-layers CDN

BSD-2-Clause-FreeBSD licensed

Leaflet.vector-layers: plugin for Leaflet.js, enabling vector tile rendering and manipulation as layers.

Tags:
  • leaflet
  • GeoJason
  • vector
  • Google Maps

Stable version

Copied!

How to start using leaflet-vector-layers CDN


// Include required libraries
L.DomEvent.addDomListener(window, 'load', init);

function init() {
  // Create a map in the 'mapid' element with a given view
  const map = L.map('mapid').setView([51.505, -0.09], 13);

  // Include Leaflet Vector Tiles library from CDN
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    id: 'osm'
  }).addTo(map);

  // Add a vector layer using GeoJSON data from a CDN
  L.vectorGrid('https://cdn.cdnhub.io/leaflet-vector-layers/examples/chicago_building_footprints-polygons.geojson', {
    style: function (feature) {
      return {
        fillColor: feature.properties.useClassE1 ? 'red' : 'green',
        weight: 2,
        opacity: 0.5,
        fillOpacity: 0.7
      };
    },
    onEachFeature: function (feature, layer) {
      layer.bindPopup(feature.properties.NAME);
    }
  }).addTo(map);
}
Copied!
Copied!
Copied!

All versions