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 Icons from "./icons.js";
|
||||||
import { SphericalPhoto } from "./components/SphericalPhoto.js";
|
import { SphericalPhoto } from "./components/SphericalPhoto.js";
|
||||||
import { GisState } from "./state.js";
|
import { GisState } from "./state.js";
|
||||||
|
import Options from "./layer_options.js";
|
||||||
|
|
||||||
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
|
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
|
||||||
const BASE_URL = location.href;
|
const BASE_URL = location.href;
|
||||||
@ -28,47 +29,6 @@ GIS.INIT_ZOOM = 14;
|
|||||||
GIS.MIN_ZOOM = 11;
|
GIS.MIN_ZOOM = 11;
|
||||||
GIS.MAX_ZOOM = 24;
|
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
|
* Capitalize a text string
|
||||||
* @todo Move to utils
|
* @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.scale({imperial: false}).addTo(map);
|
||||||
L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
|
L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
|
||||||
|
|
||||||
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
|
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', Options.constraintsArch);
|
||||||
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
|
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.addLayerGroups(map);
|
||||||
await this.fetchCartographyLayers();
|
await this.fetchCartographyLayers();
|
||||||
@ -130,6 +92,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
|||||||
);
|
);
|
||||||
const cartography = {
|
const cartography = {
|
||||||
'Catasto Agenzia delle Entrate (zoom per visualizzare)' : wmsLayer,
|
'Catasto Agenzia delle Entrate (zoom per visualizzare)' : wmsLayer,
|
||||||
|
'Limiti comuni' : boundaries,
|
||||||
|
'Fabbricati' : buildings,
|
||||||
'Vincoli archeologici' : layerVincoli,
|
'Vincoli archeologici' : layerVincoli,
|
||||||
'Vincoli paesaggistici' : layerPaesistici,
|
'Vincoli paesaggistici' : layerPaesistici,
|
||||||
};
|
};
|
||||||
@ -137,8 +101,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
|||||||
|
|
||||||
GisState.map = map;
|
GisState.map = map;
|
||||||
|
|
||||||
//GisState.cartography.cadastral = wmsLayer;
|
|
||||||
|
|
||||||
return map;
|
return map;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
@ -210,15 +172,20 @@ GIS.sites = async function () {
|
|||||||
let sitesData = await fetch(`${API_URL}/sites`)
|
let sitesData = await fetch(`${API_URL}/sites`)
|
||||||
.then(data => data.json());
|
.then(data => data.json());
|
||||||
|
|
||||||
let sites = L.markerClusterGroup(clusterOptions);
|
let sites = L.markerClusterGroup(Options.cluster);
|
||||||
let geom = [];
|
let geom = [];
|
||||||
|
|
||||||
for (let record of sitesData) {
|
for (let record of sitesData) {
|
||||||
if (record.geojson) {
|
if (record.geojson) {
|
||||||
const options = record.gisId === 'grotta_azzurra' ?
|
const options = record.gisId === 'grotta_azzurra' ?
|
||||||
optionsGrotta : optionsSiti;
|
Options.grotta : Options.site;
|
||||||
geom.push(await this.loadSiteLayer(record, options));
|
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(
|
const marker = L.marker(
|
||||||
record.coordinates,
|
record.coordinates,
|
||||||
@ -250,7 +217,7 @@ GIS.notConserved = async function () {
|
|||||||
let notConserData = await fetch(`${API_URL}/not_conserved`)
|
let notConserData = await fetch(`${API_URL}/not_conserved`)
|
||||||
.then(data => data.json());
|
.then(data => data.json());
|
||||||
|
|
||||||
let notConserved = L.markerClusterGroup(clusterOptions);
|
let notConserved = L.markerClusterGroup(Options.cluster);
|
||||||
|
|
||||||
for (let record of notConserData.records) {
|
for (let record of notConserData.records) {
|
||||||
const marker = L.marker(
|
const marker = L.marker(
|
||||||
@ -280,7 +247,7 @@ GIS.findings = async function () {
|
|||||||
.then(data => data.json());
|
.then(data => data.json());
|
||||||
|
|
||||||
let findings = L.markerClusterGroup(
|
let findings = L.markerClusterGroup(
|
||||||
clusterOptions
|
Options.cluster
|
||||||
);
|
);
|
||||||
|
|
||||||
for (let record of findingsData) {
|
for (let record of findingsData) {
|
||||||
@ -312,7 +279,7 @@ GIS.prehistoric = async function () {
|
|||||||
.then(data => data.json());
|
.then(data => data.json());
|
||||||
|
|
||||||
let prehistoric = L.markerClusterGroup(
|
let prehistoric = L.markerClusterGroup(
|
||||||
clusterOptions
|
Options.cluster
|
||||||
);
|
);
|
||||||
|
|
||||||
for (let record of data.records) {
|
for (let record of data.records) {
|
||||||
@ -344,7 +311,7 @@ GIS.underwater = async function () {
|
|||||||
let underwaterData = await fetch(`${API_URL}/underwater`)
|
let underwaterData = await fetch(`${API_URL}/underwater`)
|
||||||
.then(data => data.json());
|
.then(data => data.json());
|
||||||
|
|
||||||
let underwater = L.markerClusterGroup(clusterOptions);
|
let underwater = L.markerClusterGroup(Options.cluster);
|
||||||
|
|
||||||
for (let record of underwaterData.records) {
|
for (let record of underwaterData.records) {
|
||||||
const marker = L.marker(
|
const marker = L.marker(
|
||||||
@ -369,7 +336,6 @@ GIS.underwater = async function () {
|
|||||||
/**
|
/**
|
||||||
* Adds layers to map and returns an object
|
* Adds layers to map and returns an object
|
||||||
* with {baseMap, archeoLayers, sitesLayerGroup}
|
* with {baseMap, archeoLayers, sitesLayerGroup}
|
||||||
* @todo Load areas for sites that have them!!
|
|
||||||
* @param {L.Map} map
|
* @param {L.Map} map
|
||||||
* @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
|
* @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
|
||||||
*/
|
*/
|
||||||
@ -388,16 +354,12 @@ GIS.initLayers = async function(map) {
|
|||||||
maxZoom: GIS.MAX_ZOOM,
|
maxZoom: GIS.MAX_ZOOM,
|
||||||
attribution: '© Mapbox'
|
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]);
|
const baseGroup = new L.LayerGroup([osmap]);
|
||||||
baseGroup.addTo(map);
|
baseGroup.addTo(map);
|
||||||
const baseMap = {
|
const baseMap = {
|
||||||
"OpenStreetMap" : osmap,
|
"OpenStreetMap" : osmap,
|
||||||
"Satellite" : mapbox,
|
"Satellite" : mapbox,
|
||||||
"Fabbricati e limiti comuni" : baseCatasto,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return baseMap;
|
return baseMap;
|
||||||
@ -478,9 +440,10 @@ GIS.loadGeoJSON = async function (geoJSON, options, popup = true) {
|
|||||||
* @param {boolean} popup Should the features have a popup?
|
* @param {boolean} popup Should the features have a popup?
|
||||||
* @returns {L.Layer}
|
* @returns {L.Layer}
|
||||||
*/
|
*/
|
||||||
GIS.loadSiteLayer = async function (site, options, popup = true) {
|
GIS.loadSiteLayer = async function (site, options, popup = true, area = false) {
|
||||||
const geoJSON = `${site.gisId}.geojson`;
|
let geoJSON = site.gisId;
|
||||||
const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
|
geoJSON += area ? '_area.geojson' : '.geojson';
|
||||||
|
const geo = await fetch(`${BASE_URL}geojson/${geoJSON}`)
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
|
.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