Add Villa Bismarck geojson; refactor layer options
This commit is contained in:
parent
f68216c84c
commit
378e14d56a
144
webgis/geojson/villa_bismarck_area.geojson
Normal file
144
webgis/geojson/villa_bismarck_area.geojson
Normal file
File diff suppressed because one or more lines are too long
@ -5,6 +5,7 @@ import API_CONFIG from "./config.js";
|
||||
import Icons from "./icons.js";
|
||||
import { SphericalPhoto } from "./components/SphericalPhoto.js";
|
||||
import { GisState } from "./state.js";
|
||||
import Options from "./layer_options.js";
|
||||
|
||||
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
|
||||
const BASE_URL = location.href;
|
||||
@ -28,47 +29,6 @@ GIS.INIT_ZOOM = 14;
|
||||
GIS.MIN_ZOOM = 11;
|
||||
GIS.MAX_ZOOM = 24;
|
||||
|
||||
const optionsVincoli = {
|
||||
color: '#222',
|
||||
opacity: 0.8,
|
||||
weight: 1,
|
||||
fillColor: '#fa7861',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
const optionsSiti = {
|
||||
color: '#800040',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#800040',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
const optionsGrotta = {
|
||||
color: '#205dac',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#205dac',
|
||||
fillOpacity: 0.8
|
||||
}
|
||||
const optionsPaesistici = {
|
||||
color: '#222',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#88d28d',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
const optionsFabbricati = {
|
||||
color: '#222',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#5b5d5f',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
const clusterOptions = {
|
||||
spiderfyOnMaxZoom: false,
|
||||
showCoverageOnHover: false,
|
||||
disableClusteringAtZoom: 19,
|
||||
};
|
||||
|
||||
/**
|
||||
* Capitalize a text string
|
||||
* @todo Move to utils
|
||||
@ -108,8 +68,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
L.control.scale({imperial: false}).addTo(map);
|
||||
L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
|
||||
|
||||
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
|
||||
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
|
||||
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', Options.constraintsArch);
|
||||
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', Options.constraintsLand);
|
||||
let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
|
||||
let buildings = await this.loadGeoJSON('fabbricati.geojson', Options.buildings, false);
|
||||
|
||||
await this.addLayerGroups(map);
|
||||
await this.fetchCartographyLayers();
|
||||
@ -130,6 +92,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
);
|
||||
const cartography = {
|
||||
'Catasto Agenzia delle Entrate (zoom per visualizzare)' : wmsLayer,
|
||||
'Limiti comuni' : boundaries,
|
||||
'Fabbricati' : buildings,
|
||||
'Vincoli archeologici' : layerVincoli,
|
||||
'Vincoli paesaggistici' : layerPaesistici,
|
||||
};
|
||||
@ -137,8 +101,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
|
||||
GisState.map = map;
|
||||
|
||||
//GisState.cartography.cadastral = wmsLayer;
|
||||
|
||||
return map;
|
||||
}
|
||||
/**
|
||||
@ -210,15 +172,20 @@ GIS.sites = async function () {
|
||||
let sitesData = await fetch(`${API_URL}/sites`)
|
||||
.then(data => data.json());
|
||||
|
||||
let sites = L.markerClusterGroup(clusterOptions);
|
||||
let sites = L.markerClusterGroup(Options.cluster);
|
||||
let geom = [];
|
||||
|
||||
for (let record of sitesData) {
|
||||
if (record.geojson) {
|
||||
const options = record.gisId === 'grotta_azzurra' ?
|
||||
optionsGrotta : optionsSiti;
|
||||
Options.grotta : Options.site;
|
||||
geom.push(await this.loadSiteLayer(record, options));
|
||||
}
|
||||
if (record.area) {
|
||||
const options = record.gisId === 'villa_bismarck' ?
|
||||
Options.bismarck : Options.site;
|
||||
geom.push(await this.loadSiteLayer(record, options, false, true));
|
||||
}
|
||||
|
||||
const marker = L.marker(
|
||||
record.coordinates,
|
||||
@ -250,7 +217,7 @@ GIS.notConserved = async function () {
|
||||
let notConserData = await fetch(`${API_URL}/not_conserved`)
|
||||
.then(data => data.json());
|
||||
|
||||
let notConserved = L.markerClusterGroup(clusterOptions);
|
||||
let notConserved = L.markerClusterGroup(Options.cluster);
|
||||
|
||||
for (let record of notConserData.records) {
|
||||
const marker = L.marker(
|
||||
@ -280,7 +247,7 @@ GIS.findings = async function () {
|
||||
.then(data => data.json());
|
||||
|
||||
let findings = L.markerClusterGroup(
|
||||
clusterOptions
|
||||
Options.cluster
|
||||
);
|
||||
|
||||
for (let record of findingsData) {
|
||||
@ -312,7 +279,7 @@ GIS.prehistoric = async function () {
|
||||
.then(data => data.json());
|
||||
|
||||
let prehistoric = L.markerClusterGroup(
|
||||
clusterOptions
|
||||
Options.cluster
|
||||
);
|
||||
|
||||
for (let record of data.records) {
|
||||
@ -344,7 +311,7 @@ GIS.underwater = async function () {
|
||||
let underwaterData = await fetch(`${API_URL}/underwater`)
|
||||
.then(data => data.json());
|
||||
|
||||
let underwater = L.markerClusterGroup(clusterOptions);
|
||||
let underwater = L.markerClusterGroup(Options.cluster);
|
||||
|
||||
for (let record of underwaterData.records) {
|
||||
const marker = L.marker(
|
||||
@ -369,7 +336,6 @@ GIS.underwater = async function () {
|
||||
/**
|
||||
* Adds layers to map and returns an object
|
||||
* with {baseMap, archeoLayers, sitesLayerGroup}
|
||||
* @todo Load areas for sites that have them!!
|
||||
* @param {L.Map} map
|
||||
* @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
|
||||
*/
|
||||
@ -388,16 +354,12 @@ GIS.initLayers = async function(map) {
|
||||
maxZoom: GIS.MAX_ZOOM,
|
||||
attribution: '© Mapbox'
|
||||
});
|
||||
let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
|
||||
let buildings = await this.loadGeoJSON('fabbricati.geojson', optionsFabbricati, false);
|
||||
let baseCatasto = new L.LayerGroup([buildings, boundaries]);
|
||||
|
||||
const baseGroup = new L.LayerGroup([osmap]);
|
||||
baseGroup.addTo(map);
|
||||
const baseMap = {
|
||||
"OpenStreetMap" : osmap,
|
||||
"Satellite" : mapbox,
|
||||
"Fabbricati e limiti comuni" : baseCatasto,
|
||||
};
|
||||
|
||||
return baseMap;
|
||||
@ -478,9 +440,10 @@ GIS.loadGeoJSON = async function (geoJSON, options, popup = true) {
|
||||
* @param {boolean} popup Should the features have a popup?
|
||||
* @returns {L.Layer}
|
||||
*/
|
||||
GIS.loadSiteLayer = async function (site, options, popup = true) {
|
||||
const geoJSON = `${site.gisId}.geojson`;
|
||||
const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
|
||||
GIS.loadSiteLayer = async function (site, options, popup = true, area = false) {
|
||||
let geoJSON = site.gisId;
|
||||
geoJSON += area ? '_area.geojson' : '.geojson';
|
||||
const geo = await fetch(`${BASE_URL}geojson/${geoJSON}`)
|
||||
.then(res => res.json())
|
||||
.catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
|
||||
|
||||
|
||||
54
webgis/js/layer_options.js
Normal file
54
webgis/js/layer_options.js
Normal file
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* @namespace Options
|
||||
*/
|
||||
let Options = {};
|
||||
|
||||
Options.constraintsArch = {
|
||||
color: '#222',
|
||||
opacity: 0.8,
|
||||
weight: 1,
|
||||
fillColor: '#fa7861',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
Options.site = {
|
||||
color: '#800040',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#800040',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
Options.grotta = {
|
||||
color: '#205dac',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#205dac',
|
||||
fillOpacity: 0.8
|
||||
}
|
||||
Options.bismarck = {
|
||||
color: '#a4a79a',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#a4a79a',
|
||||
fillOpacity: 0.8
|
||||
}
|
||||
Options.constraintsLand = {
|
||||
color: '#222',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#88d28d',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
Options.buildings = {
|
||||
color: '#222',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#5b5d5f',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
Options.cluster = {
|
||||
spiderfyOnMaxZoom: false,
|
||||
showCoverageOnHover: false,
|
||||
disableClusteringAtZoom: 19,
|
||||
};
|
||||
|
||||
export default Options;
|
||||
Loading…
Reference in New Issue
Block a user