Add onEachFeature

Updated from Leaflet#68
tomchadwin · Dec 1, 2017 · 8eb6015 · 8eb6015
1 parent 79e5bab
commit 8eb6015
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 11 deletions.
diff --git a/docs/demo-labels.html b/docs/demo-labels.html
@@ -0,0 +1,79 @@
+<!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(feature, featureLayer, vtLayer, tileCoords) {
+				if(vtLayer.name === 'place_label' && feature.properties.localrank > 60) {
+					var latlng = this.vtGeometryToLatLng(feature.geometry[0], vtLayer, tileCoords)
+					marker = new L.Marker(latlng);
+					marker.bindTooltip(feature.properties.name).openTooltip();
+					this.addUserLayer(marker, tileCoords);
+				}
+			},
+			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/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
@@ -25,7 +25,9 @@ L.VectorGrid = L.GridLayer.extend({
 		// A data structure holding initial symbolizer definitions for the vector features.
 		vectorTileLayerStyles: {},
 
-		// 🍂option interactive: Boolean = false
+		onEachFeature: null,
+
+        // 🍂option interactive: Boolean = false
 		// Whether this `VectorGrid` fires `Interactive Layer` events.
 		interactive: false,
 
@@ -41,21 +43,17 @@ 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);
@@ -103,11 +101,18 @@ L.VectorGrid = L.GridLayer.extend({
 					}
 
 					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);
@@ -186,6 +191,48 @@ 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));
+	},
+
+	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++) {
+			console.log('remove layer');
+			this._map.removeLayer(userLayers[i]);
+		}
+		delete this._userLayers[tileKey];
+	},
+
 	_updateStyles: function(feat, renderer, styleOptions) {
 		styleOptions = (styleOptions instanceof Function) ?
 			styleOptions(feat.properties, renderer.getCoord().z) :