cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved GeoJSON API, closed #315, closed #715

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-07-09 14:42:44 +03:00
parent 012746378d
commit 92c704f33b
4 changed files with 62 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
CHANGELOG.md
View File

@ -9,12 +9,21 @@ An in-progress version being developed on the master branch.
### API simplification
Leaflet 0.4 contains several API improvements that allow simpler, jQuery-like syntax while being backwards compatible with the previous approach (so you can use both styles):
Leaflet 0.4 contains several API improvements that allow simpler, jQuery-like syntax ([example](https://gist.github.com/3038879)) while being backwards compatible with the previous approach (so you can use both styles):
* Improved most methods and options to accept `LatLng`, `LatLngBounds`, `Point` and `Bounds` values in an array form (e.g. `map.panTo([lat, lng])` will be the same as `map.panTo(new L.LatLng(lat, lng))`)
* Added `addTo` method to all layer classes, e.g. `marker.addTo(map)` is equivalent to `map.addLayer(marker)`
* Added factory methods to most classes to be able to write code without `new` keyword, named the same as classes but starting with a lowercase letter, e.g. `L.map('map')` is the same as `new L.Map('map')`
### GeoJSON API improvements
GeoJSON API was improved to be simpler and more flexible ([example](https://gist.github.com/3062900)). The changes are not backwards-compatible, so be sure to update your old code.
* Added `style` option for styling vector layers, passed either as an object or as a function (to style vector layers according to GeoJSON properties).
* Added `filter` option to leave out features that don't correspond to a certain criteria (e.g. based on properties).
* Added `onEachFeature` option to execute certain code on each feature layer based on its properties (binding popups, etc).
* Changed `pointToLayer` function signature to provide `geojson` in addition to `latlng` when creating point features for more flexibility.
### Notable new features
* Added configurable **panning inertia** - after a quick pan, the map slows down in the same direction.

26
debug/vector/feature-group-bounds.html
View File

@ -31,27 +31,23 @@
layers: [cloudmade]
});
var geojson = new L.GeoJSON();
var geojson = L.geoJson(geojsonSample, {
style: function (feature) {
return {color: feature.properties.color};
},
/* points are rendered as markers by default, but you can change this:
onEachFeature: function (feature, layer) {
var popupText = 'geometry type: ' + feature.geometry.type;
var geojson = new L.GeoJSON(null, {
pointToLayer: function(latlng) { return new L.CircleMarker(latlng); }
});
*/
if (feature.properties.color) {
popupText += '<br/>color: ' + feature.properties.color
}
geojson.on('featureparse', function(e) {
// you can style features depending on their properties, etc.
var popupText = 'geometry type: ' + e.geometryType;
if (e.layer.setStyle && e.properties && e.properties.color) {
e.layer.setStyle({color: e.properties.color});
popupText += '<br/>color: ' + e.properties.color;
layer.bindPopup(popupText);
}
e.layer.bindPopup(popupText);
});
geojson.addGeoJSON(geojsonSample);
geojson.addLayer(new L.Marker(new L.LatLng(2.745530718801952, 105.194091796875)))
var eye1 = new L.Marker(new L.LatLng(-0.7250783020332547, 101.8212890625));

27
debug/vector/geojson.html
View File

@ -28,28 +28,23 @@
layers: [cloudmade]
});
var geojson = new L.GeoJSON();
var geojson = L.geoJson(geojsonSample, {
style: function (feature) {
return {color: feature.properties.color};
},
/* points are rendered as markers by default, but you can change this:
onEachFeature: function (feature, layer) {
var popupText = 'geometry type: ' + feature.geometry.type;
var geojson = new L.GeoJSON(null, {
pointToLayer: function(latlng) { return new L.CircleMarker(latlng); }
});
*/
if (feature.properties.color) {
popupText += '<br/>color: ' + feature.properties.color
}
geojson.on('featureparse', function(e) {
// you can style features depending on their properties, etc.
var popupText = 'geometry type: ' + e.geometryType;
if (e.layer.setStyle && e.properties && e.properties.color) {
e.layer.setStyle({color: e.properties.color});
popupText += '<br/>color: ' + e.properties.color;
layer.bindPopup(popupText);
}
e.layer.bindPopup(popupText);
});
geojson.addGeoJSON(geojsonSample);
map.addLayer(geojson);
</script>
</body>

52
src/layer/GeoJSON.js
View File

@ -2,57 +2,64 @@ L.GeoJSON = L.FeatureGroup.extend({
initialize: function (geojson, options) {
L.Util.setOptions(this, options);
this._geojson = geojson;
this._layers = {};
if (geojson) {
this.addGeoJSON(geojson);
this.addData(geojson);
}
},
addGeoJSON: function (geojson) {
addData: function (geojson) {
var features = geojson.features,
i, len;
if (features) {
for (i = 0, len = features.length; i < len; i++) {
this.addGeoJSON(features[i]);
this.addData(features[i]);
}
return;
return this;
}
var isFeature = (geojson.type === 'Feature'),
geometry = isFeature ? geojson.geometry : geojson,
layer = L.GeoJSON.geometryToLayer(geometry, this.options.pointToLayer);
var options = this.options,
style = options.style;
this.fire('featureparse', {
layer: layer,
properties: geojson.properties,
geometryType: geometry.type,
bbox: geojson.bbox,
id: geojson.id,
geometry: geojson.geometry
});
if (options.filter && !options.filter(geojson)) { return; }
this.addLayer(layer);
var layer = L.GeoJSON.geometryToLayer(geojson, options.pointToLayer);
if (style) {
if (typeof style === 'function') {
style = style(geojson);
}
if (layer.setStyle) {
layer.setStyle(style);
}
}
if (options.onEachFeature) {
options.onEachFeature(geojson, layer);
}
return this.addLayer(layer);
}
});
L.Util.extend(L.GeoJSON, {
geometryToLayer: function (geometry, pointToLayer) {
var coords = geometry.coordinates,
geometryToLayer: function (geojson, pointToLayer) {
var geometry = geojson.type === 'Feature' ? geojson.geometry : geojson,
coords = geometry.coordinates,
layers = [],
latlng, latlngs, i, len, layer;
switch (geometry.type) {
case 'Point':
latlng = this.coordsToLatLng(coords);
return pointToLayer ? pointToLayer(latlng) : new L.Marker(latlng);
return pointToLayer ? pointToLayer(geojson, latlng) : new L.Marker(latlng);
case 'MultiPoint':
for (i = 0, len = coords.length; i < len; i++) {
latlng = this.coordsToLatLng(coords[i]);
layer = pointToLayer ? pointToLayer(latlng) : new L.Marker(latlng);
layer = pointToLayer ? pointToLayer(geojson, latlng) : new L.Marker(latlng);
layers.push(layer);
}
return new L.FeatureGroup(layers);
@ -101,6 +108,7 @@ L.Util.extend(L.GeoJSON, {
latlng = levelsDeep ?
this.coordsToLatLngs(coords[i], levelsDeep - 1, reverse) :
this.coordsToLatLng(coords[i], reverse);
latlngs.push(latlng);
}
@ -109,5 +117,5 @@ L.Util.extend(L.GeoJSON, {
});
L.geoJson = function (geojson, options) {
return new L.GeoJson(geojson, options);
return new L.GeoJSON(geojson, options);
};