Leaflet.VectorGrid API reference

VectorGrid.Slicer

A VectorGrid for slicing up big GeoJSON or TopoJSON documents in vector tiles, leveraging geojson-vt.

var geoJsonDocument = {
    type: 'FeatureCollection',
    features: [ ... ]
};
L.vectorGrid.slicer(geoJsonDocument, {
    vectorTileLayerStyles: {
        sliced: { ... }
    }
}).addTo(map);

var layer = L.vectorGrid.slicer(topojson, options);

VectorGrid

A VectorGrid is a generic, abstract class for displaying tiled vector data. it provides facilities for symbolizing and rendering the data in the vector tiles, but lacks the functionality to fetch the vector tiles from wherever they are. Extends Leaflet's L.GridLayer.

FillSymbolizer

A symbolizer for filled areas. Applies only to polygon features.

VectorGrid.Protobuf

A VectorGrid for vector tiles fetched from the internet. Tiles are supposed to be protobufs (AKA "protobuffer" or "Protocol Buffers"), containing data which complies with the MapBox Vector Tile Specification. This is the format used by:

• Mapbox Vector Tiles
• Mapzen Vector Tiles
• ESRI Vector Tiles
• OpenMapTiles hosted Vector Tiles

L.vectorGrid.protobuf("https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}", {
    vectorTileLayerStyles: { ... },
    subdomains: "0123",
    key: 'abcdefghi01234567890',
    maxNativeZoom: 14
}).addTo(map);

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);

LineSymbolizer

A symbolizer for lines. Can be applied to line and polygon features.

PointSymbolizer

A symbolizer for points.

Symbolizer

The abstract Symbolizer class is mostly equivalent in concept to a L.Path - it's an interface for polylines, polygons and circles. But instead of representing leaflet Layers, it represents things that have to be drawn inside a vector tile.

Styling VectorGrids

Vector tiles have a concept of "layer" different from the Leaflet concept of "layer".
In Leaflet, a "layer" is something that can be atomically added or removed from the map. In vector tiles, a "layer" is a named set of features (points, lines or polygons) which share a common theme.
A vector tile layer¹ can have several layers². In the mapbox-streets-v6 vector tiles layer¹ above, there are named layers² like admin, water or roads.
(¹ In Leaflet)
(² Groups of themed features)
Styling is done via per-layer² sets of L.Path options in the vectorTileLayerStyles layer¹ option:

var vectorTileOptions = {
    vectorTileLayerStyles: {
        // A plain set of L.Path options.
        landuse: {
            weight: 0,
            fillColor: '#9bc2c4',
            fillOpacity: 1,
            fill: true
        },
        // A function for styling features dynamically, depending on their
        // properties and the map's zoom level
        admin: function(properties, zoom) {
            var level = properties.admin_level;
            var weight = 1;
            if (level == 2) {weight = 4;}
            return {
                weight: weight,
                color: '#cf52d3',
                dashArray: '2, 6',
                fillOpacity: 0
            }
        },
        // A function for styling features dynamically, depending on their
        // properties, the map's zoom level, and the layer's geometry
        // dimension (point, line, polygon)
        water: function(properties, zoom, geometryDimension) {
	    if (geometryDimension === 1) {   // point
	        return ({
                    radius: 5,
                    color: '#cf52d3',
                });
	    }
	    
	    if (geometryDimension === 2) {   // line
                 return ({
                    weight: 1,
                    color: '#cf52d3',
                    dashArray: '2, 6',
                    fillOpacity: 0
                });
	    }
	    
	    if (geometryDimension === 3) {   // polygon
	         return ({
                    weight: 1,
                    fillColor: '#9bc2c4',
                    fillOpacity: 1,
                    fill: true
                });
	    }
        },
        // An 'icon' option means that a L.Icon will be used
        place: {
            icon: new L.Icon.Default()
        },
        road: []
    }
};
var pbfLayer = L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);

A layer² style can be either:

• A set of L.Path options
• An array of sets of L.Path options
• A function that returns a set of L.Path options
• A function that returns an array of sets of L.Path options for point, line, and polygon styles respectively
  Layers² with no style specified will use the default L.Path options.
  Polylines and polygons can be styled exactly like normal Leaflet L.Paths, points can be styled like polygons using L.CircleMarkers or L.Icons.

Updating Styles

In some cases it can be desirable to change the style of a feature on screen, for example for highlighting when a feature is clicked.
To do this, VectorGrid needs to know how to identify a feature. This is done through the getFeatureId option, which should be set to a function that returns an id given a feature as argument. For example:

var vectorGrid = L.vectorGrid.slicer(url, {
    ...
    getFeatureId: function(f) {
        return f.properties.osm_id;
    }
}

Note that features with the same id will be treated as one when changing style, this happens normally when for example a polygon spans more than one tile.
To update the style of a feature, use setFeatureStyle:

vectorGrid.setFeatureStyle(id, style);

The styling follows the same rules as described above, it accepts a single style, an array, or a function that returns styling.
To revert the style to the layer's default, use the resetFeatureStyle method:

vectorGrid.resetFeatureStyle(id);

Interactivity

You can enable interacting (click, mouseover, etc.) with layer features if you pass the option interactive: true; you can then add listeners to the VectorGrid layer. When an event fires, it will include the layer property, containing information about the feature.

SVG vs canvas

Leaflet.VectorGrid is able to render vector tiles with both SVG and <canvas>, in the same way that vanilla Leaflet can use SVG and <canvas> to draw lines and polygons.
To switch between the two, use the rendererFactory option for any L.VectorGrid layer, e.g.:

var sliced = L.vectorGrid.slicer(geojson, {
    rendererFactory: L.svg.tile,
    attribution: 'Something',
    vectorTileLayerStyles: { ... }
});
var pbf = L.vectorGrid.protobuf(url, {
    rendererFactory: L.canvas.tile,
    attribution: 'Something',
    vectorTileLayerStyles: { ... }
});

Internally, Leaflet.VectorGrid uses two classes named L.SVG.Tile and L.Canvas.Tile, with factory methods L.svg.tile and L.canvas.tile - a L.VectorGrid needs to be passed one of those factory methods.