Skip to content

Add a hook to be notified when point features are added #68

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

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

Add a hook to be notified when point features are added #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
211c5a7
Add a hook to be notified when point features are added
albanm Feb 1, 2017
c731486
work on onEachFeature hook
albanm Feb 2, 2017
23c9c30
keep a cache of leaflet layers added by the user on top of the tiles
albanm Feb 2, 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
79 changes: 79 additions & 0 deletions demo/demo-labels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
58 changes: 55 additions & 3 deletions src/Leaflet.VectorGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ L.VectorGrid = L.GridLayer.extend({
options: {
rendererFactory: L.svg.tile,
vectorTileLayerStyles: {},
onEachFeature: null,
interactive: false
},

Expand All @@ -14,14 +15,16 @@ L.VectorGrid = L.GridLayer.extend({
if (this.options.getFeatureId) {
this._vectorTiles = {};
this._overriddenStyles = {};
this.on('tileunload', function(e) {
delete this._vectorTiles[this._tileCoordsToKey(e.coords)];
}, this);
}
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 @@ -69,11 +72,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 in styleOptions) {
var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
featureLayer.render(renderer, style);
Expand Down Expand Up @@ -148,6 +158,48 @@ L.VectorGrid = L.GridLayer.extend({
}
},

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) {
if (!(styleOptions instanceof Array)) {
styleOptions = [styleOptions];
Expand Down