Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add onEachFeature #131

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Add onEachFeature #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
90bfc82
Pass feature type into styleOptions
tomchadwin Nov 20, 2017
71c7318
Document passing geometry type into style function
tomchadwin Nov 21, 2017
a0af158
Allow array return value of style function to contain functions, not …
tomchadwin Nov 23, 2017
d693744
Tab indents
tomchadwin Nov 23, 2017
f1f3f64
Change terminology (type > geometry dimension"
tomchadwin Nov 23, 2017
02d454c
Use camelCase for geometryDimension
tomchadwin Nov 24, 2017
2379f4c
Revert function in array commit
tomchadwin Nov 30, 2017
95d8bdb
Revert "Revert function in array commit"
tomchadwin Nov 30, 2017
a4a61ce
Revert feat.type example
tomchadwin Dec 1, 2017
d93e5ed
Final newline
tomchadwin Dec 1, 2017
79e5bab
Revert
tomchadwin Dec 1, 2017
8eb6015
Add onEachFeature
tomchadwin Dec 1, 2017
168ffb8
Tab indents
tomchadwin Dec 1, 2017
bb0f679
Dedupe in example
tomchadwin Dec 1, 2017
449a29c
Spaces > tabs
tomchadwin Dec 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions docs/demo-labels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 57 additions & 10 deletions src/Leaflet.VectorGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ L.VectorGrid = L.GridLayer.extend({
// A data structure holding initial symbolizer definitions for the vector features.
vectorTileLayerStyles: {},

onEachFeature: null,

// 🍂option interactive: Boolean = false
// Whether this `VectorGrid` fires `Interactive Layer` events.
interactive: false,
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) :
Expand Down