Zoom levels for clusters

css/app.css

@@ -120,9 +120,13 @@ a:visited {
 .modal {
     z-index: 1000;
 }
-.modal-content {
+.modal-content,
+.modal-card {
     width: 60vw;
 }
+.modal-card {
+    min-height: 95vh;
+}
 .has-bottom-border {
     border-bottom: 1px #aaa solid;
 }

webgis/js/controllers/marker_controller.js

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

webgis/js/controllers/modal_controller.js

@@ -3,6 +3,24 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
     static targets = ['close', 'modal'];
 
+    current(id) {
+        return this.modalTargets.find(m => m.getAttribute('data-id') === id);
+    }
+
+    homeOpen(event) {
+        const id = event.currentTarget.getAttribute('data-id');
+        const current = this.current(id);
+
+        current.classList.add('is-active');
+    }
+
+    homeClose(event) {
+        const id = event.currentTarget.getAttribute('data-id');
+        const current = this.current(id);
+
+        current.classList.remove('is-active');
+    }
+
     open() {
         this.modalTarget.classList.add('is-active');
     }

webgis/js/gis.js

@@ -100,7 +100,7 @@ function capitalize(text) {
 /**
  * @param {string} mapId
  * @param {number} zoomLevel
- * @returns {{map: Map, sites: Layer}}
+ * @returns {Map}
  */
 GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     L.LayerGroup.include({
@@ -115,7 +115,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     
     let map = L.map(mapId, {
         //attributionControl: false,
-        minZoom: 2,
+        minZoom: 11,
     }).setView(this.CENTER_COORDS, zoomLevel);
 
     map.crs = L.CRS.EPSG4326;
@@ -146,16 +146,12 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     notConservedGroup.addTo(map);
     findingsGroup.addTo(map);
 
-    L.control.layers(
-        baseMap,
-        archeo,
-    ).addTo(map);
+    L.control.layers(baseMap, archeo).addTo(map);
 
     // TEMP!! Remove point for Lo Pozzo...
     map.removeLayer(sitesGroup.customGetLayer('lopozzo'));
 
-    // TODO Horrible?
-    return {map: map, sites: sitesGroup};
+    return map;
 }
 /**
  * Create markers for sites
@@ -164,7 +160,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
  */
 GIS.sitesMarkers = async function (sitesGroup) {
     let sitesMarkers = L.markerClusterGroup({
-        showCoverageOnHover: false
+        showCoverageOnHover: false,
+        disableClusteringAtZoom: 19,
     });
 
     for (let id in MARKER_NAMES.sites) {
@@ -207,7 +204,8 @@ GIS.notConserved = async function () {
         .then(data => data.json());
 
     let notConserved = L.markerClusterGroup({
-        showCoverageOnHover: false
+        showCoverageOnHover: false,
+        disableClusteringAtZoom: 19,
     });
 
     for (let record of notConserData.records) {
@@ -233,7 +231,8 @@ GIS.findings = async function () {
         .then(data => data.json());
 
     let findings = L.markerClusterGroup({
-        showCoverageOnHover: false
+        showCoverageOnHover: false,
+        disableClusteringAtZoom: 19,
     });
 
     for (let record of findingsData) {

webgis/js/index.js

@@ -12,9 +12,8 @@ document.addEventListener('DOMContentLoaded', async () => {
     initStimulus();
 
     let progress = document.querySelector('progress');
-    const init = await GIS.initMap('map');
+    const map = await GIS.initMap('map');
     progress.classList.add('is-hidden');
-    let {map, sites} = init;
 
     map._container.setAttribute('aria-busy', false);