diff --git a/css/app.css b/css/app.css index e120306..cf95e69 100644 --- a/css/app.css +++ b/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; } diff --git a/webgis/js/controllers/marker_controller.js b/webgis/js/controllers/marker_controller.js index c8dc5cf..b28ed1b 100644 --- a/webgis/js/controllers/marker_controller.js +++ b/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, diff --git a/webgis/js/controllers/modal_controller.js b/webgis/js/controllers/modal_controller.js index c947ad9..97f3646 100644 --- a/webgis/js/controllers/modal_controller.js +++ b/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'); } diff --git a/webgis/js/gis.js b/webgis/js/gis.js index 5492430..f744dc5 100644 --- a/webgis/js/gis.js +++ b/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) { diff --git a/webgis/js/index.js b/webgis/js/index.js index 34bea4c..92504ca 100644 --- a/webgis/js/index.js +++ b/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);