maps: factor all geojson layer tracking into a single object (#42761)

This commit is contained in:
Frédéric Péters 2020-05-12 11:43:02 +02:00
parent 39cdfebe67
commit 0da0669e80
2 changed files with 57 additions and 42 deletions

View File

@ -1,11 +1,33 @@
$(function() {
L.Map.include(
{
add_geojson_layer: function(callback, geojson_data) {
init_geojson_layers: function(layers) {
if (Array.isArray(layers)) { // backward compatibility
this.geojson_layers = Object();
for (var i=0; i<layers.length; i++) {
this.geojson_layers[layers[i].slug] = Object();
this.geojson_layers[layers[i].slug].url = layers[i].url;
}
} else {
this.geojson_layers = layers;
}
},
load_geojson_layers: function(callback) {
var layer_slugs = Object.keys(this.geojson_layers);
this.bounds = null;
for (var i=0; i<layer_slugs.length; i++) {
var layer = this.geojson_layers[layer_slugs[i]];
layer.status = 'loading';
this.add_geojson_layer(callback, layer);
}
},
add_geojson_layer: function(callback, geojson_layer) {
var map = this;
var $map_widget = $(map.getContainer());
var cell = $map_widget.parents('div.cell')[0];
var geojson_url = geojson_data.url;
var geojson_url = geojson_layer.url;
$.getJSON(geojson_url).done(
function(data) {
@ -59,37 +81,49 @@ $(function() {
return L.marker(latlng, {icon: marker});
}
});
// track global marker bounds
var bounds = geo_json.getBounds();
if (bounds.isValid()) {
if (!map.bounds) {
map.bounds = L.latLngBounds(bounds);
} else {
map.bounds.extend(bounds);
}
}
if ($map_widget.data('group-markers')) {
if (map.geojson_layers[geojson_data.slug]) {
map.clustered_markers.removeLayer(map.geojson_layers[geojson_data.slug]);
if (geojson_layer.leaflet_layer) {
map.clustered_markers.removeLayer(geojson_layer.leaflet_layer);
}
map.clustered_markers.addLayer(geo_json);
} else {
if (map.geojson_layers[geojson_data.slug]) {
map.geojson_layers[geojson_data.slug].remove();
if (geojson_layer.leaflet_layer) {
geojson_layer.leaflet_layer.remove();
}
geo_json.addTo(map);
}
map.geojson_layers[geojson_data.slug] = geo_json;
geojson_layer.leaflet_layer = geo_json;
if (callback) {
callback(geo_json);
}
geojson_data.status = 'loaded';
geojson_layer.status = 'loaded';
}).fail(function(jqxhr, textStatus, error) {
geojson_data.status = 'error';
geojson_layer.status = 'error';
}).always(function() {
map.trigger_markers_if_ready();
});
},
trigger_markers_if_ready: function() {
var map = this;
var $map_widget = $(map.getContainer());
var map_id = $map_widget.data('cell-id');
var cell = $map_widget.parents('div.cell')[0];
var geojson_layers = window['geojson_'+map_id];
var layer_slugs = Object.keys(this.geojson_layers);
var loading = 0;
for (var i=0; i<geojson_layers.length; i++) {
if (geojson_layers[i].status == 'loading') loading++;
for (var i=0; i<layer_slugs.length; i++) {
var layer = this.geojson_layers[layer_slugs[i]];
if (layer.status == 'loading') loading++;
}
if (loading == 0) {
$(cell).trigger('combo:map-markers-ready');
@ -153,7 +187,6 @@ $(function() {
});
map.addLayer(map.clustered_markers);
}
map.geojson_layers = Object();
if ($map_widget.data('draggable') === false) {
map.dragging.disable();
}
@ -209,32 +242,14 @@ $(function() {
).addTo(map);
});
map.bounds = null;
map.geojson_layers_loaded = 0;
var geojson_layers = window['geojson_'+map_id];
if (geojson_layers.length) {
$.each(geojson_layers, function(idx, geojson_data) {
geojson_data.status = 'loading';
map.add_geojson_layer(function(geo_json) {
var bounds = geo_json.getBounds();
if (bounds.isValid()) {
if (!map.bounds) {
map.bounds = L.latLngBounds(bounds);
} else {
map.bounds.extend(bounds);
}
if (init_state == 'fit-markers') {
map.fitBounds(map.bounds);
}
}
}, geojson_data);
map.geojson_layers_loaded += 1;
if (map.geojson_layers_loaded == geojson_layers.length) {
$(cell).trigger('combo:map-ready');
}
});
} else {
$(cell).trigger('combo:map-ready');
map.init_geojson_layers(window['geojson_'+map_id]);
if (init_state == 'fit-markers') {
$(cell).on('combo:map-markers-ready', function() {
map.fitBounds(map.bounds);
});
}
map.load_geojson_layers()
$(cell).trigger('combo:map-ready');
};
$('div.cell.map').each(function() {
render_map(this);

View File

@ -30,12 +30,12 @@
opacity: {{ layer.opacity|as_json|safe }}
});
{% endfor %}
var geojson_{{ cell.pk }} = [];
var geojson_{{ cell.pk }} = Object();
{% for layer in geojson_layers %}
geojson_{{ cell.pk }}.push({
geojson_{{ cell.pk }}["{{ layer.slug }}"] = {
url: '{{ layer.url }}',
slug: '{{ layer.slug }}'
});
};
{% endfor %}
</script>
</div>