Fix dynamic data loading for new request url.

js/Contao.js

@@ -139,6 +139,7 @@ L.Contao = L.Evented.extend({
      * @param map         Pass a map object so that the data loading events are passed to the map.
      */
     loadUrl: function (url, type, options, customLayer, map) {
+        url = this.applyFilterToUrl(url, map);
         var layer = omnivore[type](url, options, customLayer);
 
         if (map) {
@@ -147,7 +148,7 @@ L.Contao = L.Evented.extend({
 
             // Add listener for map bounds changes.
             if (map.options.dynamicLoad && layer.options.boundsMode == 'fit') {
-                layer.options.requestHash = hash;
+                layer.options.requestUrl = url;
                 map.on('moveend', layer.refreshData, layer);
 
                 map.on('layerremove', function(e) {
@@ -326,6 +327,37 @@ L.Contao = L.Evented.extend({
         }
 
         return value;
+    },
+
+
+    /**
+     * Apply the filter to a request url.
+     *
+     * @param {string} url The request url.
+     * @param {L.Map}  map The map.
+     *
+     * @returns {string}
+     */
+    applyFilterToUrl: function (url, map) {
+        var value, query, bounds;
+
+        if (!map || !map.options.dynamicLoad) {
+            return url;
+        }
+
+        url = new URL(url);
+        query = new URLSearchParams(url.search);
+
+        bounds = map.getBounds();
+        value  = bounds.getSouth() + ',' + bounds.getWest();
+        value += ',' + bounds.getNorth() + ',' + bounds.getEast();
+
+        query.set('filter', 'bbox');
+        query.set('values', value);
+
+        url.search = query.toString();
+
+        return url.toString();
     }
 });
 

js/Mixin.GeoJSON.js

@@ -29,6 +29,6 @@ L.GeoJSON.include({
         });
 
         // TODO: Allow other data formats.
-        omnivore.geojson(L.contao.createRequestUrl(this.options.requestHash, e.target), null, dataLayer);
+        omnivore.geojson(L.contao.applyFilterToUrl(this.options.requestUrl, e.target), null, dataLayer);
     }
 });

src/Bundle/Resources/public/js/contao-leaflet.js

@@ -1 +1 @@
-L.Contao=L.Evented.extend({statics:{ATTRIBUTION:' | <a href="https://netzmacht.de/contao-leaflet" title="Powered by Leaflet extension for Contao CMS developed by netzmacht David Molineus">netzmacht</a>'},maps:{},icons:{},initialize:function(){L.Icon.Default.imagePath="assets/leaflet/libs/leaflet/images/",this.setGeoJsonListeners(L.GeoJSON)},addMap:function(t,o){return this.maps[t]=o,this.fire("map:added",{id:t,map:o}),this},getMap:function(t){return void 0===this.maps[t]?null:this.maps[t]},addIcon:function(t,o){return this.icons[t]=o,this.fire("icon:added",{id:t,icon:o}),this},loadIcons:function(t){for(var o=0;o<t.length;o++){var e;e="extraMarkers.icon"===t[o].type?L.ExtraMarkers.icon(t[o].options):L[t[o].type](t[o].options),this.addIcon(t[o].id,e)}},getIcon:function(t){return void 0===this.icons[t]?null:this.icons[t]},load:function(t,o,e,n,i){var s=this.createRequestUrl(t,i);return this.loadFile(s,o,e,n,i)},loadUrl:function(t,o,e,n,i){var s=omnivore[o](t,e,n);return i&&(L.stamp(s),i.options.dynamicLoad&&"fit"==s.options.boundsMode&&(s.options.requestHash=hash,i.on("moveend",s.refreshData,s),i.on("layerremove",function(t){t.layer===s&&i.off("moveend",s.updateBounds,s)})),i.fire("dataloading",{layer:s}),s.on("ready",function(){i.calculateFeatureBounds(s),i.fire("dataload",{layer:s})}),s.on("error",function(){i.fire("dataload",{layer:s})})),s},loadFile:function(t,o,e,n,i){return this.loadUrl(t,o,e,n,i)},pointToLayer:function(t,o){var e="marker",n=null;if(t.properties&&(t.properties.bounds=!0,t.properties.type&&(e=t.properties.type),t.properties.arguments&&(n=L[e].apply(L[e],t.properties.arguments),L.Util.setOptions(n,t.properties.options))),null===n&&(n=L[e](o,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:o,type:e}),n},onEachFeature:function(t,o){t.properties&&(L.Util.setOptions(o,t.properties.options),this.bindPopupFromFeature(o,t),this.fire("feature:added",{feature:t,layer:o}))},bindPopupFromFeature:function(t,o){o.properties&&(o.properties.popup?t.bindPopup(o.properties.popup,o.properties.popupOptions):o.properties.popupContent&&t.bindPopup(o.properties.popupContent,o.properties.popupOptions))},setGeoJsonListeners:function(t){t&&t.prototype&&(t.prototype.options={pointToLayer:this.pointToLayer.bind(this),onEachFeature:this.onEachFeature.bind(this)})},createRequestUrl:function(t,o){var e,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("="))[0]==n){s[1]=t,i[r]=s.join("=");break}r<0&&(i[i.length]=[n,t].join("=")),t=document.location.pathname+"?"+i.join("&")}return o&&o.options.dynamicLoad&&(t+="&f=bbox&v=",t+=(e=o.getBounds()).getSouth()+","+e.getWest(),t+=","+e.getNorth()+","+e.getEast()),t}}),L.contao=new L.Contao,L.Control.Attribution.addInitHook(function(){this.options.prefix+=L.Contao.ATTRIBUTION}),L.Control.Attribution.include({setPrefix:function(t){return-1===t.indexOf(L.Contao.ATTRIBUTION)&&(t+=L.Contao.ATTRIBUTION),this.options.prefix=t,this._update(),this}}),L.GeoJSON.include({refreshData:function(t){var o=L.geoJson(),e=this;o.on("ready",function(){var t,o=e.getLayers();for(t=0;t<o.length;t++)e.removeLayer(o[t]);for(o=this.getLayers(),t=0;t<o.length;t++)this.removeLayer(o[t]),e.addLayer(o[t])}),omnivore.geojson(L.contao.createRequestUrl(this.options.requestHash,t.target),null,o)}}),L.Map.include({_dynamicBounds:null,calculateFeatureBounds:function(t,o){if(t){if(!this.options.adjustBounds&&!o)return;this._scanForBounds(t)}else this.eachLayer(this._scanForBounds,this);this._dynamicBounds&&this.fitBounds(this._dynamicBounds,this.getBoundsOptions())},getBoundsOptions:function(){return options={},this.options.boundsPadding?options.padding=this.options.boundsPadding:(this.options.boundsPaddingTopLeft&&(options.paddingTopLeft=this.options.boundsPaddingTopLeft),this.options.boundsPaddingBottomRight&&(options.paddingBottomRight=this.options.boundsPaddingBottomRight)),options},_scanForBounds:function(t){var o;!t.feature||t.feature.properties&&t.feature.properties.ignoreForBounds?L.MarkerClusterGroup&&t instanceof L.MarkerClusterGroup&&t.options.boundsMode&&"extend"==t.options.boundsMode?(o=t.getBounds()).isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o.getSouthWest(),o.getNorthEast())):(!t.options||t.options&&t.options.boundsMode&&!t.options.ignoreForBounds)&&t.eachLayer&&t.eachLayer(this._scanForBounds,this):t.getBounds?(o=t.getBounds()).isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o.getSouthWest(),o.getNorthEast())):t.getLatLng&&(o=t.getLatLng(),this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o,o))}}),L.LatLngBounds.prototypLine truncated
+L.Contao=L.Evented.extend({statics:{ATTRIBUTION:' | <a href="https://netzmacht.de/contao-leaflet" title="Powered by Leaflet extension for Contao CMS developed by netzmacht David Molineus">netzmacht</a>'},maps:{},icons:{},initialize:function(){L.Icon.Default.imagePath="assets/leaflet/libs/leaflet/images/",this.setGeoJsonListeners(L.GeoJSON)},addMap:function(t,o){return this.maps[t]=o,this.fire("map:added",{id:t,map:o}),this},getMap:function(t){return void 0===this.maps[t]?null:this.maps[t]},addIcon:function(t,o){return this.icons[t]=o,this.fire("icon:added",{id:t,icon:o}),this},loadIcons:function(t){for(var o=0;o<t.length;o++){var e;e="extraMarkers.icon"===t[o].type?L.ExtraMarkers.icon(t[o].options):L[t[o].type](t[o].options),this.addIcon(t[o].id,e)}},getIcon:function(t){return void 0===this.icons[t]?null:this.icons[t]},load:function(t,o,e,n,i){var s=this.createRequestUrl(t,i);return this.loadFile(s,o,e,n,i)},loadUrl:function(t,o,e,n,i){t=this.applyFilterToUrl(t,i);var s=omnivore[o](t,e,n);return i&&(L.stamp(s),i.options.dynamicLoad&&"fit"==s.options.boundsMode&&(s.options.requestUrl=t,i.on("moveend",s.refreshData,s),i.on("layerremove",function(t){t.layer===s&&i.off("moveend",s.updateBounds,s)})),i.fire("dataloading",{layer:s}),s.on("ready",function(){i.calculateFeatureBounds(s),i.fire("dataload",{layer:s})}),s.on("error",function(){i.fire("dataload",{layer:s})})),s},loadFile:function(t,o,e,n,i){return this.loadUrl(t,o,e,n,i)},pointToLayer:function(t,o){var e="marker",n=null;if(t.properties&&(t.properties.bounds=!0,t.properties.type&&(e=t.properties.type),t.properties.arguments&&(n=L[e].apply(L[e],t.properties.arguments),L.Util.setOptions(n,t.properties.options))),null===n&&(n=L[e](o,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:o,type:e}),n},onEachFeature:function(t,o){t.properties&&(L.Util.setOptions(o,t.properties.options),this.bindPopupFromFeature(o,t),this.fire("feature:added",{feature:t,layer:o}))},bindPopupFromFeature:function(t,o){o.properties&&(o.properties.popup?t.bindPopup(o.properties.popup,o.properties.popupOptions):o.properties.popupContent&&t.bindPopup(o.properties.popupContent,o.properties.popupOptions))},setGeoJsonListeners:function(t){t&&t.prototype&&(t.prototype.options={pointToLayer:this.pointToLayer.bind(this),onEachFeature:this.onEachFeature.bind(this)})},createRequestUrl:function(t,o){var e,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("="))[0]==n){s[1]=t,i[r]=s.join("=");break}r<0&&(i[i.length]=[n,t].join("=")),t=document.location.pathname+"?"+i.join("&")}return o&&o.options.dynamicLoad&&(t+="&f=bbox&v=",t+=(e=o.getBounds()).getSouth()+","+e.getWest(),t+=","+e.getNorth()+","+e.getEast()),t},applyFilterToUrl:function(t,o){var e,n,i;return o&&o.options.dynamicLoad?(t=new URL(t),n=new URLSearchParams(t.search),e=(i=o.getBounds()).getSouth()+","+i.getWest(),e+=","+i.getNorth()+","+i.getEast(),n.set("filter","bbox"),n.set("values",e),t.search=n.toString(),t.toString()):t}}),L.contao=new L.Contao,L.Control.Attribution.addInitHook(function(){this.options.prefix+=L.Contao.ATTRIBUTION}),L.Control.Attribution.include({setPrefix:function(t){return-1===t.indexOf(L.Contao.ATTRIBUTION)&&(t+=L.Contao.ATTRIBUTION),this.options.prefix=t,this._update(),this}}),L.GeoJSON.include({refreshData:function(t){var o=L.geoJson(),e=this;o.on("ready",function(){var t,o=e.getLayers();for(t=0;t<o.length;t++)e.removeLayer(o[t]);for(o=this.getLayers(),t=0;t<o.length;t++)this.removeLayer(o[t]),e.addLayer(o[t])}),omnivore.geojson(L.contao.applyFilterToUrl(this.options.requestUrl,t.target),null,o)}}),L.Map.include({_dynamicBounds:null,calculateFeatureBounds:function(t,o){if(t){if(!this.options.adjustBounds&&!o)return;this._scanForBounds(t)}else this.eachLayer(this._scanForBounds,this);this._dynamicBounds&&this.fitBounds(this._dynamicBounds,this.getBoundsOptions())},getBoundsOptions:function(){return options={},this.options.boundsPadding?options.padding=this.options.boundsPadding:(this.options.boundsPaddingTopLeft&&(options.paddingTopLeft=this.options.boundsPaddingTopLeft),this.options.boundsPaddingBottomRight&&(options.paddingBottomRight=this.options.boundsPaddingBottomRight)),options},_scanForBounds:function(t){var o;!t.feature||t.feature.properties&&t.feature.properties.ignoreForBounds?L.MarkerClusterGroup&&t instanceof L.MarkerClusterGroup&&t.options.boundsMode&&"extend"==t.options.boundsMode?(o=t.getBounds()).isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o.getSouthWest(),o.getNorthEast())):(!t.options||t.options&&t.options.boundsMode&&!t.options.ignoreForBounds)&&t.eachLayer&&t.eachLayer(this._scanForBounds,this):t.geLine truncated