90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
import { Controller } from "@hotwired/stimulus";
|
|
import { GisState, getMarkerByCoords } from "../state.js";
|
|
import UI from "../ui.js";
|
|
|
|
export default class extends Controller {
|
|
static values = {
|
|
'coords': String,
|
|
'group': String,
|
|
'id': String,
|
|
};
|
|
|
|
uiModals = {
|
|
sites: '#site-data',
|
|
notConserved: '#not-conser-data',
|
|
finding: '#finding-data',
|
|
prehist: '#prehist-data',
|
|
reuse: '#reuse-data',
|
|
};
|
|
|
|
END_ZOOM = 19;
|
|
|
|
go() {
|
|
let map = GisState.map;
|
|
const coords = this.coordsValue.split(' ');
|
|
|
|
map.setView(
|
|
coords,
|
|
this.END_ZOOM,
|
|
{animate: false}
|
|
);
|
|
|
|
let marker = this.getMarker(map, coords);
|
|
// DEBUG for sites
|
|
//if (this.groupValue) marker = getMarkerByCoords(coords, this.groupValue);
|
|
marker?.openTooltip();
|
|
|
|
return marker;
|
|
}
|
|
/**
|
|
* Go to a marker location on the map
|
|
* and open its modal
|
|
*/
|
|
goAndOpen() {
|
|
const marker = this.go();
|
|
const selector = this.uiModals[this.groupValue];
|
|
const data = marker.options.data;
|
|
|
|
switch(this.groupValue) {
|
|
case 'sites':
|
|
UI.openSiteModal(data, selector);
|
|
break;
|
|
case 'notConserved':
|
|
UI.openNotConserModal(data, selector);
|
|
break;
|
|
case 'finding':
|
|
UI.openFindingModal(data, selector);
|
|
break;
|
|
case 'prehist':
|
|
UI.openPrehistModal(data, selector);
|
|
break;
|
|
case 'reuse':
|
|
UI.openReuseModal(data, selector);
|
|
break;
|
|
default:
|
|
console.log('Cannot open modal...');
|
|
break;
|
|
}
|
|
}
|
|
/**
|
|
* @param {L.Map} map
|
|
* @param {Array<String>} coords
|
|
* @returns {L.Marker}
|
|
*/
|
|
getMarker(map, coords) {
|
|
let marker;
|
|
map.eachLayer(layer => {
|
|
if (layer instanceof L.Marker) {
|
|
const latLng = layer.getLatLng();
|
|
const {lat, lng} = latLng;
|
|
if (lat === Number(coords[0]) && lng === Number(coords[1])) {
|
|
marker = layer;
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
|
|
return marker;
|
|
}
|
|
}
|