nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Some refactoring and center map control (draft)

Browse Source
This commit is contained in:
Nicolò P 2024-03-22 12:30:19 +01:00
parent d315057ee0
commit 0e3e5b19ac
3 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/caprigis.js
View File

@ -5,6 +5,8 @@
*/ */
const GIS = {}; const GIS = {};
GIS.CENTER_COORDS = [40.5492, 14.2317];
GIS.INIT_ZOOM = 15;
const optionsVincoli = { const optionsVincoli = {
color: '#222', color: '#222',
opacity: 0.8, opacity: 0.8,
@ -54,7 +56,7 @@ function capitalize(text) {
* @param {number} zoomLevel * @param {number} zoomLevel
* @returns {{map: Map, sites: Layer}} * @returns {{map: Map, sites: Layer}}
*/ */
GIS.initMap = async function (mapId, zoomLevel = 15) { GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli); let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
let layerSiti = await this.loadLayer('siti.geojson', optionsSiti, false); let layerSiti = await this.loadLayer('siti.geojson', optionsSiti, false);
// TODO named parameters?? // TODO named parameters??
@ -68,7 +70,7 @@ GIS.initMap = async function (mapId, zoomLevel = 15) {
attributionControl: false, attributionControl: false,
minZoom: 11, minZoom: 11,
layers: [osmap, layerVincoli, layerSiti, layerPaesistici] layers: [osmap, layerVincoli, layerSiti, layerPaesistici]
}).setView([40.5492, 14.2317], zoomLevel); }).setView(this.CENTER_COORDS, zoomLevel);
map.crs = L.CRS.EPSG4326; map.crs = L.CRS.EPSG4326;

7
js/index.js
View File

@ -3,7 +3,10 @@ import UI from './ui.js';
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
const init = await GIS.initMap('map'); const init = await GIS.initMap('map');
let {map, sites} = init;
const centerCoords = init.sites.getBounds().getCenter(); UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
UI.addSitesControl(init.map, centerCoords, 'Grotta di Matermania');
const centerCoords = sites.getBounds().getCenter();
UI.addSitesControl(map, centerCoords, 'Grotta di Matermania');
}); });

30
js/ui.js
View File

@ -25,15 +25,35 @@ const siteIcon = `<svg
</svg>`; </svg>`;
/** /**
* Zoom and pan the map to a given layer position * Add a control to center the map
* @param {Map} map * @param {Map} map
* @param {Layer} layer * @param {LatLngExpression} centerCoords
* @param {number} zoom Zoom level * @param {number} zoom Zoom level
*/ */
UI.zoomToPosition = function (map, layer, zoom = 20) { UI.addCenterMapControl = function (map, centerCoords, zoom) {
const center = layer.getCenter(); L.Control.CenterControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
let controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
L.DomEvent
.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
.addListener(controlDiv, 'click', L.DomEvent.preventDefault)
.addListener(controlDiv, 'click', function () {
map.setView(centerCoords, zoom, {animate: true});
}
);
let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
controlUI.title = 'Centra la mappa';
controlUI.href = '#';
controlUI.innerHTML = siteIcon;
return controlDiv;
}
});
map.setView(center, zoom, {animate: true}); let centerCtr = new L.Control.CenterControl();
map.addControl(centerCtr);
} }
/** /**
* *