Marker clusters (draft)

webgis/js/components/Finding.js

@@ -96,7 +96,7 @@ export class Finding {
 
                 this.biblioElements.push(`
                     <div class="p-2 mt-2" id="ref-${biblio.id}">
-                        <p>${biblio.reference}</p>
+                        <p class="p-3">${biblio.reference}</p>
                     </div>
                 `);
             });

webgis/js/components/NotConservedSheet.js

@@ -66,7 +66,7 @@ export class NotConservedSheet {
 
                 this.biblioElements.push(`
                     <div class="p-2 mt-2" id="ref-${record.id}">
-                        <p>${record.reference}</p>
+                        <p class="p-3">${record.reference}</p>
                     </div>
                     `
                 );

webgis/js/components/SiteSheet.js

@@ -106,7 +106,7 @@ export class SiteSheet {
 
                 this.biblioElements.push(`
                     <div class="p-2 mt-2" id="ref-${record.id}">
-                        <p>${record.reference}</p>
+                        <p class="p-3">${record.reference}</p>
                     </div>
                     `
                 );

webgis/js/controllers/marker_controller.js

@@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
     static targets = ['coords'];
+    END_ZOOM = 20;
     mapAnimate = {
         animate: true,
         duration: 1,
@@ -14,7 +15,7 @@ export default class extends Controller {
 
         map.setView(
             coords,
-            19,
+            this.END_ZOOM,
             this.mapAnimate
         );
 

webgis/js/gis.js

@@ -160,10 +160,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 /**
  * Create markers for sites
  * @param {L.LayerGroup} sitesGroup
- * @returns {L.LayerGroup}
+ * @returns {L.markerClusterGroup}
  */
 GIS.sitesMarkers = async function (sitesGroup) {
-    let sitesMarkers = [];
+    let sitesMarkers = L.markerClusterGroup();
 
     for (let id in MARKER_NAMES.sites) {
         let layer = sitesGroup.customGetLayer(id);
@@ -191,23 +191,23 @@ GIS.sitesMarkers = async function (sitesGroup) {
         
         marker.on('click', () => UI.openSiteModal(data, '#site-data'));
 
-        sitesMarkers.push(marker);
+        sitesMarkers.addLayer(marker);
     }
 
-    return L.layerGroup(sitesMarkers);
+    return sitesMarkers;
 }
 /**
  * Create not conserved group
- * @returns {L.LayerGroup}
+ * @returns {L.MarkerClusterGroup}
  */
 GIS.notConserved = async function () {
     let notConserData = await fetch(`${API_URL}/not_conserved`)
         .then(data => data.json());
 
-    let notConserved = [];
+    let notConserved = L.markerClusterGroup();
 
     for (let record of notConserData.records) {
-        notConserved.push(L.marker(
+        notConserved.addLayer(L.marker(
                 record.coordinates,
                 {icon: Icons.notConserved}
             ).bindTooltip(record.denomination)
@@ -218,20 +218,20 @@ GIS.notConserved = async function () {
         );
     }
 
-    return L.layerGroup(notConserved);
+    return notConserved;
 }
 /**
  * Create findings group
- * @returns {L.LayerGroup}
+ * @returns {L.MarkerClusterGroup}
  */
 GIS.findings = async function () {
     let findingsData = await fetch(`${API_URL}/finding`)
         .then(data => data.json());
 
-    let findings = [];
+    let findings = L.markerClusterGroup();
 
     for (let record of findingsData) {
-        findings.push(L.marker(
+        findings.addLayer(L.marker(
                 record.coordinates,
                 {icon: Icons.finding}
             ).bindTooltip(record.object)
@@ -242,7 +242,7 @@ GIS.findings = async function () {
         );
     }
 
-    return L.layerGroup(findings);
+    return findings;
 }
 /*
 GIS._prepareLayers = async function(layer) {

webgis/js/package.json

@@ -11,6 +11,7 @@
     "bulma": "^1.0.1",
     "fontawesome-free": "^1.0.4",
     "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
     "spotlight.js": "^0.7.8"
   },
   "devDependencies": {}

webgis/js/yarn.lock

@@ -29,6 +29,11 @@ fontawesome-free@^1.0.4:
   resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b"
   integrity sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw==
 
+leaflet.markercluster@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
+  integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
+
 leaflet@^1.9.4:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"