Skip to content

Commit 8eb6015

Browse files
tomchadwintomchadwin
committed
Add onEachFeature
Updated from Leaflet#68
1 parent 79e5bab commit 8eb6015

File tree

2 files changed

+137
-11
lines changed

2 files changed

+137
-11
lines changed

‎docs/demo-labels.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Leaflet Map Panes Example</title>
5+
<meta charset="utf-8" />
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
10+
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
11+
<script src="http://localhost:4567/Leaflet.VectorGrid.bundled.js"></script>
12+
</head>
13+
<body style='margin:0'>
14+
<div id="map" style="width: 100vw; height: 100vh"></div>
15+
16+
<script>
17+
18+
var map = L.map('map');
19+
20+
var url = 'https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
21+
22+
var vectorTileOptions = {
23+
rendererFactory: L.canvas.tile,
24+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://www.mapbox.com/about/maps/">MapBox</a>',
25+
onEachFeature: function(feature, featureLayer, vtLayer, tileCoords) {
26+
if(vtLayer.name === 'place_label' && feature.properties.localrank > 60) {
27+
var latlng = this.vtGeometryToLatLng(feature.geometry[0], vtLayer, tileCoords)
28+
marker = new L.Marker(latlng);
29+
marker.bindTooltip(feature.properties.name).openTooltip();
30+
this.addUserLayer(marker, tileCoords);
31+
}
32+
},
33+
vectorTileLayerStyles: {
34+
35+
water: {
36+
weight: 0,
37+
fillColor: '#9bc2c4',
38+
fillOpacity: 1,
39+
fill: true,
40+
stroke: false
41+
},
42+
43+
admin: [],
44+
state_label: [],
45+
country_label: [],
46+
marine_label: [],
47+
state_label: [],
48+
place_label: function(properties) {
49+
if(properties.localrank > 60) {
50+
return {};
51+
} else {
52+
return [];
53+
}
54+
},
55+
waterway_label: [],
56+
landuse: [],
57+
landuse_overlay: [],
58+
road: [],
59+
poi_label: [],
60+
waterway: [],
61+
aeroway: [],
62+
tunnel: [],
63+
bridge: [],
64+
barrier_line: [],
65+
building: [],
66+
road_label: [],
67+
housenum_label: [],
68+
69+
}
70+
};
71+
72+
var pbfLayer = L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);
73+
74+
map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 6);
75+
76+
77+
</script>
78+
</body>
79+
</html>

‎src/Leaflet.VectorGrid.js‎

Lines changed: 58 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ L.VectorGrid = L.GridLayer.extend({
2525
// A data structure holding initial symbolizer definitions for the vector features.
2626
vectorTileLayerStyles: {},
2727

28-
// 🍂option interactive: Boolean = false
28+
onEachFeature: null,
29+
30+
// 🍂option interactive: Boolean = false
2931
// Whether this `VectorGrid` fires `Interactive Layer` events.
3032
interactive: false,
3133

@@ -41,21 +43,17 @@ L.VectorGrid = L.GridLayer.extend({
4143
if (this.options.getFeatureId) {
4244
this._vectorTiles = {};
4345
this._overriddenStyles = {};
44-
this.on('tileunload', function(e) {
45-
var key = this._tileCoordsToKey(e.coords),
46-
tile = this._vectorTiles[key];
47-
48-
if (tile && this._map) {
49-
tile.removeFrom(this._map);
50-
}
51-
delete this._vectorTiles[key];
52-
}, this);
5346
}
5447
this._dataLayerNames = {};
55-
},
48+
this._userLayers = {};
49+
this.on('tileunload', function(e) {
50+
this._tileUnload(e);
51+
}, this);
52+
},
5653

5754
createTile: function(coords, done) {
5855
var storeFeatures = this.options.getFeatureId;
56+
var onEachFeature = this.options.onEachFeature;
5957

6058
var tileSize = this.getTileSize();
6159
var renderer = this.options.rendererFactory(coords, tileSize, this.options);
@@ -103,11 +101,18 @@ L.VectorGrid = L.GridLayer.extend({
103101
}
104102

105103
if (!styleOptions.length) {
104+
if (onEachFeature) {
105+
onEachFeature.call(this, feat, null, layer, coords);
106+
}
106107
continue;
107108
}
108109

109110
var featureLayer = this._createLayer(feat, pxPerExtent);
110111

112+
if (onEachFeature) {
113+
onEachFeature.call(this, feat, null, layer, coords);
114+
}
115+
111116
for (var j = 0; j < styleOptions.length; j++) {
112117
var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
113118
featureLayer.render(renderer, style);
@@ -186,6 +191,48 @@ L.VectorGrid = L.GridLayer.extend({
186191
return Object.keys(this._dataLayerNames);
187192
},
188193

194+
vtGeometryToPoint: function(geometry, vtLayer, tileCoords) {
195+
var pxPerExtent = this.getTileSize().x / vtLayer.extent;
196+
var tileSize = this.getTileSize();
197+
var offset = tileCoords.scaleBy(tileSize);
198+
var point;
199+
if (typeof geometry[0] === 'object' && 'x' in geometry[0]) {
200+
// Protobuf vector tiles return [{x: , y:}]
201+
point = L.point(offset.x + (geometry[0].x * pxPerExtent), offset.y + (geometry[0].y * pxPerExtent));
202+
} else {
203+
// Geojson-vt returns [,]
204+
point = L.point(offset.x + (geometry[0] * pxPerExtent), offset.y + (geometry[1] * pxPerExtent));
205+
}
206+
return point;
207+
},
208+
209+
vtGeometryToLatLng: function(geometry, vtLayer, tileCoords) {
210+
return this._map.unproject(this.vtGeometryToPoint(geometry, vtLayer, tileCoords));
211+
},
212+
213+
addUserLayer: function(userLayer, tileCoords) {
214+
var tileKey = this._tileCoordsToKey(tileCoords);
215+
this._userLayers[tileKey] = this._userLayers[tileKey] || [];
216+
this._userLayers[tileKey].push(userLayer);
217+
this._map.addLayer(userLayer);
218+
},
219+
220+
_tileUnload: function(e) {
221+
var tileKey = this._tileCoordsToKey(e.coords);
222+
if (this._vectorTiles) {
223+
delete this._vectorTiles[tileKey];
224+
}
225+
var userLayers = this._userLayers[tileKey];
226+
if (!userLayers) {
227+
return;
228+
}
229+
for(var i = 0; i < userLayers.length; i++) {
230+
console.log('remove layer');
231+
this._map.removeLayer(userLayers[i]);
232+
}
233+
delete this._userLayers[tileKey];
234+
},
235+
189236
_updateStyles: function(feat, renderer, styleOptions) {
190237
styleOptions = (styleOptions instanceof Function) ?
191238
styleOptions(feat.properties, renderer.getCoord().z) :

0 commit comments

Comments
 (0)