Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spiderfying observations #292

Merged
merged 3 commits into from
Jul 17, 2024
Merged

Spiderfying observations #292

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aed8f02
Rename *layers as *layer
damianooldoni Jul 17, 2024
54bae1b
First attempt to spiderfy markers
damianooldoni Jul 17, 2024
39d7770
Improve spiderfying
damianooldoni Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 57 additions & 21 deletions _layouts/map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,49 @@
margin-right: 8px;
opacity: 0.7;
}
.custom-div-icon {
background: transparent;
border: none;
}
</style>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>
<script>
// Initialize the map
var map = L.map('map', {
center: [51.0, 4.15], // Set the center of the map
zoom: 8 // Set the zoom level
});

// Initialize the spiderfier
var oms = new OverlappingMarkerSpiderfier(map, {
keepSpiderfied: true,
nearbyDistance: 20,
circleSpiralSwitchover: 9,
legWeight: 1
});

map.on('zoomend moveend', function() {
oms.unspiderfy();
});

var popup = new L.Popup();
oms.addListener('click', function(marker) {
map.closePopup(); // Close any open popups
popup.setContent(marker.getPopup().getContent());
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});

oms.addListener('spiderfy', function(markers) {
map.closePopup(); // Close any open popups
});

oms.addListener('unspiderfy', function(markers) {
map.closePopup(); // Close any open popups
});

// Define tile layers (background layers)
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
Expand Down Expand Up @@ -99,8 +132,8 @@

// Layer groups for markers
const markersLayer = L.layerGroup();
const newOccsLayers = L.layerGroup();
const histOccsLayers = L.layerGroup();
const newOccsLayer = L.layerGroup();
const histOccsLayer = L.layerGroup();
const absencesLayer = L.layerGroup();

// Function to read the CSV file
Expand Down Expand Up @@ -177,32 +210,31 @@
const lat = parseFloat(item.decimalLatitude);
const lon = parseFloat(item.decimalLongitude);
if (!isNaN(lat) && !isNaN(lon)) {
const speciesInfo = speciesColorsVernacularNames[item.species] || {color: 'gray', vernacularName: 'null'};
const circle = L.circleMarker([lat, lon], {
radius: 5,
color: speciesInfo.color,
fillColor: speciesInfo.color,
fillOpacity: 0.95,
stroke: false
const speciesInfo = speciesColorsVernacularNames[item.species] || {color: 'gray', vernacularName: 'null'};
const marker = L.marker([lat, lon], {
icon: L.divIcon({
className: 'custom-div-icon',
html: `<div style="background-color:${speciesInfo.color}; width:10px; height:10px; border-radius:50%;"></div>`,
iconSize: [10, 10],
iconAnchor: [5, 5]
})
});
// Create basic popup content
let popupContent = `<b>${speciesInfo.vernacularName}</b><br>${item.eventDate}`;
if (item.references) {
// Add reference link if present, typically with link to observation on waarnemingen.be
popupContent += `<br><a href="${item.references}" target="_blank">${item.references}</a>`;
} else {
// Add link to the occurrence as published on GBIF
popupContent += `<br><a href="https://www.gbif.org/occurrence/${item.key}" target="_blank">https://www.gbif.org/occurrence/${item.key}</a>`;
popupContent += `<br><a href="https://www.gbif.org/occurrence/${item.key}" target="_blank">https://www.gbif.org/occurrence/${item.key}</a>`;
}
// Add popup
circle.bindPopup(popupContent);
// Add circle to layer
occsLayer.addLayer(circle);
marker.bindPopup(popupContent);
// Add marker to layer and spiderfier
occsLayer.addLayer(marker);
oms.addMarker(marker);
}
});
return occsLayer;
}

// Function to read the JSON data from the API and add them to the leaflet map
async function readAndShowJSON(apiUrl, occsLayer) {
// Call the function to fetch all data
Expand Down Expand Up @@ -230,12 +262,16 @@
// Call the functions to read the CSV and add the results to the leaflet
readAndShow(localitiesURL);
// Call the functions to read the recent occurrences (JSON) and add them to the leaflet map
await readAndShowJSON(recentDataUrl, newOccsLayers);
newOccsLayers.addTo(map);
await readAndShowJSON(recentDataUrl, newOccsLayer);
newOccsLayer.addTo(map);
// Call the functions to read the recent absences (JSON) and add them to the leaflet map
await readAndShowJSON(absencesUrl, absencesLayer);
// Call the functions to read the historical occurrences (JSON) and add them to the leaflet map
await readAndShowJSON(historicalDataUrl, histOccsLayers);
await readAndShowJSON(historicalDataUrl, histOccsLayer);
// Add all markers to the spiderfier
newOccsLayer.eachLayer(marker => oms.addMarker(marker));
absencesLayer.eachLayer(marker => oms.addMarker(marker));
histOccsLayer.eachLayer(marker => oms.addMarker(marker));
}

// Execute main function when the script loads
Expand All @@ -250,8 +286,8 @@
},
{
'Gereserveerde locaties': markersLayer,
'Nieuwe waarnemingen': newOccsLayers,
'Historische waarnemingen': histOccsLayers,
'Nieuwe waarnemingen': newOccsLayer,
'Historische waarnemingen': histOccsLayer,
'Null waarnemingen': absencesLayer
},
{
Expand Down