From 90bfc82ddad3afa3fbf831e3a24bbed7358852d2 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Mon, 20 Nov 2017 14:20:15 +0000
Subject: [PATCH 01/15] Pass feature type into styleOptions

This then allows differentiation of styles with the same VT layer name.
Discussed here: https://github.com/Leaflet/Leaflet.VectorGrid/issues/125
---
 src/Leaflet.VectorGrid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
index 1aa3eab..4a538cf 100644
--- a/src/Leaflet.VectorGrid.js
+++ b/src/Leaflet.VectorGrid.js
@@ -95,7 +95,7 @@ L.VectorGrid = L.GridLayer.extend({
 					}
 
 					if (styleOptions instanceof Function) {
-						styleOptions = styleOptions(feat.properties, coords.z);
+						styleOptions = styleOptions(feat.properties, coords.z, feat.type);
 					}
 
 					if (!(styleOptions instanceof Array)) {
@@ -188,7 +188,7 @@ L.VectorGrid = L.GridLayer.extend({
 
 	_updateStyles: function(feat, renderer, styleOptions) {
 		styleOptions = (styleOptions instanceof Function) ?
-			styleOptions(feat.properties, renderer.getCoord().z) :
+			styleOptions(feat.properties, renderer.getCoord().z, feat.type) :
 			styleOptions;
 
 		if (!(styleOptions instanceof Array)) {

From 71c7318724badb6a54abb7034486d6a231e07e9d Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Tue, 21 Nov 2017 10:04:11 +0000
Subject: [PATCH 02/15] Document passing geometry type into style function

---
 docs/vectorgrid-api-docs.html | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/docs/vectorgrid-api-docs.html b/docs/vectorgrid-api-docs.html
index 7828a53..194e8c3 100644
--- a/docs/vectorgrid-api-docs.html
+++ b/docs/vectorgrid-api-docs.html
@@ -366,7 +366,7 @@ <h3 id='symbolizer-method'>Methods</h3>
 <pre><code class="lang-js">var vectorTileOptions = {
     vectorTileLayerStyles: {
         // A plain set of L.Path options.
-        water: {
+        landuse: {
             weight: 0,
             fillColor: &#39;#9bc2c4&#39;,
             fillOpacity: 1,
@@ -385,6 +385,29 @@ <h3 id='symbolizer-method'>Methods</h3>
                 fillOpacity: 0
             }
         },
+        // A function for styling features dynamically, depending on their
+        // properties, the map&#39;s zoom level, and the layer's geometry type
+        // (point, line, polygon)
+        water: function(properties, zoom, type) {
+            return [
+                {   // point
+                    radius: 5,
+                    color: &#39;#cf52d3&#39;,
+                },
+                {   // line
+                    weight: 1,
+                    color: &#39;#cf52d3&#39;,
+                    dashArray: &#39;2, 6&#39;,
+                    fillOpacity: 0
+                },
+                {   // polygon
+                    weight: 1,
+                    fillColor: &#39;#9bc2c4&#39;,
+                    fillOpacity: 1,
+                    fill: true
+                }
+            ]
+        },
         // An &#39;icon&#39; option means that a L.Icon will be used
         place: {
             icon: new L.Icon.Default()
@@ -399,7 +422,7 @@ <h3 id='symbolizer-method'>Methods</h3>
 <li>A set of <code>L.Path</code> options</li>
 <li>An array of sets of <code>L.Path</code> options</li>
 <li>A function that returns a set of <code>L.Path</code> options</li>
-<li>A function that returns an array of sets of <code>L.Path</code> options
+<li>A function that returns an array of sets of <code>L.Path</code> options for point, line, and polygon styles respectively
 <br>
 Layers² with no style specified will use the default <code>L.Path</code> options.
 <br>

From a0af1585c05b666392bdf81fb1f4d06e48fc1827 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Thu, 23 Nov 2017 11:26:20 +0000
Subject: [PATCH 03/15] Allow array return value of style function to contain
 functions, not just sets of L.Path options

---
 src/Leaflet.VectorGrid.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
index 4a538cf..3452ccd 100644
--- a/src/Leaflet.VectorGrid.js
+++ b/src/Leaflet.VectorGrid.js
@@ -109,7 +109,12 @@ L.VectorGrid = L.GridLayer.extend({
 					var featureLayer = this._createLayer(feat, pxPerExtent);
 
 					for (var j = 0; j < styleOptions.length; j++) {
-						var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
+                        if (styleOptions[j] instanceof Function) {
+                            var styleOption = styleOptions[j](feat.properties, coords.z, feat.type);
+                        } else {
+                            var styleOption = styleOptions[j];
+                        }
+						var style = L.extend({}, L.Path.prototype.options, styleOption);
 						featureLayer.render(renderer, style);
 						renderer._addPath(featureLayer);
 					}
@@ -196,7 +201,10 @@ L.VectorGrid = L.GridLayer.extend({
 		}
 
 		for (var j = 0; j < styleOptions.length; j++) {
-			var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
+            var styleOption = (styleOptions[j] instanceof Function) ?
+                styleOptions[j](feat.properties, renderer.getCoord().z, feat.type) :
+                styleOptions[j];
+			var style = L.extend({}, L.Path.prototype.options, styleOption);
 			feat.updateStyle(renderer, style);
 		}
 	},

From d69374441e325b34724f322226c442ed05eba423 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Thu, 23 Nov 2017 11:33:16 +0000
Subject: [PATCH 04/15] Tab indents

---
 src/Leaflet.VectorGrid.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
index 3452ccd..336ef78 100644
--- a/src/Leaflet.VectorGrid.js
+++ b/src/Leaflet.VectorGrid.js
@@ -109,11 +109,11 @@ L.VectorGrid = L.GridLayer.extend({
 					var featureLayer = this._createLayer(feat, pxPerExtent);
 
 					for (var j = 0; j < styleOptions.length; j++) {
-                        if (styleOptions[j] instanceof Function) {
-                            var styleOption = styleOptions[j](feat.properties, coords.z, feat.type);
-                        } else {
-                            var styleOption = styleOptions[j];
-                        }
+						if (styleOptions[j] instanceof Function) {
+							var styleOption = styleOptions[j](feat.properties, coords.z, feat.type);
+						} else {
+							var styleOption = styleOptions[j];
+						}
 						var style = L.extend({}, L.Path.prototype.options, styleOption);
 						featureLayer.render(renderer, style);
 						renderer._addPath(featureLayer);
@@ -201,9 +201,9 @@ L.VectorGrid = L.GridLayer.extend({
 		}
 
 		for (var j = 0; j < styleOptions.length; j++) {
-            var styleOption = (styleOptions[j] instanceof Function) ?
-                styleOptions[j](feat.properties, renderer.getCoord().z, feat.type) :
-                styleOptions[j];
+			var styleOption = (styleOptions[j] instanceof Function) ?
+				styleOptions[j](feat.properties, renderer.getCoord().z, feat.type) :
+				styleOptions[j];
 			var style = L.extend({}, L.Path.prototype.options, styleOption);
 			feat.updateStyle(renderer, style);
 		}

From f1f3f64614e95627d4fbf3d01802c03d61a9872f Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Thu, 23 Nov 2017 17:36:15 +0000
Subject: [PATCH 05/15] Change terminology (type > geometry dimension"

---
 docs/vectorgrid-api-docs.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/vectorgrid-api-docs.html b/docs/vectorgrid-api-docs.html
index 194e8c3..f5096df 100644
--- a/docs/vectorgrid-api-docs.html
+++ b/docs/vectorgrid-api-docs.html
@@ -386,9 +386,9 @@ <h3 id='symbolizer-method'>Methods</h3>
             }
         },
         // A function for styling features dynamically, depending on their
-        // properties, the map&#39;s zoom level, and the layer's geometry type
-        // (point, line, polygon)
-        water: function(properties, zoom, type) {
+        // properties, the map&#39;s zoom level, and the layer's geometry
+        // dimension (point, line, polygon)
+        water: function(properties, zoom, geometry_dimension) {
             return [
                 {   // point
                     radius: 5,

From 02d454c2360efecac1f96db9befa41a2c302f316 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Fri, 24 Nov 2017 18:49:53 +0000
Subject: [PATCH 06/15] Use camelCase for geometryDimension

---
 docs/vectorgrid-api-docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/vectorgrid-api-docs.html b/docs/vectorgrid-api-docs.html
index f5096df..c8625e5 100644
--- a/docs/vectorgrid-api-docs.html
+++ b/docs/vectorgrid-api-docs.html
@@ -388,7 +388,7 @@ <h3 id='symbolizer-method'>Methods</h3>
         // A function for styling features dynamically, depending on their
         // properties, the map&#39;s zoom level, and the layer's geometry
         // dimension (point, line, polygon)
-        water: function(properties, zoom, geometry_dimension) {
+        water: function(properties, zoom, geometryDimension) {
             return [
                 {   // point
                     radius: 5,

From 2379f4c98b3e8d7121991b0e78958f0e096383c4 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Thu, 30 Nov 2017 13:35:17 +0000
Subject: [PATCH 07/15] Revert function in array commit

---
 src/Leaflet.VectorGrid.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
index 336ef78..4a538cf 100644
--- a/src/Leaflet.VectorGrid.js
+++ b/src/Leaflet.VectorGrid.js
@@ -109,12 +109,7 @@ L.VectorGrid = L.GridLayer.extend({
 					var featureLayer = this._createLayer(feat, pxPerExtent);
 
 					for (var j = 0; j < styleOptions.length; j++) {
-						if (styleOptions[j] instanceof Function) {
-							var styleOption = styleOptions[j](feat.properties, coords.z, feat.type);
-						} else {
-							var styleOption = styleOptions[j];
-						}
-						var style = L.extend({}, L.Path.prototype.options, styleOption);
+						var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
 						featureLayer.render(renderer, style);
 						renderer._addPath(featureLayer);
 					}
@@ -201,10 +196,7 @@ L.VectorGrid = L.GridLayer.extend({
 		}
 
 		for (var j = 0; j < styleOptions.length; j++) {
-			var styleOption = (styleOptions[j] instanceof Function) ?
-				styleOptions[j](feat.properties, renderer.getCoord().z, feat.type) :
-				styleOptions[j];
-			var style = L.extend({}, L.Path.prototype.options, styleOption);
+			var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
 			feat.updateStyle(renderer, style);
 		}
 	},

From 95d8bdbeb25570faab9f9ff51c6ed417daad90f9 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Thu, 30 Nov 2017 13:41:54 +0000
Subject: [PATCH 08/15] Revert "Revert function in array commit"

This reverts commit 2379f4c98b3e8d7121991b0e78958f0e096383c4.
---
 src/Leaflet.VectorGrid.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
index 4a538cf..336ef78 100644
--- a/src/Leaflet.VectorGrid.js
+++ b/src/Leaflet.VectorGrid.js
@@ -109,7 +109,12 @@ L.VectorGrid = L.GridLayer.extend({
 					var featureLayer = this._createLayer(feat, pxPerExtent);
 
 					for (var j = 0; j < styleOptions.length; j++) {
-						var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
+						if (styleOptions[j] instanceof Function) {
+							var styleOption = styleOptions[j](feat.properties, coords.z, feat.type);
+						} else {
+							var styleOption = styleOptions[j];
+						}
+						var style = L.extend({}, L.Path.prototype.options, styleOption);
 						featureLayer.render(renderer, style);
 						renderer._addPath(featureLayer);
 					}
@@ -196,7 +201,10 @@ L.VectorGrid = L.GridLayer.extend({
 		}
 
 		for (var j = 0; j < styleOptions.length; j++) {
-			var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
+			var styleOption = (styleOptions[j] instanceof Function) ?
+				styleOptions[j](feat.properties, renderer.getCoord().z, feat.type) :
+				styleOptions[j];
+			var style = L.extend({}, L.Path.prototype.options, styleOption);
 			feat.updateStyle(renderer, style);
 		}
 	},

From a4a61cee76193ac1bd1b230f01c21e432bf80f59 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Fri, 1 Dec 2017 13:38:22 +0000
Subject: [PATCH 09/15] Revert feat.type example

---
 docs/vectorgrid-api-docs.html | 29 +++--------------------------
 1 file changed, 3 insertions(+), 26 deletions(-)

diff --git a/docs/vectorgrid-api-docs.html b/docs/vectorgrid-api-docs.html
index c8625e5..8fe7514 100644
--- a/docs/vectorgrid-api-docs.html
+++ b/docs/vectorgrid-api-docs.html
@@ -366,7 +366,7 @@ <h3 id='symbolizer-method'>Methods</h3>
 <pre><code class="lang-js">var vectorTileOptions = {
     vectorTileLayerStyles: {
         // A plain set of L.Path options.
-        landuse: {
+        water: {
             weight: 0,
             fillColor: &#39;#9bc2c4&#39;,
             fillOpacity: 1,
@@ -385,29 +385,6 @@ <h3 id='symbolizer-method'>Methods</h3>
                 fillOpacity: 0
             }
         },
-        // A function for styling features dynamically, depending on their
-        // properties, the map&#39;s zoom level, and the layer's geometry
-        // dimension (point, line, polygon)
-        water: function(properties, zoom, geometryDimension) {
-            return [
-                {   // point
-                    radius: 5,
-                    color: &#39;#cf52d3&#39;,
-                },
-                {   // line
-                    weight: 1,
-                    color: &#39;#cf52d3&#39;,
-                    dashArray: &#39;2, 6&#39;,
-                    fillOpacity: 0
-                },
-                {   // polygon
-                    weight: 1,
-                    fillColor: &#39;#9bc2c4&#39;,
-                    fillOpacity: 1,
-                    fill: true
-                }
-            ]
-        },
         // An &#39;icon&#39; option means that a L.Icon will be used
         place: {
             icon: new L.Icon.Default()
@@ -422,7 +399,7 @@ <h3 id='symbolizer-method'>Methods</h3>
 <li>A set of <code>L.Path</code> options</li>
 <li>An array of sets of <code>L.Path</code> options</li>
 <li>A function that returns a set of <code>L.Path</code> options</li>
-<li>A function that returns an array of sets of <code>L.Path</code> options for point, line, and polygon styles respectively
+<li>A function that returns an array of sets of <code>L.Path</code> options
 <br>
 Layers² with no style specified will use the default <code>L.Path</code> options.
 <br>
@@ -647,4 +624,4 @@ <h2 id='svg-vs-canvas'>SVG vs canvas</h2><p>Leaflet.VectorGrid is able to render
 
 
 </style>
-</body></html>
+</body></html>
\ No newline at end of file

From d93e5ed836fd0722821362386a4d9f387267d42d Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Fri, 1 Dec 2017 13:41:45 +0000
Subject: [PATCH 10/15] Final newline

---
 docs/vectorgrid-api-docs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/vectorgrid-api-docs.html b/docs/vectorgrid-api-docs.html
index 8fe7514..7828a53 100644
--- a/docs/vectorgrid-api-docs.html
+++ b/docs/vectorgrid-api-docs.html
@@ -624,4 +624,4 @@ <h2 id='svg-vs-canvas'>SVG vs canvas</h2><p>Leaflet.VectorGrid is able to render
 
 
 </style>
-</body></html>
\ No newline at end of file
+</body></html>

From 79e5babca0a4d3eff81edbc22321cc16153ec16a Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Fri, 1 Dec 2017 13:50:25 +0000
Subject: [PATCH 11/15] Revert

---
 src/Leaflet.VectorGrid.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
index 336ef78..1aa3eab 100644
--- a/src/Leaflet.VectorGrid.js
+++ b/src/Leaflet.VectorGrid.js
@@ -95,7 +95,7 @@ L.VectorGrid = L.GridLayer.extend({
 					}
 
 					if (styleOptions instanceof Function) {
-						styleOptions = styleOptions(feat.properties, coords.z, feat.type);
+						styleOptions = styleOptions(feat.properties, coords.z);
 					}
 
 					if (!(styleOptions instanceof Array)) {
@@ -109,12 +109,7 @@ L.VectorGrid = L.GridLayer.extend({
 					var featureLayer = this._createLayer(feat, pxPerExtent);
 
 					for (var j = 0; j < styleOptions.length; j++) {
-						if (styleOptions[j] instanceof Function) {
-							var styleOption = styleOptions[j](feat.properties, coords.z, feat.type);
-						} else {
-							var styleOption = styleOptions[j];
-						}
-						var style = L.extend({}, L.Path.prototype.options, styleOption);
+						var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
 						featureLayer.render(renderer, style);
 						renderer._addPath(featureLayer);
 					}
@@ -193,7 +188,7 @@ L.VectorGrid = L.GridLayer.extend({
 
 	_updateStyles: function(feat, renderer, styleOptions) {
 		styleOptions = (styleOptions instanceof Function) ?
-			styleOptions(feat.properties, renderer.getCoord().z, feat.type) :
+			styleOptions(feat.properties, renderer.getCoord().z) :
 			styleOptions;
 
 		if (!(styleOptions instanceof Array)) {
@@ -201,10 +196,7 @@ L.VectorGrid = L.GridLayer.extend({
 		}
 
 		for (var j = 0; j < styleOptions.length; j++) {
-			var styleOption = (styleOptions[j] instanceof Function) ?
-				styleOptions[j](feat.properties, renderer.getCoord().z, feat.type) :
-				styleOptions[j];
-			var style = L.extend({}, L.Path.prototype.options, styleOption);
+			var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
 			feat.updateStyle(renderer, style);
 		}
 	},

From 8eb6015af646b9de4efd73426807d021ee043280 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Fri, 1 Dec 2017 14:03:41 +0000
Subject: [PATCH 12/15] Add onEachFeature

Updated from https://github.com/Leaflet/Leaflet.VectorGrid/pull/68
---
 docs/demo-labels.html     | 79 +++++++++++++++++++++++++++++++++++++++
 src/Leaflet.VectorGrid.js | 69 ++++++++++++++++++++++++++++------
 2 files changed, 137 insertions(+), 11 deletions(-)
 create mode 100644 docs/demo-labels.html

diff --git a/docs/demo-labels.html b/docs/demo-labels.html
new file mode 100644
index 0000000..b4a907b
--- /dev/null
+++ 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/leaflet@1.0.2/dist/leaflet.css" />
+	<script src="https://unpkg.com/leaflet@1.0.2/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
index 1aa3eab..cbd1ad4 100644
--- 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) :

From 168ffb8f21baa83dbbaf114b7add72254121eb99 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Fri, 1 Dec 2017 14:08:03 +0000
Subject: [PATCH 13/15] Tab indents

---
 src/Leaflet.VectorGrid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
index cbd1ad4..053fafb 100644
--- a/src/Leaflet.VectorGrid.js
+++ b/src/Leaflet.VectorGrid.js
@@ -27,7 +27,7 @@ L.VectorGrid = L.GridLayer.extend({
 
 		onEachFeature: null,
 
-        // 🍂option interactive: Boolean = false
+		// 🍂option interactive: Boolean = false
 		// Whether this `VectorGrid` fires `Interactive Layer` events.
 		interactive: false,
 
@@ -53,7 +53,7 @@ L.VectorGrid = L.GridLayer.extend({
 
 	createTile: function(coords, done) {
 		var storeFeatures = this.options.getFeatureId;
-        var onEachFeature = this.options.onEachFeature;
+		var onEachFeature = this.options.onEachFeature;
 
 		var tileSize = this.getTileSize();
 		var renderer = this.options.rendererFactory(coords, tileSize, this.options);

From bb0f6796d855c2c70a0be2949e6b6b9b0ecfe9a5 Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Fri, 1 Dec 2017 14:15:39 +0000
Subject: [PATCH 14/15] Dedupe in example

---
 docs/demo-labels.html | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/docs/demo-labels.html b/docs/demo-labels.html
index b4a907b..259c924 100644
--- a/docs/demo-labels.html
+++ b/docs/demo-labels.html
@@ -22,14 +22,21 @@
 		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);
-				}
-			},
+			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: {

From 449a29c9a461b131e84b1133bd7956cde076df3d Mon Sep 17 00:00:00 2001
From: Tom Chadwin <tom.chadwin@nnpa.org.uk>
Date: Fri, 1 Dec 2017 14:47:47 +0000
Subject: [PATCH 15/15] Spaces > tabs

---
 docs/demo-labels.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/demo-labels.html b/docs/demo-labels.html
index 259c924..a23768c 100644
--- a/docs/demo-labels.html
+++ b/docs/demo-labels.html
@@ -23,20 +23,20 @@
 			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;
-                    }
-                }
-            }()),
+				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: {