leaflet/leaflet.vectorgrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0

Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON, TopoJSON or protobuf vector tiles) in Leaflet 1.0.0

Demos

demo-geojson.html	Sliced GeoJSON
demo-topojson.html	Sliced TopoJSON (sorry for the antimeridian mess, topojson-to-geojson seems to not handle it properly)
demo-vectortiles.html	Protobuf vector tiles: OpenMapTiles, MapBox, MapZen or even ESRI vector tiles
demo-points.html	Clickable points and lines
demo-points-icons.html	Points as icons

Using

If you use npm:

	npm install leaflet.vectorgrid

That will make available two files: dist/Leaflet.VectorGrid.js and dist/Leaflet.VectorGrid.bundled.js.

The difference is that dist/Leaflet.VectorGrid.bundled.js includes all of VectorGrid's dependencies:

• geojson-vt (Under ISC license)
• pbf (Under BSD license)
• topojson (Under BSD license)
• vector-tile (Under BSD license)

If you are adding these dependencies by yourself, use dist/Leaflet.VectorGrid.js instead.

If you don't want to deal with npm and local files, you can use unpkg.com instead:

<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>

or, with the same caveats about bundled dependencies:

<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>

Docs

This plugin exposes two new classes:

• L.VectorGrid.Slicer for displaying GeoJSON or TopoJSON data
• L.VectorGrid.Protobuf for displaying vector tiles from an online tile server

You can find the API documentation, and the explanation about the styling, at:

https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html

Dependencies

L.VectorGrid.Slicer requires geojson-vt: the global variable geojsonvt must exist. If topojson data is used, then the topojson global variable must also exist.

L.VectorGrid.Protobuf requires vector-tile and pbf: the global variables VectorTile and Pbf must exist.

By default, VectorGrid is built with those dependencies bundled.

Developing

Run npm install.

TODO

• Sub-panes for the tile renderers (to set the "z-index" of layers/features)
• More <g>roups in SVG
• Offscreen <canvas>es in Canvas
• getBounds() support for the slicer (inherit/extrapolate from geojson data)
• Parser for mapbox-like vector stylesheets

Motivation

Before VectorGrid, loading vector tiles in Leaflet could only be done with the Leaflet.MapboxVectorTile or the Hoverboard plugin, but neither of those works with Leaflet 1.0.0 (or greater).

VectorGrid leverages the GridLayer feature introduced in Leaflet 1.0.0.

Legalese

---

"THE BEER-WARE LICENSE": [email protected] wrote this file. As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.

---

leaflet.vectorgrid's Issues

Building bundled file for Leaflet 1.0

I am trying to use this library with Leaflet 1.0.1 and a couple of things:

• What is the best way to build a new bundled file? I am specifically working on GeoJSON data.
• I tried to use a old bundled file but it does not work with the new Leaflet release, I think it is incompatible with the new release, am I correct?

Thank you again for your help with his and a great library.

Do not render tiles during a pinch-zoom

Behaviour of Leaflet's L.GridLayer in 1.0.0 means that tiles are queried whenever the zoom level changes by one full integer. In return, this means re-rendering the vector tiles into canvases (or SVGs) at every integer zoom level - this takes time and makes the pinch-zoom sluggish.

It should be not too difficult to wait for a zoomend to render the vector tiles.

Syntax error of Worker code in IE11

Thank you for the great work on this VectorGrid!

It works fine in Webkit based browsers and Edge. However, when I was testing it in IE 11, it was crashing on: https://github.com/Leaflet/Leaflet.VectorGrid/blob/master/src/Leaflet.VectorGrid.Slicer.js#L33

I'd not take any actions yet to debug / rewrite this part of code. Is anyone seeing the same issue ?

Render point feature as marker

There is a way to render points as a standard leaflet markers ?

Nothing displayed with L.Canvas.Tile

Using leaflet 1.0.2

Looks like _drawing is undefined in L.Canvas

Suggested : _draw() in addTo

Points are cut at tile limit

Here is a picture of the issue

and a live example
https://cdn.rawgit.com/vmeurisse/57314572b95621cf24f5407522855e08/raw/b33a7d58af1e0f70e3f14447a2bf174a66ef129b/vectorLayerPoint.html

Refactor vectorTileLayerStyles into Symbolizers

When I first made this, I really gave a lot of thought to the vectorTileLayerStyles option. It was just the fastest idea at that time.

With some of the more complex vector tile sources, the styling can get out of hand.

And not to speak of the confusion between data layers and leaflet layers.

So I'm thinking of changing the paradigms (or at least, the names), by adopting the good old "Symbolizer" nomenclature from Mapnik.

So instead of stuff like...

var vectorGrid = L.vectorGrid.protobuf(url, {
   vectorTileLayerStyles: {
      water: {[
         fill: 'blue'
      ]},
      roads: function(props, zoom) { if (zoom > 10) return {color: 'black'}; else return null; }
   }
}).addTo(map);

I'd have something like...

var vectorGrid = L.vectorGrid.protobuf(url);
vectorGrid.addSymbolizer('water', 'fill', {fill: 'blue'});
vectorGrid.addSymbolizer('roads', 'line', function(props, zoom) {...} );
vectorGrid.addTo(map)

The problem with the current approach is that the vectorTileLayerStyles easily gets 3 or 4 nested levels of brackets and braces, and then you have to put that in an options object.

It should be easy to keep a symbolizers option, and vectorTileLayerStyles as a legacy alias for it; let users use addSymbolizer only for the more complex styles.

@perliedman @jkuebart Opinions?

how i can test branch make-interactive

Can your help me, please!

I want to test branch make-interactive.
I work in Win7:
1)I instal msysgit
2)git clone git://github.com/Leaflet/Leaflet.VectorGrid.git
3)cd Leaflet.VectorGrid
4)git checkout make-interactive

how can I build Leaflet.VectorGrid.bundled.js, and view demo?

Styles set per feature are not set when new tiles are loaded

When the setFeatureStyle method is used, it only updates the currently loaded tiles. When a new tile, that might be part of the feature, is loaded, it will get the default styling. This can appear as tears between tiles, and also makes overridden styles disappear once the map is zoomed.

Not showing any map, throwing error

I'm trying to use vector tiles in a Cordova Android app, but tiles aren't showing up, and I get the following error in the console:

Uncaught (in promise) TypeError: reader.addEventListener is not a function (19:01:35:244 | error, javascript) at (anonymous function) (www/js/Leaflet.VectorGrid.bundled.js:1676:13) at (anonymous function) (www/js/Leaflet.VectorGrid.bundled.js:1675:12)

I copy-pasted the code from the example into my app on top of the old raster tile layer code.

Need idea on this implemtation of mouse click event

Here is my implementation of mouse click handler. To add the click event handler, one needs to specify the options.onClick when initializing L.vectorGrid.protobuf and it could be

• a handler function that will be applied to all layers

var options = {
    onClick: function(e) {
        // handler
    },
    ...
}

• an object that defines handlers for specific layers

var options = {
    onClick: {
        // layer name
        water: function(e) {
            // handler
        }
    },
    ...
}

The parameter e is a standard leaflet event object.

{
    type: 'click',
    target: feature // clicked VectorTileFeature
}

The following code is added at Leaflet.VectorGrid.js line 44 in order to add necessary information and mouse event handler to the feature:

feat.layerName = layerName;
feat.coords = coords;

var onClick = this.options.onClick;
if (typeof onClick === 'function') {
    feat.onClick = onClick;
} else if (typeof onClick === 'object') {
    if (typeof onClick[layerName] === 'function') {
        feat.onClick = onClick[layerName];
    }
}

The event handler is binded to the path element by decorating the _initPath function at Leaflet.Render.SVG.Tile.js:

_initPath: function(layer) {
    L.SVG.prototype._initPath.call(this, layer);

      var path = layer._path;

      if (typeof layer.onClick === 'function') {
        if (layer.type === 2) {
            path.setAttribute('pointer-events', 'stroke');
        } else if (layer.type === 3) {
            path.setAttribute('pointer-events', 'fill');
        } else if (layer.type === 1) {
            path.setAttribute('pointer-events', 'painted');
        }

        path.addEventListener('click', function(e) {
            layer.onClick({ type: 'click', target: layer });
        });
    }
}

The implemetation is at here and a demo is at here.

This is slightly different from #3 as I didn't add _onClick() to L.GridLayer and decorate the getEvents(). It seems that doing so would add a global click event to the map object, which is unnecessary.

The problem is that it looks different from the default event binding style, which uses on() and off().

@IvanSanchez How do you think?

Refactor Renderers to be more universally useful.

The new concept of a RenderService is introduced. There are two implementations, one for SVG/VML and one for Canvas. A RenderService provides methods for render-method agnostic initialisation and sizing of a target DOM element, drawing and styling of points, paths and polygons and mouse event handling for the generated features. It doesn't extend any class, but can be associated to a Map instance for the purpose of firing events.

The concept of Renderer remains unchanged: it extends Layer and reacts to changes in the map by updating its viewport. There are two implementations of Renderer, one utilising a RenderService for SVG and one for Canvas. A Renderer can be added and removed from a Map or serve as an implicit layer for vector layers added to the Map. It draws vector layers by forwarding their requests to its RenderService. The RenderService fires mouse events at the Layer subclasses as before.

The vector layers such as Polyline and siblings remain unchanged.

For VectorGrid, a Tile is an object that provides a DOM element to act as a map tile. Tile does not extend Layer or any class at all. There are two implementations, one utilising a RenderService for SVG and one for Canvas. A Tile receives its DOM element from its RenderService. The advantage over the current design of using Renderer subclasses for this purpose is that there is no need to work around undesirable actions of Renderer like overriding onAdd() to prevent inserting itself into a map pane, preventing it from reacting to the map's update event by adjusting its viewport or overriding Layer's addTo() method to prevent unnecessary actions like adding attributions or firing events.

For VectorGrid, a TileFeature is an object extending Evented that represents a single feature in a vector-tile. The advantage over the current design of subclassing Polyline and siblings is that there is no need to override code that projects latitude/longitude to screen coordinates, or using private methods of Renderer to do the actual drawing. TileFeatures use Symbolizers for their visual representations, which are rendered by the RenderService associated to their containing Tile. The RenderService fires mouse events at the TileFeature instances, providing access to the vector-tile features from the event handlers.

TileFeatures are added to a Map using the new Map.addInteractiveTarget(Evented, domElement) method.

Override vectorTileLayerStyles

First of all thanks for this implementation, I have to ask if it is possible to override the functions in charge of styles of the vector tiles dynamically. I tried checking the code in order to find the place where I could possibly achieve this but I couldn't find where.
What I am trying to achieve is something like this:

var layer = L.vectorGrid.protobuf(url, vectorTileOptions);
....
document.getElementById('swap-styles').addEventListener('click', e => {
    layer.updateLayerStyle('the_layer_name', newColorFn);
    // the above would trigger a redraw for the viewport tiles
    // and the next tiles to be rendered would use the updated function
}

Thanks :)

Support setUrl like in TileLayer

The VectorGrid layer may mimic the setUrl of TileLayer and the ability to update the URL once the layer is loaded.
http://leafletjs.com/reference-1.0.2.html#tilelayer-seturl

protobuf: features not available after loading/rendering

Hi,
in the geojson-vt variant I'm able to access tile features after the map is rendered, e.g. in a click event handler. I have a scenario where interacting with the map is important, clicking single polygons or selecting groups of polygons in a drawn rectangle or circle. To implement that I need to access the feature geometries and tags contained in the tile.
In the protobuf variant all feature info is thrown away after the tile is rendered and I'm not able to access the polygon geometry any more. Would it be possible to cache the features just as the slicer does? Memory constraints won't be any different than with the slicer, would they?
-Thomas

Link to example with clickable points and lines is not working

http://leaflet.github.io/Leaflet.VectorGrid/dist/demo/demo-points.html

setFeatureStyle missing some tiles

On low zoom levels when a line might appear several time on the screen, the method setFeatureStyle might not update all the the tiles

To reproduce, mouse over the line on the following page
https://cdn.rawgit.com/vmeurisse/57314572b95621cf24f5407522855e08/raw/a77b3bfe70003721ddf9da0c807be2e017829e6a/vectorLayerHighlight.html

Point Style with Icon do not display with SVG Renderer

With the last Firefox 50.1, the icons aren't displayed with SVG Renderer. The SVG images are in the dom, but not displayed.

A way to solve maybe using xlink:href in place of href in svg image, but not sure.

To reproduce simply use the SVG render in place of Canvas in the demo demo-points-icons.html

It's OK with the Canvas Renderer.

Discussion: fetch not available in IE

Under Internet Explorer fetch is not supported, so _ getVectorTilePromise() doesn't work.

I wrote a replacement for _ getVectorTilePromise() that uses JQuery's $.ajax(). This solution works on all browsers I tested (IE, Edge, Chrome, FF, Safari). The problem with this approach is it needs JQuery and an initialization routine that enables binary buffer transfers.

Currently I have no dynamic selection of fetch vs. JQuery so it's not 'universal'.

• Should I write a pull request?
• Is a dynamic switch necessary?

Your ideas are appreciated.

-Thomas

Not displaying polygons and points

I am using Leaflet 1.00-rc2 and my map will only show lines when loading in the protobuf files. There are polygons and points in the protobuf files.

Error in Building project

The documentation says

Use the file dist/Leaflet.VectorGrid.js if you are adding these dependencies yourself, or dist/Leaflet.VectorGrid.bundled.js for minimal fuss.

However there is no bundled file in the repository using the following steps:

1. Download the repository
2. Run npm install
3. Then I put in npm install --save-dev gobble
4. Then I run build-script/browserify-dependencies.sh
5. The output is following

Bundling and compressing 75 files...
    Uncompressed: 364.15 KB (+2 bytes)
    Saved to dist/leaflet-src.js
    Compressed: 139.29 KB (+2 bytes)
    Saved to dist/leaflet.js
    Gzipped: 37.48 KB (+1 bytes)

6. Then I run gobble and output is following

gobble: error starting gobble
>>>
Cannot find module './get-source-node'
Error: Cannot find module './get-source-node'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/username/Downloads/Leaflet.VectorGrid-master/node_modules/gobble-concat/gobble-concat.js:8:21)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
<<<

This is a error with gobble-concat.

Best way to iterate over each feature?

I'm using this to implement protobuf tiles, but I was wondering if was possible to iterate over features similar to http://leafletjs.com/reference-1.0.0.html#geojson-oneachfeature?

In this specific case I'm trying to attach an event to each feature, but I'm having problems even getting L.GridLayer() (which you extend) to take an on() event.

Compatibility with Leaflet 1.0.3

In the master code, the event handling is doing a L.DomEvent.fakeStop(). This is only valid in the master branch of leaflet (in the rollup builds), making latest VectorGrid incompatible with Leaflet <= 1.0.3.

The two options here are to gracefully use _fakeStop() when fakeStop() doesn't exist, or break compatibility and write a note in the readme.

cc @perliedman

Adding labels instead of circle markers for place

Hello,

I can't find this in the documentation. Is it possible to add points with some textual property as leaflet labels (or small texts of anykind) instead of markers ?

I guess it should be possible to use the style function to add an item in a label layer instead of returning a style. But I don't see a way to access the coordinates of the point in this function.

Thanks a lot for this awesome project !

Please rename aux folder, can't install on Windows

"aux" is a reserved device name in Windows, so I can't extract the zip. Please rename the folder and all references.

Package update

Thanks for a great library. We are trying to get access to point symbolization functionality (#21) in 1.1.0 however the npm package and unpkg.com is pointing at 1.0.2. Is it possible to get this updated so we can take advantage of the point symbolization? Also, we are really looking forward to using the functionality in perliedman #22 and tuukka #9 when that gets merged.

Cannot get demo to work

I can't get http://leaflet.github.io/Leaflet.VectorGrid/dist/demo/demo-vectortiles.html to display anything on my local machine. I have followed the documentation to produce dist/Leaflet.VectorGrid.bundled.js. and made sure the html file has sensible paths to it and to the leaflet files, but only see

I have tried the following, which do not resolve the problem

-- different browser (Chrome -> Firefox)
-- unpkg for the includes:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>

-- substituting my own MapBox API token.

I would be very grateful for any help.

Rendering issue when a line cross a tile

When a line cross a tile limit, there might be visual issues

Url to reproduce
https://cdn.rawgit.com/vmeurisse/57314572b95621cf24f5407522855e08/raw/a77b3bfe70003721ddf9da0c807be2e017829e6a/vectorLayerLine.html

howto: global style update

I'm trying to update styles for an entire pbfLayer without reloading the tiles.
Use-case is that a tile layer has many attributes, and I may style by one, and then switch to another...

I'm initially setting the style with this function (which works):

function getStyle(layermeta) {
    var max = Math.min(layermeta.avg + (layermeta.std * 2), layermeta.max);
    var min = Math.max(layermeta.avg - (layermeta.std * 2), layermeta.min);
    return {
        statistics: function(properties) {
            return {
                weight: 0,
                fillColor: getColor(properties, layermeta.field, max, min),
                fillOpacity: 1,
                fill: true
            }
        }
    }; 
 }

I'd like to be able to pbfLayer.updateStyle({newstyle}) and define the style with a different layermeta.field which contains different values for the same polygon...

It seems like this should alow me to do this, as it is included in the polygon layer, but calling pbfLayer.updateStyle() is not found.

Issues rendering vector tiles in IE11?

For some reason, in my version of IE11, I get the following rendering issue when using either GeoJSON or TopoJSON data (the below illustration is a sample I mocked up in Photoshop):

It doesn't matter whether I use L.svg or L.canvas. Any idea what the problem could be?

Error loading geojson points fetures

I'm trying to use L.vectorGrid.slicer(points.geojson) but I get "TypeError: invalid 'in' operand coord" in my console.

The error is in line 208 of Leaflet.VectorGrid.js file (

Leaflet.VectorGrid/src/Leaflet.VectorGrid.js

Line 208 in 61cf2d1

if ('x' in coord) {

)

Sorry for this short report, but the due date is coming...

if you need more information, please let me know...

vectorTile doesn't have the correct styles

I am encounting the problem that inside createTile function,
the line where it loops through the styleOptions for (var j in styleOptions) {, sometimes even if the styleOptions.length =1, the j will loop to "contains" (more than 0). This results the layer not correctly styled after slicer. Do you have any clue, what might be the problem?

Tiles are not styled properly at Leaflet 1.0.1

After upgrading Leaflet from 1.0.0 to 1.0.1, all tiles on the map become transparent, even though they are created without error.

Calling setFeatureStyle does not allow styling layers

setFeatureStyle seems to take a bare L.Path style object, not a set of style objects as defined in the VectorGrid vectorTileLayerStyles options, which prevents styling named layers after the VectorGrid has been initialized. This issue is related to #40, since relying on the pre-existing layer names when calling setFeatureStyle doesn't work if the tiles haven't finished loading yet.

Rework maxNativeZoom

As @jkuebart pointed out:

It's interesting to note that by using maxNativeZoom as implemented by GridLayer, vector tiles will not be re-rendered at higher zoom levels. Consequently, the stroke width is scaled up along with the tile, while with the previous solution given above the stroke width remained constant.

If maxNativeZoom is only used because there is sufficient detail at a particular zoom level, this might not be the intended effect. If the stroke width should remain visually constant across all zoom levels, a vector tile layer might still need to reimplement getTileSize() and createTile() accordingly.

I think this is a valid concern, and deserves its own issue.

A tentative approach would be to:

• Override L.GridLayer._clampZoom and replace it with an identity function
• Calculate the "data tile" to be fetched for a given "display tile"
• Multiply pxPerExtent by (2 to the power of the zoom delta)
• Calculate some pxOffset for when the "data tile" and "display tile" are not aligned at their top left corners
• Use that pxOffset in all coordinate calculations in PointLayer, PolylineLayer and PolygonLayer

Another approach would be:

• Keep the current _clampZoom logic
• On a zoomend event, iterate through all the tiled renderers (there's a reference in this._vectorTiles) and
  • Reset the size of the containers of the tiled renderers by a factor of (2 to the power of zoom delta)
  • Trigger an update of the tiled renderers

First approach doesn't sound too easy, and might need re-requesting tiles. Second approach sounds simpler, almost too simple.

Only one point is rendered to a tile for Multi Points using MVT

It seems only one point from a multi point is rendered to single tile and all the others are ignored. If the multi point spans multiple tiles then each tile will contain a single point from the multi point.

Would it be possible to show all the points from the multi point feature?

Leaflet

OpenLayers

In each of the images, a road junction contains a multi point for the road signals (4 to 5 points) and OpenLayers shows all the points where Leaflet only shows a single point.

No Tile rendering with leaflet 1.0.2

Hi,
No error in the console logs.
But tiles are not rendering with Leaflet 1.0.2.
I will try to investigate a bit.
Very nice package BTW.

plugin not working when used in React components

When using the bundled version like so:
import {} from 'leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js'
and one tries to use Protobuf, the console report 'Pbf undefined'

When 'import' all the files require by Leaflet.VectorGrid, this error goes away, but then it complains that L.Renderes.Tile is undefined

Performance vs Leaflet 0.7

I am not sure why, but a very similar method of creating and rendering vector tiles using Leaflet 0.7 and canvas has notably better performance. I did not create this method so I can't speak to how it works, but I am using it in a few maps. Panning and zooming are much faster and smoother in 0.7. There is a lag when panning and zooming in Leaflet 1.0 that makes the map seems slow. Possibly there are settings to tweak to get better performance from this plugin and Leaflet 1.0?

Yes I have a ton of other plugins loaded in these maps, but it should give some general idea of performance losses with Leaflet 1.0 and this plugin. Both maps use the same data, the only difference is the leaflet version and the method for creating and drawing the vector tiles.

Leaflet 0.7

Leaflet 1.0 & Leaflet Vector Grid

Any ideas on performance tweaks would be appreciated. I have increased the simplification factor and lowered the max point index in the Leaflet 1.0 example, but with little improvement.

Move required packages from devDependencies to dependencies

I wonder why the vector-tile, pbf, geojson-vt, and topojson are in the devDependencies of package.json, not in the dependencies.

Road labels

Is there any way of displaying road labels from the road_label layer? I can't find any appropriate L.Path settings...

Implement mouse interaction event handlers

The features can be really useful. Do you have a plan to implement it? Will love to work on it.

P. S. Would also love to work on implementing point zoom. We can do it similar to https://github.com/SpatialServer/Leaflet.MapboxVectorTile where each marker is converted to an actual leaflet object.

Possible to completely hide a vector tile layer?

Following the L.Path example (or otherwise), is it possible to completely hide a feature later inside the tile layer like 'sreets' below?

         var vectorTileOptions = {
                rendererFactory: L.canvas.tile,
                vectorTileLayerStyles: {
                    'roads_motorways_0_line': {
                        weight: 1,
                        color: 'darkblue'
                    }, 
                    'streets': {
                        display: 'none'
                    }
                    
                }
            };

Any way to render .pbf vector tiles using tm2 styles ?

It would pretty handy if rendering 'protobuf vector tiles' in leaflet would display data using mapbox .tm2 styles ? Any plan to add such support in future ?

for ex. Mapbox 'osm-bright: https://github.com/mapbox/mapbox-studio-osm-bright.tm2

Thanks

Protobuf TMS URLs not working with Leaflet 1.0.2.

I'm trying to display Protobuf tiles from Geoserver 2.11 using a TMS formatted URL. Setting the y value in the URL to {-y} to honour the orientation of the tile grid returns this error:

Util.js:167 Uncaught Error: No value provided for variable {-y}(…)
(anonymous function) @ Util.js:167
template @ Util.js:163
_getVectorTilePromise @ Leaflet.VectorGrid.bundled.js:1657
createTile @ Leaflet.VectorGrid.bundled.js:1302
_addTile @ GridLayer.js:747
_update @ GridLayer.js:644
_setView @ GridLayer.js:511
_resetView @ GridLayer.js:483
onAdd @ GridLayer.js:137
_layerAdd @ Layer.js:106
whenReady @ Map.js:1345addLayer @ Layer.js:164
addTo @ Layer.js:48
(anonymous function) @ (index):39

Code is below. Note: I don't have a public Geoserver 2.11 TMS URL for testing. The equivalent PNG TMS URL is in the code for direct comparison. It works with {-y} but the PBF equivalent doesn't.

<!DOCTYPE html>
<html>
<head>
	<title>TMS Test - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
</head>
<body>
    <div id="mapid" style="width: 100vw; height: 100vh"></div>

    <script>
        var map = L.map('mapid').setView([-33.85, 151.0], 12);

        var localities = L.tileLayer('http://localhost:8080/geoserver/gwc/service/tms/1.0.0/loceng%3Alocality_bdys_display@EPSG%3A900913@png/{z}/{x}/{-y}.png', {
            opacity: 0.4
        }).addTo(map);

		var url = 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/loceng%3Alocality_bdys_display@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf';

		var vectorTileOptions = {
			rendererFactory: L.svg.tile,
			vectorTileLayerStyles: {

				locality_bdys_display: {
					color: '#ff0000',
					fillColor: '#0000ff',
					fillOpacity: 0.6,
					fill: true,
					stroke: true
				}
			}
		};
		var pbfLayer = L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);

    </script>
</body>
</html>

Load .mbtiles

How Leaflet.TileLayer.MBTiles could be merged in a Leaflet.VectorGrid.MBTiles?
Should it be a new project?
Any opinion @IvanSanchez ?

Race between deleting vector tile layer and completing SVG tile additions from webworker

It's possible to add a layer which references vector tiles, then quickly remove the layer from a map.

When the webworker that process the PBF vector tiles finishes, it posts a message back to the main thread which results in an exception in Leaflet.Renderer.SVG.Tile.js

I think a safe solution is to have addTile just to silently drop a message which is trying to add a tile to a deleted layer.

eg.

#57

Display the points-as-markers demo

This repo is using gh-pages to host a built version of the files, plus all the demos.

The new demo added by @perliedman in #44 should be shown as well.

• Update gh-pages with the latest built files and demos (via a PR)
• Add link to the main README.md

When tiles haven't finished loading, calling setFeatureStyle results in unstyled features

Using latest master at 330acf2.

I want to bind some data to a Leaflet VectorGrid to make choropleths. However, I sometimes call setFeatureStyle on the vector grid layer before all the tiles have finished loading (for example, if the GeoJSON or processing time takes longer than loading data for the choropleths).

Before pull request #38, this would simply set the new features to the default style I defined when I created the VectorGrid layer.

After pull request #38, the new features become unstyled (Leaflet default style).

I think I've narrowed down the reason. In Leaflet.VectorGrid.js:

var styleOverride = this._overriddenStyles[id] = {}

for (var tileKey in this._vectorTiles) {
	var tile = this._vectorTiles[tileKey];
	var features = tile._features;
	var data = features[id];
	if (data) {
		styleOverride[data.layerName] = layerStyle;
// ...

Since the new tiles haven't loaded yet, this._vectorTiles may contain old tiles or be empty altogether. This means that calling setFeatureStyle with the new ids will not bind any overridden styles to this._overriddenStyles, but instead bind empty objects. When the tiles do load in, this causes the features to be unstyled.

I'm submitting a PR to hopefully address this (and one other quirk that I found). (edit: here is the PR - #42)

MIT License

The Beerware license is fun, but a more typical license like MIT or Apache would make using this project a bit easier to legally reason about integrating. Those licenses are basically "pre-approved" for use in many larger organizations.