Skip to content
Snippets Groups Projects
Commit bfa23a86 authored by digrazia2038's avatar digrazia2038 Committed by Benguria Elguezabal, Gorka
Browse files

minor

parent 956bca0b
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/app/pages/map-layers/map/map-modal/map-modal.component.html
+ 7
− 10
View file @ bfa23a86
<nb-card [size]="'medium'">
<nb-card-body>
<nb-card size="small">
<nb-card-header>
{{ layer}}
</nb-card-header>
<nb-card-body>
{{ description }}
</nb-card-body>
<p>{{ description }}</p>
</nb-card-body>
</nb-card>
\ No newline at end of file
src/app/pages/map-layers/map/map.component.ts
+ 111
− 31
View file @ bfa23a86
......@@ -9,15 +9,16 @@ import Messina_cycling_path from '../../../../assets/map/map-component-maps/mess
import Messina_ATM_Stops from '../../../../assets/map/map-component-maps/atmStops.json';
import Messina_Cameras from '../../../../assets/map/map-component-maps/cameras.json';
import Messina_POIs from '../../../../assets/map/map-component-maps/messina_pois.json';
import Messina_Incidenti_2018 from '../../../../assets/map/map-component-maps/incidenti_messina/street_result_2018.json';
import Messina_Incidenti_2019 from '../../../../assets/map/map-component-maps/incidenti_messina/street_result_2019.json';
import Messina_Incidenti_2020 from '../../../../assets/map/map-component-maps/incidenti_messina/street_result_2020.json';
import Messina_district from '../../../../assets/map/map-component-maps/out_district_messina.json';
import Bilbao_air_quality from '../../../../assets/map/map-component-maps/bilbao_air_quality_request.json';
import Bilbao_bike from '../../../../assets/map/map-component-maps/bilbao_bike_request.json';
import Bilbao_sound from '../../../../assets/map/map-component-maps/bilbao_sound_request.json';
import Bilbao_wifi from '../../../../assets/map/map-component-maps/bilbao_wifi_request.json';
import Bilbao_layers from '../../../../assets/map/map-component-maps/BilbaoLayers.json';
import Helsinki_layers from '../../../../assets/map/map-component-maps/Helsinki_layers.json';
import Helsinki_Bike from '../../../../assets/map/map-component-maps/HSL_n_BICYCLE_STATIONS_request.json';
import Helsinki_Cyclist from '../../../../assets/map/map-component-maps/HSL_n_cyclist_request.json';
import Helsinki_Terminalit from '../../../../assets/map/map-component-maps/HSL_n_terminalit_request.json';
import { ConfigService } from '@ngx-config/core';
import { DatastorageService } from '../../dashboard-management/services/datastorage.service';
import { TranslateService } from '@ngx-translate/core';
......@@ -32,6 +33,12 @@ export interface DataStorageLayer {
alternateName: string;
type: string;
map: L.GeoJSON;
geometry: L.GeoJSON;
}
export interface FeatureProperties {
fill: string;
fillOpacity: number;
}
@Component({
......@@ -71,11 +78,12 @@ export class MapComponent implements OnInit {
pilot: string;
layersByPilot: { [key: string]: string[] } = {
MESSINA: ["Point of Interests", "ATM Stops", "Messina - Dinnamare", "Messina - Centro", "Messina - Litoranea", "Cameras"],
BILBAO: ["Bilbao Air Quality", "Bilbao Bike", "Bilbao Sound", "Bilbao Wifi"],
MESSINA: ["Point of Interests", "ATM Stops", "Messina - Dinnamare", "Messina - Centro", "Messina - Litoranea", "Cameras",
"Messina Incidenti 2018", "Messina Incidenti 2019", "Messina Incidenti 2020"],
BILBAO: [],
AMSTERDAM: [],
HELSINKI: [],
URBANITE: ["Amsterdam Bike", "Bilbao Air Quality", "Bilbao Bike", "Bilbao Sound", "Bilbao Wifi", "Point of Interests", "ATM Stops", "Messina - Dinnamare", "Messina - Centro", "Messina - Litoranea", "Cameras"],
URBANITE: ["Bilbao Air Quality", "Bilbao Sound", "Point of Interests", "ATM Stops", "Messina - Dinnamare", "Messina - Centro", "Messina - Litoranea", "Cameras"],
}
coordinatesByPilot: { [key: string]: L.LatLngExpression } = {
......@@ -94,39 +102,74 @@ export class MapComponent implements OnInit {
"Messina - Dinnamare": <L.GeoJSON>this.getLayer("Messina - Dinnamare", <any>Messina_cycling_path[0].location),
"Messina - Centro": <L.GeoJSON>this.getLayer("Messina - Centro", <any>Messina_cycling_path[1].location),
"Messina - Litoranea": <L.GeoJSON>this.getLayer("Messina - Litoranea", <any>Messina_cycling_path[2].location),
"Bilbao Air Quality": <L.GeoJSON>this.getLayer("Bilbao Air Quality", <any>Bilbao_air_quality[0].map),
"Bilbao Bike": <L.GeoJSON>this.getLayer("Bilbao Bike", <any>Bilbao_bike[0].map),
"Bilbao Wifi": <L.GeoJSON>this.getLayer("Bilbao Wifi", <any>Bilbao_wifi[0].map),
"Amsterdam Bike": <L.GeoJSON>this.getLayer("Amsterdam Bike", <any>Amsterdam_bike[0].map),
"Messina Incidenti 2018": <L.GeoJSON>this.getLayer("Messina Incidenti 2018", <any>Messina_Incidenti_2018['features']),
"Messina Incidenti 2019": <L.GeoJSON>this.getLayer("Messina Incidenti 2019", <any>Messina_Incidenti_2019['features']),
"Messina Incidenti 2020": <L.GeoJSON>this.getLayer("Messina Incidenti 2020", <any>Messina_Incidenti_2020['features']),
};
fillGeojesonlayer() {
// let arrayS:Array<DataStorageLayer>=[];
// this.dataStorageService.getDataFromAmsterdam().subscribe(res => {
// res.forEach(layer =>{
// this.geojsonLayerContent[layer.name]=<L.GeoJSON>this.getLayer(layer.name, layer.map);
// this.layersByPilot['AMSTERDAM'] = this.layersByPilot['AMSTERDAM'].concat(layer.name);
// })
// })
let arrays: Array<DataStorageLayer> = <any>Amsterdam_bike;
//console.log(arrays);
arrays.forEach(layer => {
console.log(layer);
//console.log(layer);
this.geojsonLayerContent[layer.name] = <L.GeoJSON>this.getLayer(layer.name, layer.map);
// console.log(layer.name);
this.layersByPilot['AMSTERDAM'] = this.layersByPilot['AMSTERDAM'].concat(layer.name);
});
this.layersByPilot['URBANITE'] = this.layersByPilot['AMSTERDAM'].concat(this.layersByPilot['BILBAO']).concat(this.layersByPilot['HELSINKI']).concat(this.layersByPilot['MESSINA']);
// arrays = <any>Bilbao_bike.map['features'];
// // console.log(arrays);
// arrays.forEach(layer => {
arrays = <any>Messina_district['features'];
arrays.forEach(layer => {
console.log(layer);
this.geojsonLayerContent[layer['properties'].name] = <L.GeoJSON>this.getLayer(layer['properties'].name, layer.geometry);
// console.log(layer.name);
this.layersByPilot['MESSINA'] = this.layersByPilot['MESSINA'].concat(layer['properties'].name);
});
let level: DataStorageLayer;
let arrayBilbao: Array<DataStorageLayer> = <any>Bilbao_layers;
console.log(arrayBilbao);
arrayBilbao.forEach(layer => {
//console.log(layer);
// this.geojsonLayerContent[layer.name] = <L.GeoJSON>this.getLayer(layer.alternateName, layer.map);
this.geojsonLayerContent[layer.name] = <L.GeoJSON>this.getLayer(layer.name, layer.map);
// console.log(layer.name);
this.layersByPilot['BILBAO'] = this.layersByPilot['BILBAO'].concat(layer.name);
});
// arrayBilbao.forEach(layer => {
// //console.log(layer.map['features']);
// level = layer.map['features'];
// console.log(level);
// this.geojsonLayerContent[""] = <L.GeoJSON>this.getLayer(layer.name, layer.map);
// <L.GeoJSON>this.getLayer("", layer.map);
// console.log(layer.name);
// this.layersByPilot['BILBAO'] = this.layersByPilot['BILBAO'].concat(layer.name);
// });
// arrays = <any>Bilbao_wifi;
// console.log(arrays);
// arrays.forEach(layer => {
// //console.log(layer.map['features']);
// //console.log(layer);
// // level = layer.map['features'];
// // console.log(level);
// this.geojsonLayerContent[""] = <L.GeoJSON>this.getLayer(layer.name, layer.map);
// <L.GeoJSON>this.getLayer("", layer.map);
// console.log(layer.name);
// this.layersByPilot['BILBAO'] = this.layersByPilot['BILBAO'].concat(layer.name);
// });
arrays = <any>Helsinki_layers;
console.log(arrays);
arrays.forEach(layer => {
//console.log(layer);
this.geojsonLayerContent[layer.name] = <L.GeoJSON>this.getLayer(layer.name, layer.map);
// console.log(layer.name);
this.layersByPilot['HELSINKI'] = this.layersByPilot['HELSINKI'].concat(layer.name);
});
this.layersByPilot['URBANITE'] = this.layersByPilot['AMSTERDAM'].concat(this.layersByPilot['BILBAO']).concat(this.layersByPilot['HELSINKI']).concat(this.layersByPilot['MESSINA']);
}
layerDescription: { [key: string]: string } = {
......@@ -136,6 +179,19 @@ export class MapComponent implements OnInit {
"Messina - Dinnamare": Messina_cycling_path[0].description,
"Messina - Centro": Messina_cycling_path[1].description,
"Messina - Litoranea": "Pista ciclabile Messina - Litoranea",
"Messina Incidenti 2018": "Summary of road incidents in 2020\r\n Yellow: road incidents with injured\nOrange: road incidents with less than 3 deaths\nRed: road incidents with more than 3 deaths",
"Messina Incidenti 2019": "Summary of road incidents in 2019\r\n Yellow: road incidents with injured\nOrange: road incidents with less than 3 deaths\nRed: road incidents with more than 3 deaths",
"Messina Incidenti 2020": "Summary of road incidents in 2020\r\n Yellow: road incidents with injured\nOrange: road incidents with less than 3 deaths\nRed: road incidents with more than 3 deaths",
"District I": "Population of Messina divided by district",
"District II": "Population of Messina divided by district",
"District III": "Population of Messina divided by district",
"District IV": "Population of Messina divided by district",
"District V": "Population of Messina divided by district",
"District VI": "Population of Messina divided by district",
"Bilbao Air Quality": Bilbao_air_quality[0].description,
"Bilbao Bike": Bilbao_bike[0].description,
"Bilbao Wifi": Bilbao_wifi[0].description,
......@@ -158,7 +214,7 @@ export class MapComponent implements OnInit {
if (event.option.selected === true) {
console.log("CHARGE LAYER-> " + clickedLayerName)
//console.log("CHARGE LAYER-> " + clickedLayerName)
if (clickedLayerName !== "Bilbao Sound") {
this.map.addLayer(geojsonLayer);
......@@ -181,11 +237,11 @@ export class MapComponent implements OnInit {
this.map.addLayer(heatLayer);
this.map.addControl(this.legend);
console.log("CHARGE HEAT LAYER-> " + clickedLayerName);
//console.log("CHARGE HEAT LAYER-> " + clickedLayerName);
}
}
else {
console.log("DECHARGE LAYER-> " + clickedLayerName)
//console.log("DECHARGE LAYER-> " + clickedLayerName)
if (clickedLayerName !== "Bilbao Sound") {
this.map = this.map.removeLayer(geojsonLayer);
} else {
......@@ -239,15 +295,39 @@ export class MapComponent implements OnInit {
});
public getLayer(title: string, l) {
console.log(l);
let layer = L.geoJSON(l, {
onEachFeature: (feature, layer) => {
//console.log(feature)
layer.bindPopup(this.getPopupContent(title, feature))
},
style: (feature) => {
if(feature['properties']!=null && feature['properties']!=undefined){
if(feature.properties.hasOwnProperty('fill')){
return { color: feature.properties['fill'],
fillColor: feature.properties['fillColor'],
stroke: feature.properties['stroke'],
strokeOpacity: feature.properties['stroke-opacity'],
strokeWidth: feature.properties['stroke-width'],
fillOpacity : feature.properties['fillOpacity']};
} else if (feature.properties.hasOwnProperty('stroke')){
return {
stroke: feature.properties['stroke'],
strokeOpacity: feature.properties['stroke-opacity'],
strokeWidth: feature.properties['stroke-width']};
}
}
return {
color: "green"
};
},
});
return layer;
}
public getPopupContent(title: string, feature) {
let content = "<h3>" + title + "</h3>";
......@@ -257,9 +337,9 @@ export class MapComponent implements OnInit {
}
}
if (feature.coordinates) {
content += "<p>Coordinates: " + feature.coordinates + "</p>";
}
// if (feature.coordinates) {
// content += "<p>Coordinates: " + feature.coordinates + "</p>";
// }
return content;
}
......
src/assets/config.json
+ 1
− 1
View file @ bfa23a86
......@@ -35,7 +35,7 @@
],
"enable_demo_pages":true,
"pilots":["URBANITE","AMSTERDAM","BILBAO","HELSINKI","MESSINA"],
"default_pilot":"MESSINA",
"default_pilot":"URBANITE",
"datastorageURL": "https://messina.urbanite.esilab.org/api/data/v3",
"amsterdam":{
"api_base_url":"https://urbanite-node1.comune.messina.it",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment