maps: add support for max map bounds (#18913)
This commit is contained in:
parent
f18a8ccda6
commit
02554258af
|
@ -227,4 +227,5 @@ class Map(CellBase):
|
|||
ctx['geojson_url'] = reverse_lazy('mapcell-geojson', kwargs={'cell_id': self.pk})
|
||||
ctx['tile_urltemplate'] = settings.COMBO_MAP_TILE_URLTEMPLATE
|
||||
ctx['map_attribution'] = settings.COMBO_MAP_ATTRIBUTION
|
||||
ctx['max_bounds'] = settings.COMBO_MAP_MAX_BOUNDS
|
||||
return ctx
|
||||
|
|
|
@ -58,6 +58,11 @@ $(function() {
|
|||
var geojson_url = $map_widget.data('geojson-url');
|
||||
var map_tile_url = $map_widget.data('tile-urltemplate');
|
||||
var map_attribution = $map_widget.data('map-attribution');
|
||||
if ($map_widget.data('max-bounds-lat1')) {
|
||||
map_options.maxBounds = L.latLngBounds(
|
||||
L.latLng($map_widget.data('max-bounds-lat1'), $map_widget.data('max-bounds-lng1')),
|
||||
L.latLng($map_widget.data('max-bounds-lat2'), $map_widget.data('max-bounds-lng2')))
|
||||
}
|
||||
var map = L.map($map_widget[0], map_options);
|
||||
var map_controls_position = $('body').data('map-controls-position') || 'topleft';
|
||||
new L.Control.Zoom({position: map_controls_position}).addTo(map);
|
||||
|
@ -69,6 +74,10 @@ $(function() {
|
|||
if (init_state == 'device-location') {
|
||||
map.locate({timeout: 10000, maximumAge: 300000, enableHighAccuracy: false});
|
||||
map.on('locationfound', function(e) {
|
||||
if (map_options.maxBounds && ! map_options.maxBounds.contains(e.latlng)) {
|
||||
/* ouf of bounds, keep map centered on default position */
|
||||
return;
|
||||
}
|
||||
map.setView(e.latlng, map_options.zoom);
|
||||
});
|
||||
}
|
||||
|
|
|
@ -1,6 +1,17 @@
|
|||
{% load l10n %}
|
||||
{% if title %}<h2>{{ title }}</h2>{% endif %}
|
||||
{% localize off %}
|
||||
<div class="combo-cell-map" data-init-state="{{ initial_state }}" data-init-zoom="{{ initial_zoom }}" data-min-zoom="{{ min_zoom }}" data-max-zoom="{{ max_zoom }}" data-init-lat="{{ init_lat }}" data-init-lng="{{ init_lng }}" data-geojson-url="{{ geojson_url }}" data-tile-urltemplate="{{ tile_urltemplate}}" data-map-attribution="{{ map_attribution}}">
|
||||
<div class="combo-cell-map" data-init-state="{{ initial_state }}"
|
||||
data-init-zoom="{{ initial_zoom }}" data-min-zoom="{{ min_zoom }}"
|
||||
data-max-zoom="{{ max_zoom }}" data-init-lat="{{ init_lat }}"
|
||||
data-init-lng="{{ init_lng }}" data-geojson-url="{{ geojson_url }}"
|
||||
data-tile-urltemplate="{{ tile_urltemplate}}" data-map-attribution="{{ map_attribution}}"
|
||||
{% if max_bounds.corner1.lat %}
|
||||
data-max-bounds-lat1="{{ max_bounds.corner1.lat }}"
|
||||
data-max-bounds-lng1="{{ max_bounds.corner1.lng }}"
|
||||
data-max-bounds-lat2="{{ max_bounds.corner2.lat }}"
|
||||
data-max-bounds-lng2="{{ max_bounds.corner2.lng }}"
|
||||
{% endif %}
|
||||
>
|
||||
{% endlocalize %}
|
||||
</div>
|
||||
|
|
|
@ -293,6 +293,12 @@ COMBO_MAP_DEFAULT_POSITION = {'lat': '48.83369263315934',
|
|||
'lng': '2.3233688436448574'
|
||||
}
|
||||
|
||||
# default map bounds
|
||||
COMBO_MAP_MAX_BOUNDS = {
|
||||
'corner1': {'lat': None, 'lng': None},
|
||||
'corner2': {'lat': None, 'lng': None}
|
||||
}
|
||||
|
||||
# default map tiles url
|
||||
COMBO_MAP_TILE_URLTEMPLATE = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||
|
||||
|
|
Loading…
Reference in New Issue