mirror of
https://github.com/netzmacht/contao-leaflet-maps.git
synced 2025-11-30 03:54:10 +01:00
Implement boundsMode fit.
This commit is contained in:
@@ -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))}});
|
||||
@@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
34
assets/maps/src/Mixin.GeoJSON.js
Normal file
34
assets/maps/src/Mixin.GeoJSON.js
Normal 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);
|
||||
}
|
||||
});
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user