Skip to content
Snippets Groups Projects
Commit 7e61feb6 authored by Benguria Elguezabal, Gorka's avatar Benguria Elguezabal, Gorka
Browse files

Merge branch 'data-storage-layers' into 'master' 

Need to differentiate between layer and heatlayer

See merge request urbanite/private/wp5-integration-and-devops/urbanite-ui-template!22
parents 488af342 bff26187
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 108 additions and 149 deletions
src/app/model/data-storage-entity.model.spec.ts 0 → 100644
+ 7
− 0
View file @ 7e61feb6
import { DataStorageEntity } from './data-storage-entity.model';
describe('DataStorageEntity', () => {
it('should create an instance', () => {
expect(new DataStorageEntity()).toBeTruthy();
});
});
src/app/model/data-storage-entity.model.ts 0 → 100644
+ 12
− 0
View file @ 7e61feb6
export class DataStorageEntity {
constructor(
public description?: string,
public name?: string,
public id?: string,
public type?: string,
public map?: {
features: [],
type: string
}
) {}
}
src/app/model/enumeration/subtype.model.ts 0 → 100644
+ 17
− 0
View file @ 7e61feb6
export enum Subtype {
Layer = 'Layer',
HeatLayer = 'HeatLayer',
}
export namespace Subtype {
export function values() {
return Object.keys(Subtype)
.filter((type) => isNaN(<any>type) && type !== 'values')
.map((x) => {
return {
enumVal: x,
value: x.toLowerCase(),
};
});
}
}
\ No newline at end of file
src/app/pages/dashboard-management/dashboard-info/dashboard-info.component.ts
+ 3
− 1
View file @ 7e61feb6
......@@ -37,10 +37,12 @@ export class DashboardInfoComponent implements OnInit {
}
}
saveDashboard(name, description, note){
console.log("here first");
this.dashboardPage.name = name;
this.dashboardPage.description = description;
this.dashboardPage.note = note;
this.dashboardPage.content = JSON.stringify(this.items);
//this.dashboardPage.content = this;
console.log(JSON.stringify(this.items));
this.dashboardPageService.updatePageById(this.dashboardPage).subscribe((res) => {
// console.log('## Saved Dashboard with id:' + this.dashboardPage.id);
this.toastrService.success(this.translateService.instant('dashboardPage.updated'), this.translateService.instant('general.success'));
......
src/app/pages/dashboard-management/services/datastorage.service.ts
+ 3
− 2
View file @ 7e61feb6
......@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ConfigService } from '@ngx-config/core';
import { Observable } from 'rxjs';
import { map } from "rxjs/operators";
import { DataStorageLayer } from '../../map-layers/map/map.component';
@Injectable({
......@@ -20,9 +21,9 @@ export class DatastorageService {
getMapLayers(id:string = undefined): Observable<any> {
if (id !== undefined){
return this.http.get<any>(`${this.apiURL}/getTData/mapLayer/${this.city}/${id}`);
return this.http.get<any>(`https://${this.city}.urbanite.esilab.org/data/getTData/mapLayer/${this.city}/${id}`);
} else{
return this.http.get<any>(`${this.apiURL}/getTData/mapLayer/${this.city}`);
return this.http.get<any>(`https://${this.city}.urbanite.esilab.org/data/getTData/mapLayer/${this.city}`);
}
}
......
src/app/pages/map-layers/map/map-modal/map-modal.component.html
+ 2
− 2
View file @ 7e61feb6
<nb-card size="small">
<nb-card size="tiny">
<nb-card-header>
{{ layer}}
</nb-card-header>
<nb-card-body>
<p>{{ description }}</p>
<p class="text">{{ description }}</p>
</nb-card-body>
</nb-card>
\ No newline at end of file
src/app/pages/map-layers/map/map-modal/map-modal.component.scss
+ 5
− 0
View file @ 7e61feb6
nb-card-body {
max-width: 450px;
height: auto;
max-height: auto;
}
\ No newline at end of file
src/app/pages/map-layers/map/map.component.ts
+ 57
− 142
View file @ 7e61feb6
......@@ -28,15 +28,22 @@ import { TranslateService } from '@ngx-translate/core';
import { DashboardGuideComponent } from '../../dashboard-management/dashboard-guide/dashboard-guide.component';
import { NbDialogService } from '@nebular/theme';
import { MapModalComponent } from './map-modal/map-modal.component';
import { DataStorageEntity } from '../../../model/data-storage-entity.model';
import { Subtype } from '../../../model/enumeration/subtype.model';
export interface DataStorageLayer {
id: string;
name: string;
description: String;
description: string;
alternateName: string;
type: string;
subtype: Subtype;
map: L.GeoJSON;
geometry: L.GeoJSON;
properties?: {
name: string;
alternateName: string,
}
}
export interface FeatureProperties {
......@@ -58,7 +65,7 @@ export class MapComponent implements OnInit {
private translateService: TranslateService,
private messinaClientService: MessinaClientService,
private modalService: NbDialogService) {
this.fillGeojesonlayer();
//this.fillGeojesonlayer();
}
public map: L.Map;
......@@ -85,12 +92,11 @@ export class MapComponent implements OnInit {
pilot: string;
layersByPilot: { [key: string]: string[] } = {
MESSINA: ["Point of Interests", "ATM Stops", "Messina - Dinnamare", "Messina - Centro", "Messina - Litoranea", "Cameras",
"Messina Incidenti 2018", "Messina Incidenti 2019", "Messina Incidenti 2020"],
MESSINA: [],
BILBAO: [],
AMSTERDAM: [],
HELSINKI: ["Helsinki Bike Stations", "Helsinki Terminalit", "Helsinki Cyclist"],
URBANITE: ["Bilbao Air Quality", "Bilbao Sound", "Point of Interests", "ATM Stops", "Messina - Dinnamare", "Messina - Centro", "Messina - Litoranea", "Cameras"],
HELSINKI: [],
URBANITE: [],
}
coordinatesByPilot: { [key: string]: L.LatLngExpression } = {
......@@ -101,129 +107,39 @@ export class MapComponent implements OnInit {
URBANITE: [60.1695200, 24.9354500],
}
geojsonLayerContent: { [key: string]: L.GeoJSON } = {
"Point of Interests": <L.GeoJSON>this.getLayer("Point of Interests", <any>Messina_POIs['results']['features']),
"ATM Stops": <L.GeoJSON>this.getLayer("ATM Stops", <any>Messina_ATM_Stops['results']['features']),
"Cameras": <L.GeoJSON>this.getLayer("Cameras", <any>Messina_Cameras['results']['features']),
//"Messina - Dinnamare": <any>this.messinaClientService.getCyclingPaths(), FUTURE IMPLEMENTATION
"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),
"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']),
"Helsinki Bike Stations": <L.GeoJSON>this.getLayer("Helsinki Bike Stations", <any>Helsinki_Bike[0].map),
"Helsinki Terminalit": <L.GeoJSON>this.getLayer("Helsinki Bike Stations", <any>Helsinki_Terminalit[0].map),
"Helsinki Cyclist": <L.GeoJSON>this.getLayer("Helsinki Bike Stations", <any>Helsinki_Cyclist[0].map),
};
fillGeojesonlayer() {
let arrays: Array<DataStorageLayer> = <any>Amsterdam_bike;
//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['AMSTERDAM'] = this.layersByPilot['AMSTERDAM'].concat(layer.name);
});
this.geojsonLayerContent["Messina Districts"] = <L.GeoJSON>this.getLayer("Messina Districts", <any>Messina_district);
this.layersByPilot['MESSINA'] = this.layersByPilot['MESSINA'].concat("Messina Districts");
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.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 } = {
"Point of Interests": "Point of interests of Messina",
"ATM Stops": "ATM Stops of Messina",
"Cameras": "Cameras of Messina",
"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",
"Messina Districts": "Population of Messina divided by district. In this layer you can see some informations related to the population residents, building, housing, families, genders (females, males), ages (under 20 F/M, adults F/M and over 65 F/M) divided by districts of Messina City.",
"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,
"Amsterdam Bike": Amsterdam_bike[0].description,
};
geojsonLayerContent: { [key: string]: L.GeoJSON } = {};
layerDescription: { [key: string]: string } = {};
heatlayerLayerContent: { [key: string]: L.HeatLayer } = {
"Bilbao Sound": <L.HeatLayer>L.heatLayer(this.heatLayerConverter(<any>Bilbao_sound[0].map), this.heatOptions),
};
ngOnInit(): void {
this.pilot = this.configService.getSettings("default_pilot");
this.dataStorageService.getMapLayers().subscribe((entities: DataStorageLayer[]) => {
//console.log(entities);
entities.forEach(entity => {
console.log(entity);
if (entity.subtype == Subtype.HeatLayer) {
this.heatlayerLayerContent[entity.alternateName] = <L.HeatLayer>L.heatLayer(this.heatLayerConverter(<any>entity.map), this.heatOptions);
} else {
this.geojsonLayerContent[entity.alternateName] = <L.GeoJSON>this.getLayer(entity.alternateName, entity.map);
}
this.layerDescription[entity.alternateName] = entity.description;
this.layersByPilot[this.pilot] = this.layersByPilot[this.pilot].concat(entity.alternateName);
});
}, err => { console.log(err) });
}
onChange(event: any) {
let clickedLayerName = event.option.value;
let geojsonLayer = <L.GeoJSON>this.geojsonLayerContent[clickedLayerName];
let heatLayer = <L.HeatLayer>this.heatlayerLayerContent[clickedLayerName];
console.log("geojsonlayer value ", geojsonLayer);
console.log("heatLayer value ", heatLayer);
if (event.option.selected === true) {
//console.log("CHARGE LAYER-> " + clickedLayerName)
if (clickedLayerName !== "Bilbao Sound") {
if (geojsonLayer !== null || geojsonLayer !== undefined) {
this.map.addLayer(geojsonLayer);
//pointToLayer icon
geojsonLayer.eachLayer((layer: L.Layer) => {
if (layer instanceof L.Marker) {
......@@ -241,14 +157,11 @@ export class MapComponent implements OnInit {
});
} else {
this.map.addLayer(heatLayer);
this.map.addControl(this.legend);
//console.log("CHARGE HEAT LAYER-> " + clickedLayerName);
}
}
else {
} else {
//console.log("DECHARGE LAYER-> " + clickedLayerName)
if (clickedLayerName !== "Bilbao Sound") {
if (geojsonLayer !== null || geojsonLayer !== undefined) {
this.map = this.map.removeLayer(geojsonLayer);
} else {
this.map = this.map.removeLayer(heatLayer);
......@@ -256,6 +169,8 @@ export class MapComponent implements OnInit {
}
}
}
/**
......@@ -303,7 +218,7 @@ export class MapComponent implements OnInit {
public getLayer(title: string, l) {
let layer = L.geoJSON(l, {
onEachFeature: (feature, layer) => {
console.log(feature)
//console.log(feature)
layer.bindPopup(this.getPopupContent(title, feature))
},
style: (feature) => {
......
src/assets/config.json
+ 2
− 2
View file @ 7e61feb6
......@@ -35,8 +35,8 @@
],
"enable_demo_pages":true,
"pilots":["URBANITE","AMSTERDAM","BILBAO","HELSINKI","MESSINA"],
"default_pilot":"MESSINA",
"datastorageURL": "https://messina.urbanite.esilab.org/api/data/v3",
"default_pilot":"BILBAO",
"datastorageURL": "https://messina.urbanite.esilab.org/data",
"amsterdam":{
"api_base_url":"https://urbanite-node1.comune.messina.it",
"token":"mcOUnnIyupQJzbitPX7Q2MnyqrVQUkmo",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment