geoblink · fofi · Aug 6, 2020 · Aug 3, 2020 · Aug 3, 2020 · Aug 3, 2020
diff --git a/docs/demo-labels.html b/docs/demo-labels.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet Map Panes Example</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.js"></script>
+	<script src="http://localhost:4567/Leaflet.VectorGrid.bundled.js"></script>
+</head>
+<body style='margin:0'>
+	<div id="map" style="width: 100vw; height: 100vh"></div>
+
+	<script>
+
+		var map = L.map('map');
+
+		var url = 'https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
+
+		var vectorTileOptions = {
+			rendererFactory: L.canvas.tile,
+			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://www.mapbox.com/about/maps/">MapBox</a>',
+			onEachFeature: (function () {
+				var seen = {};
+				return function (feature, featureLayer, vtLayer, tileCoords) {
+					var id = feature.id;
+					if (!seen[id]) {
+						if (vtLayer.name === 'place_label' && feature.properties.localrank > 60) {
+							var latlng = this.vtGeometryToLatLng(feature.geometry[0], vtLayer, tileCoords)
+							marker = new L.CircleMarker(latlng, {stroke: false, fill: false});
+							marker.bindTooltip(feature.properties.name, {permanent: true}).openTooltip();
+							this.addUserLayer(marker, tileCoords);
+						}
+						seen[id] = true;
+					}
+				}
+			}()),
+			vectorTileLayerStyles: {
+
+				water: {
+					weight: 0,
+					fillColor: '#9bc2c4',
+					fillOpacity: 1,
+					fill: true,
+					stroke: false
+				},
+
+				admin: [],
+				state_label: [],
+				country_label: [],
+				marine_label: [],
+				state_label: [],
+				place_label: function(properties) {
+					if(properties.localrank > 60) {
+						return {};
+					} else {
+						return [];
+					}
+				},
+				waterway_label: [],
+				landuse: [],
+				landuse_overlay: [],
+				road: [],
+				poi_label: [],
+				waterway: [],
+				aeroway: [],
+				tunnel: [],
+				bridge: [],
+				barrier_line: [],
+				building: [],
+				road_label: [],
+				housenum_label: [],
+
+			}
+		};
+
+		var pbfLayer = L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);
+
+		map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 6);
+
+
+	</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@geoblink/leaflet.vectorgrid",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0",
   "main": "dist/Leaflet.VectorGrid.bundled.min.js",
   "scripts": {

diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
@@ -25,6 +25,9 @@ L.VectorGrid = L.GridLayer.extend({
 		// A data structure holding initial symbolizer definitions for the vector features.
 		vectorTileLayerStyles: {},
 
+		// Function that will execute per feature
+		onEachFeature: null,
+
 		// 🍂option interactive: Boolean = false
 		// Whether this `VectorGrid` fires `Interactive Layer` events.
 		interactive: false,
@@ -41,27 +44,22 @@ L.VectorGrid = L.GridLayer.extend({
 		if (this.options.getFeatureId) {
 			this._vectorTiles = {};
 			this._overriddenStyles = {};
-			this.on('tileunload', function(e) {
-				var key = this._tileCoordsToKey(e.coords),
-				    tile = this._vectorTiles[key];
-
-				if (tile && this._map) {
-					tile.removeFrom(this._map);
-				}
-				delete this._vectorTiles[key];
-			}, this);
 		}
 		this._dataLayerNames = {};
+		this._userLayers = {};
+		this.on('tileunload', function(e) {
+			this._tileUnload(e);
+		}, this);
 	},
 
 	createTile: function(coords, done) {
-
 		var storeFeatures = this.options.getFeatureId;
+		var onEachFeature = this.options.onEachFeature;
 
 		var tileSize = this.getTileSize();
 		var renderer = this.options.rendererFactory(coords, tileSize, this.options);
 
-		var tileBounds = this._tileCoordsToBounds(coords);	
+		var tileBounds = this._tileCoordsToBounds(coords);
 
 		var vectorTilePromise = this._getVectorTilePromise(coords, tileBounds);
 
@@ -77,16 +75,16 @@ L.VectorGrid = L.GridLayer.extend({
 				for (var layerName in vectorTile.layers) {
 					this._dataLayerNames[layerName] = true;
 					var layer = vectorTile.layers[layerName];
-	
+
 					var pxPerExtent = this.getTileSize().divideBy(layer.extent);
-	
+
 					var layerStyle = this.options.vectorTileLayerStyles[ layerName ] ||
 					L.Path.prototype.options;
-	
+
 					for (var i = 0; i < layer.features.length; i++) {
 						var feat = layer.features[i];
 						var id;
-	
+
 						var styleOptions = layerStyle;
 						if (storeFeatures) {
 							id = this.options.getFeatureId(feat);
@@ -99,47 +97,53 @@ L.VectorGrid = L.GridLayer.extend({
 								}
 							}
 						}
-	
+
 						if (styleOptions instanceof Function) {
 							styleOptions = styleOptions(feat.properties, coords.z);
 						}
-	
+
 						if (!(styleOptions instanceof Array)) {
 							styleOptions = [styleOptions];
 						}
-	
+
 						if (!styleOptions.length) {
+							if (onEachFeature) {
+								onEachFeature.call(this, feat, null, layer, coords);
+							}
 							continue;
 						}
-	
+
 						var featureLayer = this._createLayer(feat, pxPerExtent);
-
+						if (onEachFeature) {
+							onEachFeature.call(this, feat, null, layer, coords);
+						}
+
 						for (var j = 0; j < styleOptions.length; j++) {
 							var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
 							featureLayer.render(renderer, style);
 							renderer._addPath(featureLayer);
 						}
-	
+
 						if (this.options.interactive) {
 							featureLayer.makeInteractive();
 						}
-	
+
 						if (storeFeatures) {
 							renderer._features[id] = {
 								layerName: layerName,
 								feature: featureLayer
 							};
 						}
 					}
-	
+
 				}
-	
+
 			}
-		
+
 			if (this._map != null) {
 				renderer.addTo(this._map);
 			}
-	
+
 			L.Util.requestAnimFrame(done.bind(coords, null, null));
 
 		}.bind(this), function (err) {
@@ -205,6 +209,47 @@ L.VectorGrid = L.GridLayer.extend({
 		return Object.keys(this._dataLayerNames);
 	},
 
+	vtGeometryToPoint: function(geometry, vtLayer, tileCoords) {
+	  var pxPerExtent = this.getTileSize().x / vtLayer.extent;
+		var tileSize = this.getTileSize();
+		var offset = tileCoords.scaleBy(tileSize);
+		var point;
+		if (typeof geometry[0] === 'object' && 'x' in geometry[0]) {
+			// Protobuf vector tiles return [{x: , y:}]
+			point = L.point(offset.x + (geometry[0].x * pxPerExtent), offset.y + (geometry[0].y * pxPerExtent));
+		} else {
+			// Geojson-vt returns [,]
+			point = L.point(offset.x + (geometry[0] * pxPerExtent), offset.y + (geometry[1] * pxPerExtent));
+		}
+		return point;
+	},
+
+	vtGeometryToLatLng: function(geometry, vtLayer, tileCoords) {
+		return this._map.unproject(this.vtGeometryToPoint(geometry, vtLayer, tileCoords), tileCoords.z);
+	},
+
+	addUserLayer: function(userLayer, tileCoords) {
+		var tileKey = this._tileCoordsToKey(tileCoords);
+		this._userLayers[tileKey] = this._userLayers[tileKey] || [];
+		this._userLayers[tileKey].push(userLayer);
+		this._map.addLayer(userLayer);
+	},
+
+	_tileUnload: function(e) {
+		var tileKey = this._tileCoordsToKey(e.coords);
+		if (this._vectorTiles) {
+			delete this._vectorTiles[tileKey];
+		}
+		var userLayers = this._userLayers[tileKey];
+		if (!userLayers) {
+			return;
+		}
+		for(var i = 0; i < userLayers.length; i++) {
+			this._map.removeLayer(userLayers[i]);
+		}
+		delete this._userLayers[tileKey];
+	},
+
 	_updateStyles: function(feat, renderer, styleOptions) {
 		styleOptions = (styleOptions instanceof Function) ?
 			styleOptions(feat.properties, renderer.getCoord().z) :