### Complete Working Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/DOCUMENTATION-SUMMARY.txt
A full example demonstrating the initialization of a Leaflet map and adding a VectorGrid layer with custom styling and event handling.
```javascript
Leaflet.VectorGrid Example
```
--------------------------------
### Protobuf Geometry Format Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/symbolizers.md
Example of geometry represented in the Protobuf format, used in Vector Tile Specifications.
```javascript
geometry = [{x: 100, y: 50}, {x: 110, y: 60}]
```
--------------------------------
### Build and Lint Commands
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/module-structure.md
Standard npm commands for building the project, starting a development server, and performing linting checks.
```bash
npm run build # Build to dist/
npm start # Start dev server with auto-rebuild
npm run lint # ESLint checking
npm run lintfix # Auto-fix linting issues
```
--------------------------------
### Mapbox Vector Tiles Usage Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/vector-grid-protobuf.md
Example of using L.vectorGrid.protobuf with Mapbox vector tiles. Replace 'pk.eyJ1IjoieW91cmlkIiwiYSI6ImNpXzBkNzcifQ.XXXXX' with your Mapbox access token.
```javascript
L.vectorGrid.protobuf(
"https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={token}",
{
vectorTileLayerStyles: {
water: { fillColor: '#88c4e7', fill: true },
landuse: { fillColor: '#d4e3c5', fill: true },
building: { fillColor: '#a0a0a0', fill: true },
road: { fillColor: '#ffffff', weight: 1 },
admin: { color: '#ff0000', weight: 1 }
},
subdomains: 'abcd',
token: 'pk.eyJ1IjoieW91cmlkIiwiYSI6ImNpXzBkNzcifQ.XXXXX'
}
).addTo(map);
```
--------------------------------
### ESRI Vector Tiles Usage Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/vector-grid-protobuf.md
Example of using L.vectorGrid.protobuf with ESRI's ArcGIS Vector Tile Server. This demonstrates styling different layers provided by the service.
```javascript
L.vectorGrid.protobuf(
"https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf",
{
vectorTileLayerStyles: {
'Continent': { fillColor: '#c0c0c0', fill: true },
'Bathymetry': { fillColor: '#0088ff', fill: true },
'Land': { fillColor: '#e0e0e0', fill: true },
'Water area': { fillColor: '#c4ddf5', fill: true },
'Building': { fillColor: '#666666', fill: true }
}
}
).addTo(map);
```
--------------------------------
### Complete TopoJSON Example with VectorGrid
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
A full example demonstrating a TopoJSON object with countries and cities, and its integration with Leaflet.vectorGrid for styled map layers.
```javascript
var topology = {
type: 'Topology',
objects: {
countries: {
type: 'GeometryCollection',
geometries: [
{
type: 'Polygon',
arcs: [[0]]
}
]
},
cities: {
type: 'GeometryCollection',
geometries: [
{
type: 'Point',
coordinates: [1, 1]
}
]
}
},
arcs: [
[[0, 0], [1, 0], [1, 1], [0, 1], [-1, 0]]
],
transform: {
scale: [10, 10],
translate: [0, 0]
}
};
L.vectorGrid.slicer(topology, {
vectorTileLayerStyles: {
countries: { fill: true, fillColor: '#ccc' },
cities: { radius: 5, fillColor: '#f00' }
}
}).addTo(map);
```
--------------------------------
### Add Nextzen Protobuf Vector Tile Layer
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/docs/demo-vectortiles.html
Initializes a Nextzen Protobuf vector tile layer. This example shows how to configure the tile URL, attribution, and other options for Nextzen tiles.
```javascript
// Assumes layers = "all", and format = "mvt"
var nextzenTilesUrl = "https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt?api_key={apikey}";
var nextzenVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '© NextZen, © '
};
```
--------------------------------
### Install Leaflet.VectorGrid with npm
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/README.md
Install the plugin using npm for local project integration. This command makes the necessary JavaScript files available in your project.
```bash
npm install leaflet.vectorgrid
```
--------------------------------
### Protobuf Vector Tile Size Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
Provides an overview of the size and tile distribution for Protobuf vector tiles across different zoom levels, indicating their efficiency for large datasets.
```text
Single tile: 5-500 KB depending on density
Zoom 0: 1 tile
Zoom 4: 256 tiles
Zoom 10: 1,048,576 tiles
```
--------------------------------
### Complete GeoJSON Example with Leaflet.VectorGrid
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
A comprehensive example demonstrating a GeoJSON FeatureCollection with points and a line, and its integration with Leaflet.VectorGrid for rendering and styling.
```javascript
var geojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
id: 'city-1',
geometry: {
type: 'Point',
coordinates: [13.405, 52.520]
},
properties: {
name: 'Berlin',
population: 3644826,
country: 'Germany'
}
},
{
type: 'Feature',
id: 'city-2',
geometry: {
type: 'Point',
coordinates: [2.349, 48.853]
},
properties: {
name: 'Paris',
population: 2161000,
country: 'France'
}
},
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[13.405, 52.520],
[2.349, 48.853]
]
},
properties: {
name: 'Berlin-Paris route',
distance: 877 // km
}
}
]
};
L.vectorGrid.slicer(geojson, {
vectorTileLayerStyles: {
sliced: function(properties, zoom) {
// Styling logic
}
}
}).addTo(map);
```
--------------------------------
### Configure Highlight.js and Initialize
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/docs/vectorgrid-api-docs.html
Configures Highlight.js for tab replacement with spaces and initializes syntax highlighting on the page. This is typically used for code examples.
```javascript
hljs.configure({tabReplace: ' '});
hljs.initHighlightingOnLoad();
```
--------------------------------
### Example GeoJSON LineString
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
An example of a GeoJSON LineString geometry with multiple coordinate points.
```json
{
type: 'LineString',
coordinates: [
[13.4, 52.5],
[13.5, 52.6],
[13.6, 52.7]
]
}
```
--------------------------------
### Polygon Styling Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/symbolizers.md
This example demonstrates how to style polygon features using the vectorTileLayerStyles option. It dynamically adjusts fill color, opacity, stroke weight, and color based on the zoom level for 'buildings' and applies fixed styles for 'water'.
```javascript
var vectorGrid = L.vectorGrid.slicer(geojson, {
vectorTileLayerStyles: {
buildings: function(properties, zoom) {
return {
fill: true,
fillColor: zoom > 15 ? '#666' : '#999',
fillOpacity: zoom > 15 ? 0.8 : 0.5,
color: '#333',
weight: zoom > 15 ? 1 : 0,
opacity: 0.8
};
},
water: {
fill: true,
fillColor: '#06cccc',
fillOpacity: 0.3,
color: '#06cccc',
weight: 1,
opacity: 0.6
}
}
}).addTo(map);
```
--------------------------------
### Example Dynamic Road Styling
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/types.md
An example of a style function for roads, adjusting color and weight based on feature properties ('class') and zoom level. This demonstrates conditional styling.
```javascript
vectorTileLayerStyles: {
roads: function(properties, zoom) {
var width = zoom > 14 ? 3 : zoom > 10 ? 2 : 1;
var color = properties.class === 'motorway' ? '#ff0000' : '#999';
return {
color: color,
weight: width,
opacity: 0.8
};
}
}
```
--------------------------------
### Vector Tile Layer Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/types.md
An example illustrating the structure of a vector tile layer, including nested features and properties. This format is used to represent data within a tile.
```javascript
{
layers: {
water: {
extent: 4096,
features: [
{
type: 3, // Polygon
geometry: [[...], [...]],
properties: { name: 'Lake' }
}
]
},
road: {
extent: 4096,
features: [...]
}
}
}
```
--------------------------------
### Initialize VectorGrid with Mapbox Vector Tiles
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/docs/vectorgrid-api-docs.html
This example shows how to initialize a VectorGrid with Mapbox vector tiles. Replace the URL with your specific Mapbox tile source and provide your access token. The `vectorTileLayerStyles` option is used to define the appearance of tile features.
```javascript
L.vectorGrid.protobuf("https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={token}", {
vectorTileLayerStyles: { ... },
subdomains: "abcd",
token: "pk.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRTS.TUVWXTZ0123456789abcde"
}).addTo(map);
```
--------------------------------
### PointSymbolizer Rendering Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/symbolizers.md
This example shows how to render a point feature using PointSymbolizer with specific style options like radius, fill color, and opacity. This is typically used internally by VectorGrid.
```javascript
var pointSymbolizer = new PointSymbolizer(feature, pxPerExtent);
pointSymbolizer.render(renderer, {
radius: 8,
fillColor: '#ff0000',
fillOpacity: 0.8
});
```
--------------------------------
### Dynamic Styling by Zoom and Properties
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/vector-grid-protobuf.md
Implement dynamic styling for vector tiles based on zoom level and feature properties. This example shows how to define styles as functions that return style objects.
```javascript
var vectorGrid = L.vectorGrid.protobuf(url, {
vectorTileLayerStyles: {
building: function(properties, zoom) {
var minZoom = properties.height ? 12 : 14;
if (zoom < minZoom) return [];
var opacity = Math.min(0.7, (zoom - minZoom) / 2);
return {
fill: true,
fillColor: '#999',
fillOpacity: opacity,
color: '#555',
weight: 1
};
},
road: function(properties, zoom) {
var roadClass = properties.class;
var width = zoom < 12 ? 0.5 : zoom < 15 ? 1 : 2;
var color = roadClass === 'motorway' ? '#ff6b00' :
roadClass === 'trunk' ? '#ffaa00' :
'#ffffff';
return {
color: color,
weight: width,
opacity: 0.8
};
}
}
}).addTo(map);
```
--------------------------------
### Styling Points with Custom Icons
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/symbolizers.md
This example demonstrates how to style point features using custom L.Icon objects. It configures the icon's URL, size, anchor points, and popup anchor, and sets the 'interactive' option to true.
```javascript
var vectorGrid = L.vectorGrid.slicer(geojson, {
vectorTileLayerStyles: {
points: {
icon: L.icon({
iconUrl: 'path/to/icon.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
}),
interactive: true
}
}
}).addTo(map);
```
--------------------------------
### Listen to an event once
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/events.md
Use `once` to execute a listener only the first time an event occurs. This is useful for setup tasks that only need to be performed once.
```javascript
vectorGrid.once('load', function() {
console.log('First tile load complete');
});
```
--------------------------------
### GeoJSON Example with Interactivity and Styling
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/vector-grid-slicer.md
Demonstrates creating a slicer with GeoJSON data, defining styles based on properties, enabling interactivity, and handling hover events for feature highlighting.
```javascript
var countries = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[...]]
},
properties: { name: 'Country A', population: 1000000 }
}
]
};
var vectorGrid = L.vectorGrid.slicer(countries, {
rendererFactory: L.svg.tile,
vectorTileLayerStyles: {
sliced: function(properties, zoom) {
return {
fill: true,
fillColor: properties.population > 500000 ? '#E31A1C' : '#FEB24C',
fillOpacity: 0.5,
color: 'black',
weight: 1
};
}
},
interactive: true,
getFeatureId: function(f) {
return f.properties.id;
}
}).addTo(map);
// Highlight feature on hover
vectorGrid.on('mouseover', function(e) {
vectorGrid.setFeatureStyle(e.layer.properties.id, {
fillColor: 'red',
weight: 2
});
});
vectorGrid.on('mouseout', function(e) {
vectorGrid.resetFeatureStyle(e.layer.properties.id);
});
```
--------------------------------
### OpenMapTiles Server URL
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
Example URL for accessing OpenMapTiles vector tiles. Replace {s} with a subdomain and {key} with your API key.
```plaintext
https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}
```
--------------------------------
### TopoJSON Data Structure Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
Shows the structure of TopoJSON for 1000 points, highlighting its more compact representation due to shared arc encoding.
```javascript
{
type: 'Topology',
objects: {},
arcs: [...] // Shared arc encoding saves space
}
// Same 1000 points: ~80-120 KB
```
--------------------------------
### TopoJSON Example with Layered Styling
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/vector-grid-slicer.md
Shows how to use TopoJSON data with L.vectorGrid.slicer, where TopoJSON objects are treated as layer names for distinct styling.
```javascript
var topology = {
type: 'Topology',
objects: {
counties: { ... },
states: { ... }
},
arcs: [...]
};
var vectorGrid = L.vectorGrid.slicer(topology, {
vectorTileLayerStyles: {
counties: { color: 'blue', weight: 1 },
states: { color: 'red', weight: 2 }
}
}).addTo(map);
```
--------------------------------
### Initialize VectorGrid with SVG Tile Renderer
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/tile-renderers.md
Example of how to initialize L.vectorGrid.slicer to use the SVG tile renderer by specifying the 'rendererFactory' option.
```javascript
L.vectorGrid.slicer(geojson, {
rendererFactory: L.svg.tile, // SVG renderer
vectorTileLayerStyles: {...}
}).addTo(map);
```
--------------------------------
### GeoJSON Data Size Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
Illustrates the approximate size of GeoJSON data for 1000 points, emphasizing its larger footprint compared to other formats.
```javascript
{
type: 'FeatureCollection',
features: [...] // Each point: ~200 bytes
}
// Total: ~200 KB minimum
```
--------------------------------
### L.Canvas.Tile Methods
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/METHOD-REFERENCE.md
Provides methods for initializing and managing Canvas tile renderers, including getting coordinates, accessing the canvas container, and handling map events.
```APIDOC
## Class L.Canvas.Tile
### Description
Manages Canvas rendering for map tiles.
### Methods
#### initialize
- **Signature**: `(tileCoord, tileSize, options)`
- **Returns**: `undefined`
- **Description**: Initialize Canvas tile renderer.
#### getCoord
- **Signature**: `()`
- **Returns**: `Object`
- **Description**: Get tile coordinates `{x, y, z}`.
#### getContainer
- **Signature**: `()`
- **Returns**: `HTMLCanvasElement`
- **Description**: Get canvas element.
#### onAdd
- **Signature**: `(map)`
- **Returns**: `undefined`
- **Description**: Called when added to map.
#### addTo
- **Signature**: `(map)`
- **Returns**: `undefined`
- **Description**: Add renderer to map.
#### removeFrom
- **Signature**: `(map)`
- **Returns**: `undefined`
- **Description**: Remove renderer from map.
```
--------------------------------
### L.SVG.Tile Methods
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/METHOD-REFERENCE.md
Provides methods for initializing and managing SVG tile renderers, including getting coordinates, accessing the SVG container, and handling map events.
```APIDOC
## Class L.SVG.Tile
### Description
Manages SVG rendering for map tiles.
### Methods
#### initialize
- **Signature**: `(tileCoord, tileSize, options)`
- **Returns**: `undefined`
- **Description**: Initialize SVG tile renderer.
#### getCoord
- **Signature**: `()`
- **Returns**: `Object`
- **Description**: Get tile coordinates `{x, y, z}`.
#### getContainer
- **Signature**: `()`
- **Returns**: `SVGSVGElement`
- **Description**: Get SVG element.
#### onAdd
- **Signature**: `(map)`
- **Returns**: `undefined`
- **Description**: Called when added to map.
#### addTo
- **Signature**: `(map)`
- **Returns**: `undefined`
- **Description**: Add renderer to map.
#### removeFrom
- **Signature**: `(map)`
- **Returns**: `undefined`
- **Description**: Remove renderer from map.
```
--------------------------------
### Enable Canvas Rendering in VectorGrid
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/tile-renderers.md
Example demonstrating how to enable the Canvas Tile Renderer for a vectorGrid layer by specifying the 'rendererFactory' option. This is useful for improving performance with a large number of features.
```javascript
L.vectorGrid.protobuf(url, {
rendererFactory: L.canvas.tile, // Canvas renderer
vectorTileLayerStyles: {...}
}).addTo(map);
```
--------------------------------
### Bundled Distribution Usage
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/module-structure.md
Include the bundled JavaScript file to use Leaflet.VectorGrid with all its dependencies. This is the simplest way to get started.
```html
```
--------------------------------
### GeoJSON-VT Geometry Format Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/symbolizers.md
Example of geometry represented in the GeoJSON-VT format.
```javascript
geometry = [[100, 50], [110, 60]]
```
--------------------------------
### Example GeoJSON Point
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
An example of a GeoJSON Point geometry representing a location in Berlin.
```json
{
type: 'Point',
coordinates: [13.405, 52.520] // Berlin
}
```
--------------------------------
### Example GeoJSON Polygon
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
An example of a GeoJSON Polygon geometry with an outer ring and an inner hole.
```json
{
type: 'Polygon',
coordinates: [
[
[0, 0], [10, 0], [10, 10], [0, 10], [0, 0] // Outer ring (must close)
],
[
[2, 2], [8, 2], [8, 8], [2, 8], [2, 2] // Hole
]
]
}
```
--------------------------------
### GeoJSON Properties Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/data-formats.md
An example of the properties object within a GeoJSON Feature, containing various attributes.
```json
{
type: 'Feature',
geometry: { ... },
properties: {
id: 123,
name: 'Berlin',
population: 3644826,
country: 'Germany',
area: 891.7,
founded: 1237,
official: true
}
}
```
--------------------------------
### Initialize L.vectorGrid.protobuf
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/vector-grid-protobuf.md
Initializes a Protobuf VectorGrid with a URL template and custom options. Use this to set up the tile source and layer styles.
```javascript
var vectorGrid = L.vectorGrid.protobuf(
'https://tiles.example.com/v1/{z}/{x}/{y}.pbf?key={apikey}',
{
apikey: 'your-api-key',
vectorTileLayerStyles: { water: {...} }
}
);
```
--------------------------------
### VectorGrid Initialization Methods
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/METHOD-REFERENCE.md
Illustrates the initialization signatures for VectorGrid and its specific types (Slicer, Protobuf), as well as Symbolizers and Renderers.
```javascript
// VectorGrid
.initialize(options: Object): undefined
// Slicer
.initialize(geojson: GeoJSON|TopoJSON, options: Object): undefined
// Protobuf
.initialize(url: String, options: Object): undefined
// Symbolizers
.initialize(feature: Feature, pxPerExtent: Number): undefined
// Renderers
.initialize(tileCoord: Object, tileSize: L.Point, options: Object): undefined
```
--------------------------------
### VectorGrid.getFeatureId Option Example
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/docs/vectorgrid-api-docs.html
Example of defining the 'getFeatureId' option to provide a unique identifier for vector features, necessary for the 'setFeatureStyle' method.
```javascript
function(feat) { return feat.properties.uniqueIdField; }
```
--------------------------------
### Create a Map Element and Initialize Map
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/quick-start.md
Set up the HTML div for the map and initialize a Leaflet map instance.
```html
```
--------------------------------
### Feature Example with Polygon Geometry
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/types.md
An example of a vector tile feature object representing a polygon. It includes the geometry coordinates, type, and associated properties.
```javascript
{
type: 3,
geometry: [
[{x: 0, y: 0}, {x: 100, y: 0}, {x: 100, y: 100}, {x: 0, y: 100}]
],
properties: {
class: 'residential',
height: 25,
levels: 8
}
}
```
--------------------------------
### initialize
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/api-reference/vector-grid-protobuf.md
Initializes a Protobuf VectorGrid with a URL template. This method sets up the grid to fetch and display vector tiles from a specified URL.
```APIDOC
## initialize(url, options)
### Description
Initializes a Protobuf VectorGrid with a URL template.
### Method
initialize
### Parameters
#### Path Parameters
- **url** (String) - Yes - URL template for fetching vector tiles. Use `{x}`, `{y}`, `{z}`, `{s}` placeholders and any custom option names.
- **options** (Object) - Yes - Configuration object.
### Request Example
```javascript
var vectorGrid = L.vectorGrid.protobuf(
'https://tiles.example.com/v1/{z}/{x}/{y}.pbf?key={apikey}',
{
apikey: 'your-api-key',
vectorTileLayerStyles: { water: {...} }
}
);
```
### Response
#### Success Response
Returns `undefined`.
```
--------------------------------
### Main Entry Point in package.json
Source: https://github.com/leaflet/leaflet.vectorgrid/blob/master/_autodocs/module-structure.md
Specifies the main bundled and minified JavaScript file for the library. Two distributions are available: one including all dependencies and another requiring external dependencies.
```json
{
"main": "dist/Leaflet.VectorGrid.bundled.min.js"
}
```