diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html index d7fe805..1eab624 100644 --- a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html +++ b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html @@ -38,26 +38,6 @@ map.addControl(new maplibregl.NavigationControl({showCompass: false})); - - {% 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/bulma-partial-rescue-organization-minimal-map.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 () => { // Load adoption notices as geojson @@ -126,7 +106,73 @@ }); - // inspect a cluster on click + // Load rescue_orgs as geojson + map.addSource('rescue-orgs', { + type: 'geojson', + data: '{% url "api-organization-list-geojson" %}', + cluster: true, + clusterMaxZoom: 14, + clusterRadius: 50 + }); + + // Layer for clusters + map.addLayer({ + id: 'org-clusters', + type: 'circle', + source: 'rescue-orgs', + filter: ['has', 'point_count'], + paint: { + 'circle-color': [ + 'step', + ['get', 'point_count'], + '#51bbd6', + 100, + '#f1f075', + 750, + '#f28cb1' + ], + 'circle-radius': [ + 'step', + ['get', 'point_count'], + 20, + 100, + 30, + 750, + 40 + ] + } + }); + + map.addLayer({ + id: 'org-cluster-count', + type: 'symbol', + source: 'rescue-orgs', + filter: ['has', 'point_count'], + layout: { + 'text-field': '{point_count_abbreviated}', + 'text-size': 12, + 'text-font': ['open_sans_medium'], + } + }); + + const org_image = await map.loadImage('{% static 'fellchensammlung/img/animal_shelter.png' %}'); + map.addImage('org', org_image.data); + + + map.addLayer({ + id: 'org-unclustered-point', + type: 'symbol', + source: 'rescue-orgs', + filter: ['!', ['has', 'point_count']], + layout: { + 'icon-image': 'org', + 'icon-size': 0.07, + 'icon-allow-overlap': true + } + }); + + + // inspect an AN cluster on click map.on('click', 'clusters', async (e) => { const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] @@ -139,6 +185,19 @@ }); }); + // inspect an org cluster on click + map.on('click', 'org-clusters', async (e) => { + const features = map.queryRenderedFeatures(e.point, { + layers: ['org-clusters'] + }); + const clusterId = features[0].properties.cluster_id; + const zoom = await map.getSource('rescue-orgs').getClusterExpansionZoom(clusterId); + map.easeTo({ + center: features[0].geometry.coordinates, + zoom + }); + }); + // When a click event occurs on a feature in // the unclustered-point layer, open a popup at // the location of the feature, with @@ -189,6 +248,31 @@ .addTo(map); }); + // Same for orgs + map.on('click', 'org-unclustered-point', (e) => { + const coordinates = e.features[0].geometry.coordinates.slice(); + const name = e.features[0].properties.name; + const url = e.features[0].properties.url; + const description = e.features[0].properties.description; + const location_hr = e.features[0].properties.location_hr; + + while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { + coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; + } + + + new maplibregl.Popup() + .setLngLat(coordinates) + .setHTML(` +
` + ) + .addTo(map); + }); + map.on('mouseenter', 'clusters', () => { map.getCanvas().style.cursor = 'pointer'; }); @@ -196,6 +280,13 @@ map.getCanvas().style.cursor = ''; }); + map.on('mouseenter', 'org-clusters', () => { + map.getCanvas().style.cursor = 'pointer'; + }); + map.on('mouseleave', 'org-clusters', () => { + map.getCanvas().style.cursor = ''; + }); + image = await map.loadImage('{% static "fellchensammlung/img/pin.png" %}'); map.addImage('pin', image.data); {% for map_pin in map_pins %}