Render vector tiles on an L.GridLayer with an L.Canvas renderer
npm install leaflet.vectortilesL.FontCanvas which extends L.Canvas with the capability of rendering fonts (useful for icon fonts).
html
`
Note: Leaflet.VectorTiles.js must come after Leaflet
Example:
`js
var map = L.map('map', {
renderer: new L.FontCanvas()
});
var url = 'http://mytiles.party/{z}/{x}/{y}';
var vtLayer = new L.VectorTiles(url, {
getFeatureId: function(feature) {
return feature.properties.id;
},
debug: true, // to show tile boundaries
style: {
treeType: {
oak: {
color: 'green',
font: '10px icomoon',
content: '\ue91a'
},
pine: {
color: 'red'
}
},
building: {
guggenheim: {
color: 'purple',
font: '20px icomoon',
content: '\ue915' // house icon
}
}
}
});
vtLayer.addTo(map);
`
All styling is by feature properties. The keys in the style option are property names
and the keys in those objects correspond to values.
Developing
`
npm run build
`
The above outputs a bundle named leaflet.vector-tiles.js
`
npm run build-dev
`
Outputs the bundle with a source map for easier debugging
To run the example app, start the development server:
`
npm start
`
Now do:
`
cd example
npm install
npm start
`
and then point your browser to http://localhost:12345
#### Tiles
As is, for each tile, the library expects the tile server to respond with an array like:
`js
[
{
layer: , // layer name
features: // features in this layer
},
...
]
`
$3
##### Performance
Performance is in very bad in Leaflet 1.0.0. It is much better in Leaflet 1.0.3.
##### Panning
tileunload` doesn't fire on pan so old tiles stick around as you pan around.