refactor: remove old partial for map
This commit is contained in:
@@ -1,146 +0,0 @@
|
|||||||
{% load static %}
|
|
||||||
{% load custom_tags %}
|
|
||||||
{% load i18n %}
|
|
||||||
|
|
||||||
<!-- add MapLibre JavaScript and CSS -->
|
|
||||||
<script src="{% settings_value "MAP_TILE_SERVER" %}/assets/lib/maplibre-gl/maplibre-gl.js"></script>
|
|
||||||
<link href="{% settings_value "MAP_TILE_SERVER" %}/assets/lib/maplibre-gl/maplibre-gl.css" rel="stylesheet"/>
|
|
||||||
|
|
||||||
<!-- add Turf see https://maplibre.org/maplibre-gl-js/docs/examples/draw-a-radius/ -->
|
|
||||||
<script src="{% static 'fellchensammlung/js/turf.min.js' %}"></script>
|
|
||||||
|
|
||||||
<!-- add container for the map -->
|
|
||||||
<div id="map" style="width:100%;aspect-ratio:16/9"></div>
|
|
||||||
|
|
||||||
<!-- start map -->
|
|
||||||
<script>
|
|
||||||
{% if zoom_level %}
|
|
||||||
var zoom_level = {{ zoom_level }};
|
|
||||||
{% else %}
|
|
||||||
var zoom_level = 4;
|
|
||||||
{% 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({
|
|
||||||
container: 'map',
|
|
||||||
style: '{% static "fellchensammlung/map/styles/colorful/style.json" %}',
|
|
||||||
center: map_center,
|
|
||||||
zoom: zoom_level
|
|
||||||
}).addControl(new maplibregl.NavigationControl());
|
|
||||||
|
|
||||||
{% for adoption_notice in adoption_notices_map %}
|
|
||||||
{% if adoption_notice.location %}
|
|
||||||
// create the popup
|
|
||||||
const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/partial-adoption-notice-minimal.html" %}`);
|
|
||||||
|
|
||||||
// create DOM element for the marker
|
|
||||||
const el_{{ forloop.counter }} = document.createElement('div');
|
|
||||||
el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}';
|
|
||||||
el_{{ forloop.counter }}.classList.add('marker');
|
|
||||||
|
|
||||||
const location_popup_{{ forloop.counter }} = [{{ adoption_notice.location.longitude | pointdecimal }}, {{ adoption_notice.location.latitude | pointdecimal }}];
|
|
||||||
// create the marker
|
|
||||||
new maplibregl.Marker({element: el_{{ forloop.counter }}})
|
|
||||||
.setLngLat(location_popup_{{ forloop.counter }})
|
|
||||||
.setPopup(popup_{{ forloop.counter }}) // sets a popup on this marker
|
|
||||||
.addTo(map);
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
{% for rescue_organization in rescue_organizations %}
|
|
||||||
{% if rescue_organization.location %}
|
|
||||||
// create the popup
|
|
||||||
const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/partial-rescue-organization.html" %}`);
|
|
||||||
|
|
||||||
// create DOM element for the marker
|
|
||||||
const el_{{ forloop.counter }} = document.createElement('div');
|
|
||||||
el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}';
|
|
||||||
el_{{ forloop.counter }}.classList.add('animal-shelter-marker', 'marker');
|
|
||||||
|
|
||||||
const location_popup_{{ forloop.counter }} = [{{ rescue_organization.location.longitude | pointdecimal }}, {{ rescue_organization.location.latitude | pointdecimal }}];
|
|
||||||
// create the marker
|
|
||||||
new maplibregl.Marker({element: el_{{ forloop.counter }}})
|
|
||||||
.setLngLat(location_popup_{{ forloop.counter }})
|
|
||||||
.setPopup(popup_{{ forloop.counter }}) // sets a popup on this marker
|
|
||||||
.addTo(map);
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
map.on('load', async () => {
|
|
||||||
image = await map.loadImage('{% static "fellchensammlung/img/pin.png" %}');
|
|
||||||
map.addImage('pin', image.data);
|
|
||||||
{% for map_pin in map_pins %}
|
|
||||||
map.addSource('point_{{ forloop.counter }}', {
|
|
||||||
'type': 'geojson',
|
|
||||||
'data': {
|
|
||||||
'type': 'FeatureCollection',
|
|
||||||
'features': [
|
|
||||||
{
|
|
||||||
'type': 'Feature',
|
|
||||||
'geometry': {
|
|
||||||
'type': 'Point',
|
|
||||||
'coordinates': [{{ map_pin.location.longitude | pointdecimal }}, {{ map_pin.location.latitude | pointdecimal }}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
map.addLayer({
|
|
||||||
'id': 'point_{{ forloop.counter }}',
|
|
||||||
'type': 'circle',
|
|
||||||
'source': 'point_{{ forloop.counter }}',
|
|
||||||
'paint': {
|
|
||||||
'circle-radius': 18,
|
|
||||||
'circle-color': '#ff878980'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
{% endfor %}
|
|
||||||
});
|
|
||||||
|
|
||||||
{% if search_center %}
|
|
||||||
var search_center = [{{ search_center.longitude | pointdecimal }}, {{ search_center.latitude | pointdecimal }}];
|
|
||||||
map.on('load', () => {
|
|
||||||
const radius = {{ search_radius }}; // kilometer
|
|
||||||
const options = {
|
|
||||||
steps: 64,
|
|
||||||
units: 'kilometers'
|
|
||||||
};
|
|
||||||
const circle = turf.circle(search_center, radius, options);
|
|
||||||
|
|
||||||
// Add the circle as a GeoJSON source
|
|
||||||
map.addSource('location-radius', {
|
|
||||||
type: 'geojson',
|
|
||||||
data: circle
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add a fill layer with some transparency
|
|
||||||
map.addLayer({
|
|
||||||
id: 'location-radius',
|
|
||||||
type: 'fill',
|
|
||||||
source: 'location-radius',
|
|
||||||
paint: {
|
|
||||||
'fill-color': 'rgba(140,207,255,0.3)',
|
|
||||||
'fill-opacity': 0.5
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add a line layer to draw the circle outline
|
|
||||||
map.addLayer({
|
|
||||||
id: 'location-radius-outline',
|
|
||||||
type: 'line',
|
|
||||||
source: 'location-radius',
|
|
||||||
paint: {
|
|
||||||
'line-color': '#0094ff',
|
|
||||||
'line-width': 3
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user