feat: Show search radius only if a search center is given and correct zoom level if no location is given
This commit is contained in:
parent
c46a943c7f
commit
2dc038dfef
@ -14,22 +14,23 @@
|
|||||||
|
|
||||||
<!-- start map -->
|
<!-- start map -->
|
||||||
<script>
|
<script>
|
||||||
{% if map_center %}
|
|
||||||
var center = [{{ map_center.longitude | pointdecimal }}, {{ map_center.latitude | pointdecimal }}];
|
|
||||||
{% else %}
|
|
||||||
var center = [10.49, 50.68];
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if zoom_level %}
|
{% if zoom_level %}
|
||||||
var zoom_level = {{ zoom_level }};
|
var zoom_level = {{ zoom_level }};
|
||||||
{% else %}
|
{% else %}
|
||||||
var zoom_level = 4;
|
var zoom_level = 4;
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if map_center %}
|
||||||
|
var map_center = [{{ map_center.longitude | pointdecimal }}, {{ map_center.latitude | pointdecimal }}];
|
||||||
|
{% else %}
|
||||||
|
var map_center = [10.49, 50.68]; <!-- Point middle of Germany -->
|
||||||
|
zoom_level = 4; //Overwrite zoom level when no place is found
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
let map = new maplibregl.Map({
|
let map = new maplibregl.Map({
|
||||||
container: 'map',
|
container: 'map',
|
||||||
style: '{% static "fellchensammlung/map/styles/colorful.json" %}',
|
style: '{% static "fellchensammlung/map/styles/colorful.json" %}',
|
||||||
center: center,
|
center: map_center,
|
||||||
zoom: zoom_level
|
zoom: zoom_level
|
||||||
}).addControl(new maplibregl.NavigationControl());
|
}).addControl(new maplibregl.NavigationControl());
|
||||||
|
|
||||||
@ -102,14 +103,15 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
{% if search_radius %}
|
{% if search_center %}
|
||||||
|
var search_center = [{{ search_center.longitude | pointdecimal }}, {{ search_center.latitude | pointdecimal }}];
|
||||||
map.on('load', () => {
|
map.on('load', () => {
|
||||||
const radius = {{ search_radius }}; // kilometer
|
const radius = {{ search_radius }}; // kilometer
|
||||||
const options = {
|
const options = {
|
||||||
steps: 64,
|
steps: 64,
|
||||||
units: 'kilometers'
|
units: 'kilometers'
|
||||||
};
|
};
|
||||||
const circle = turf.circle(center, radius, options);
|
const circle = turf.circle(search_center, radius, options);
|
||||||
|
|
||||||
// Add the circle as a GeoJSON source
|
// Add the circle as a GeoJSON source
|
||||||
map.addSource('location-radius', {
|
map.addSource('location-radius', {
|
||||||
|
@ -204,6 +204,7 @@ def search(request):
|
|||||||
"searched": searched,
|
"searched": searched,
|
||||||
"adoption_notices_map": AdoptionNotice.get_active_ANs(),
|
"adoption_notices_map": AdoptionNotice.get_active_ANs(),
|
||||||
"map_center": search.position,
|
"map_center": search.position,
|
||||||
|
"search_center": search.position,
|
||||||
"map_pins": [search],
|
"map_pins": [search],
|
||||||
"location": search.location,
|
"location": search.location,
|
||||||
"search_radius": search.max_distance,
|
"search_radius": search.max_distance,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user