Implement boundsMode fit.

This commit is contained in:
David Molineus
2015-01-27 00:02:17 +01:00
parent 37b10c14fe
commit e2eceab60e
20 changed files with 388 additions and 72 deletions

View File

@@ -1 +1 @@
L.Contao=L.Class.extend({includes:L.Mixin.Events,statics:{ATTRIBUTION:' | <a href="http://contao-leaflet.netzmacht.de/" title="Leaflet extension for Contao CMS">netzmacht <em>creative</em></a>'},maps:{},icons:{},initialize:function(){L.Icon.Default.imagePath="assets/leaflet/libs/leaflet/images",this.setGeoJsonListeners(L.GeoJSON)},addMap:function(t,e){return this.maps[t]=e,this.fire("map:added",{id:t,map:e}),this},getMap:function(t){return"undefined"==typeof this.maps[t]?null:this.maps[t]},addIcon:function(t,e){return this.icons[t]=e,this.fire("icon:added",{id:t,icon:e}),this},loadIcons:function(t){for(var e=0;e<t.length;e++){var o=L[t[e].type](t[e].options);this.addIcon(t[e].id,o)}},getIcon:function(t){return"undefined"==typeof this.icons[t]?null:this.icons[t]},load:function(t,e,o,n,i){var s=this.createRequestUrl(t),r=omnivore[e](s,o,n);return i&&(L.stamp(r),i.fire("dataloading",{layer:r}),r.on("ready",function(){i.calculateFeatureBounds(r),i.fire("dataload",{layer:r})}),r.on("error",function(){i.fire("dataload",{layer:r})})),r},pointToLayer:function(t,e){var o="marker",n=null;if(t.properties&&(t.properties.bounds=!0,t.properties.type&&(o=t.properties.type),t.properties.arguments&&(n=L[o].apply(L[o],t.properties.arguments),L.Util.setOptions(n,t.properties.options))),null===n&&(n=L[o](e,t.properties.options)),t.properties){if(t.properties.radius&&n.setRadius(t.properties.radius),t.properties.icon){var i=this.getIcon(t.properties.icon);i&&n.setIcon(i)}this.bindPopupFromFeature(n,t)}return this.fire("point:added",{marker:n,feature:t,latlng:e,type:o}),n},onEachFeature:function(t,e){t.properties&&(L.Util.setOptions(e,t.properties.options),this.bindPopupFromFeature(e,t),this.fire("feature:added",{feature:t,layer:e}))},bindPopupFromFeature:function(t,e){e.properties&&(e.properties.popup?t.bindPopup(e.properties.popup):e.properties.popupContent&&t.bindPopup(e.properties.popupContent))},setGeoJsonListeners:function(t){t&&t.prototype&&(t.prototype.options={pointToLayer:this.pointToLayer.bind(this),onEachFeature:this.onEachFeature.bind(this)})},createRequestUrl:function(t){t=encodeURIComponent(t);var e="leaflet",o=document.location.search.substr(1).split("&");if(""==o)return document.location.pathname+"?"+[e,t].join("=");for(var n,i=o.length;i--;)if(n=o[i].split("="),n[0]==e){n[1]=t,o[i]=n.join("=");break}return 0>i&&(o[o.length]=[e,t].join("=")),document.location.pathname+o.join("&")}}),L.Contao.Attribution={setPrefix:function(t){return-1===t.indexOf(L.Contao.ATTRIBUTION)&&(t+=L.Contao.ATTRIBUTION),this.options.prefix=t,this._update(),this}},L.Control.Attribution.addInitHook(function(){this.options.prefix+=L.Contao.ATTRIBUTION}),L.Control.Attribution.include(L.Contao.Attribution),L.contao=new L.Contao,L.Map.include({_dynamicBounds:null,calculateFeatureBounds:function(t,e){if(t){if(!this.options.adjustBounds&&!e)return;this._scanForBounds(t)}else this.eachLayer(this._scanForBounds,this);this._dynamicBounds&&this.fitBounds(this._dynamicBounds)},_scanForBounds:function(t){var e;!t.feature||t.feature.properties&&t.feature.properties.ignoreForBounds?L.MarkerClusterGroup&&t instanceof L.MarkerClusterGroup&&t.options.affectBounds?(e=t.getBounds(),e.isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(e):this._dynamicBounds=L.latLngBounds(e.getSouthWest(),e.getNorthEast()))):(!t.options||t.options&&t.options.affectBounds)&&t.eachLayer&&t.eachLayer(this._scanForBounds,this):t.getBounds?(e=t.getBounds(),e.isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(e):this._dynamicBounds=L.latLngBounds(e.getSouthWest(),e.getNorthEast()))):t.getLatLng&&(e=t.getLatLng(),this._dynamicBounds?this._dynamicBounds.extend(e):this._dynamicBounds=L.latLngBounds(e,e))}});
L.Contao=L.Class.extend({includes:L.Mixin.Events,statics:{ATTRIBUTION:' | <a href="http://contao-leaflet.netzmacht.de/" title="Leaflet extension for Contao CMS">netzmacht <em>creative</em></a>'},maps:{},icons:{},initialize:function(){L.Icon.Default.imagePath="assets/leaflet/libs/leaflet/images",this.setGeoJsonListeners(L.GeoJSON)},addMap:function(t,e){return this.maps[t]=e,this.fire("map:added",{id:t,map:e}),this},getMap:function(t){return"undefined"==typeof this.maps[t]?null:this.maps[t]},addIcon:function(t,e){return this.icons[t]=e,this.fire("icon:added",{id:t,icon:e}),this},loadIcons:function(t){for(var e=0;e<t.length;e++){var o=L[t[e].type](t[e].options);this.addIcon(t[e].id,o)}},getIcon:function(t){return"undefined"==typeof this.icons[t]?null:this.icons[t]},load:function(t,e,o,n,i){var s=this.createRequestUrl(t,i),r=omnivore[e](s,o,n);return i&&(L.stamp(r),i.options.dynamicLoad&&"fit"==r.options.boundsMode&&(r.options.requestHash=t,i.on("moveend",r.refreshData,r),i.on("layerremove",function(t){t.layer===r&&i.off("moveend",r.updateBounds,r)})),i.fire("dataloading",{layer:r}),r.on("ready",function(){i.calculateFeatureBounds(r),i.fire("dataload",{layer:r})}),r.on("error",function(){i.fire("dataload",{layer:r})})),r},pointToLayer:function(t,e){var o="marker",n=null;if(t.properties&&(t.properties.bounds=!0,t.properties.type&&(o=t.properties.type),t.properties.arguments&&(n=L[o].apply(L[o],t.properties.arguments),L.Util.setOptions(n,t.properties.options))),null===n&&(n=L[o](e,t.properties.options)),t.properties){if(t.properties.radius&&n.setRadius(t.properties.radius),t.properties.icon){var i=this.getIcon(t.properties.icon);i&&n.setIcon(i)}this.bindPopupFromFeature(n,t)}return this.fire("point:added",{marker:n,feature:t,latlng:e,type:o}),n},onEachFeature:function(t,e){t.properties&&(L.Util.setOptions(e,t.properties.options),this.bindPopupFromFeature(e,t),this.fire("feature:added",{feature:t,layer:e}))},bindPopupFromFeature:function(t,e){e.properties&&(e.properties.popup?t.bindPopup(e.properties.popup):e.properties.popupContent&&t.bindPopup(e.properties.popupContent))},setGeoJsonListeners:function(t){t&&t.prototype&&(t.prototype.options={pointToLayer:this.pointToLayer.bind(this),onEachFeature:this.onEachFeature.bind(this)})},createRequestUrl:function(t,e){var o,n="leaflet",i=document.location.search.substr(1).split("&");if(t=encodeURIComponent(t),""==i)t=document.location.pathname+"?"+[n,t].join("=");else{for(var s,r=i.length;r--;)if(s=i[r].split("="),s[0]==n){s[1]=t,i[r]=s.join("=");break}0>r&&(i[i.length]=[n,t].join("=")),t=document.location.pathname+i.join("&")}return e&&e.options.dynamicLoad&&(o=e.getBounds(),t+="&f=bbox&v=",t+=o.getSouth()+","+o.getWest(),t+=","+o.getNorth()+","+o.getEast()),t}}),L.Contao.Attribution={setPrefix:function(t){return-1===t.indexOf(L.Contao.ATTRIBUTION)&&(t+=L.Contao.ATTRIBUTION),this.options.prefix=t,this._update(),this}},L.Control.Attribution.addInitHook(function(){this.options.prefix+=L.Contao.ATTRIBUTION}),L.Control.Attribution.include(L.Contao.Attribution),L.contao=new L.Contao,L.GeoJSON.include({refreshData:function(t){var e=L.geoJson(),o=this;e.on("ready",function(){var t,e=o.getLayers();for(t=0;t<e.length;t++)o.removeLayer(e[t]);for(e=this.getLayers(),t=0;t<e.length;t++)this.removeLayer(e[t]),o.addLayer(e[t])}),omnivore.geojson(L.contao.createRequestUrl(this.options.requestHash,t.target),null,e)}}),L.Map.include({_dynamicBounds:null,calculateFeatureBounds:function(t,e){if(t){if(!this.options.adjustBounds&&!e)return;this._scanForBounds(t)}else this.eachLayer(this._scanForBounds,this);this._dynamicBounds&&this.fitBounds(this._dynamicBounds)},_scanForBounds:function(t){var e;!t.feature||t.feature.properties&&t.feature.properties.ignoreForBounds?L.MarkerClusterGroup&&t instanceof L.MarkerClusterGroup&&t.options.boundsMode&&"extend"==t.options.boundsMode?(e=t.getBounds(),e.isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(e):this._dynamicBounds=L.latLngBounds(e.getSouthWest(),e.getNorthEast()))):(!t.options||t.options&&t.options.boundsMode&&"extend"==t.options.boundsMode)&&t.eachLayer&&t.eachLayer(this._scanForBounds,this):t.getBounds?(e=t.getBounds(),e.isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(e):this._dynamicBounds=L.latLngBounds(e.getSouthWest(),e.getNorthEast()))):t.getLatLng&&(e=t.getLatLng(),this._dynamicBounds?this._dynamicBounds.extend(e):this._dynamicBounds=L.latLngBounds(e,e))}});

View File

@@ -119,13 +119,25 @@ L.Contao = L.Class.extend({
* @param map Pass a map object so that the data loading events are passed to the map.
*/
load: function (hash, type, options, customLayer, map) {
var url = this.createRequestUrl(hash),
var url = this.createRequestUrl(hash, map),
layer = omnivore[type](url, options, customLayer);
if (map) {
// Required because Control.Loading tries to get _leafet_id which is created here.
L.stamp(layer);
// Add listender for map bounds changes.
if (map.options.dynamicLoad && layer.options.boundsMode == 'fit') {
layer.options.requestHash = hash;
map.on('moveend', layer.refreshData, layer);
map.on('layerremove', function(e) {
if (e.layer === layer) {
map.off('moveend', layer.updateBounds, layer);
}
});
}
map.fire('dataloading', {layer: layer});
layer.on('ready', function () {
@@ -150,7 +162,7 @@ L.Contao = L.Class.extend({
* @returns {L.Marker}|{*}
*/
pointToLayer: function (feature, latlng) {
var type = 'marker';
var type = 'marker';
var marker = null;
if (feature.properties) {
@@ -238,18 +250,20 @@ L.Contao = L.Class.extend({
/**
* Create request url by appending the hash to the current url.
*
* @param {string} value The hash
* @param {string} value The hash.
* @param {L.Map} map The map.
*
* @returns {string}
*/
createRequestUrl: function (value) {
createRequestUrl: function (value, map) {
var bounds,
key = 'leaflet',
params = document.location.search.substr(1).split('&');
value = encodeURIComponent(value);
var key = 'leaflet';
var params = document.location.search.substr(1).split('&');
if (params == '') {
return document.location.pathname + '?' + [key, value].join('=');
value = document.location.pathname + '?' + [key, value].join('=');
} else {
var i = params.length;
var x;
@@ -267,8 +281,19 @@ L.Contao = L.Class.extend({
params[params.length] = [key, value].join('=');
}
return document.location.pathname + params.join('&');
value = document.location.pathname + params.join('&');
}
if (map) {
if (map.options.dynamicLoad) {
bounds = map.getBounds();
value += '&f=bbox&v=';
value += bounds.getSouth() + ',' + bounds.getWest();
value += ',' + bounds.getNorth() + ',' + bounds.getEast();
}
}
return value;
}
});

View File

@@ -0,0 +1,34 @@
/**
* Add update bounds method for geo json layers. It is triggered when map bounds changed and make a new request
* to get the data in the new bounds.
*/
L.GeoJSON.include({
/**
* Update bounds.
*
* @param {L.Event} e The subscribed event.
*/
refreshData: function(e) {
var dataLayer = L.geoJson(),
layer = this;
dataLayer.on('ready', function() {
var i, layers = layer.getLayers();
// Clear old data.
for (i = 0; i < layers.length; i++) {
layer.removeLayer(layers[i]);
}
// Copy data from temporary layer.
layers = this.getLayers();
for (i = 0; i < layers.length; i++) {
this.removeLayer(layers[i]);
layer.addLayer(layers[i]);
}
});
// TODO: Allow other data formats.
omnivore.geojson(L.contao.createRequestUrl(this.options.requestHash, e.target), null, dataLayer);
}
});

View File

@@ -1,6 +1,6 @@
/**
* Extend map so that it can calculate their bounds depending of the features with the property affectBounds.
* Extend map so that it can calculate their bounds depending of the features with the property boundsMode.
*/
L.Map.include({
_dynamicBounds: null,
@@ -63,7 +63,8 @@ L.Map.include({
this._dynamicBounds = L.latLngBounds(source, source);
}
}
} else if (L.MarkerClusterGroup && layer instanceof L.MarkerClusterGroup && layer.options.affectBounds) {
} else if (L.MarkerClusterGroup && layer instanceof L.MarkerClusterGroup
&& layer.options.boundsMode && layer.options.boundsMode == 'extend') {
source = layer.getBounds();
if (source.isValid()) {
@@ -73,7 +74,8 @@ L.Map.include({
this._dynamicBounds = L.latLngBounds(source.getSouthWest(), source.getNorthEast());
}
}
} else if ((!layer.options || (layer.options && layer.options.affectBounds)) && layer.eachLayer) {
} else if ((!layer.options || (layer.options
&& layer.options.boundsMode && layer.options.boundsMode == 'extend')) && layer.eachLayer) {
layer.eachLayer(this._scanForBounds, this);
}
}