Skip to content
Snippets Groups Projects
Commit bff26187 authored by digrazia2038's avatar digrazia2038
Browse files

Need to differentiate between layer and heatlayer

parent 95f6939a
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 @ bff26187
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 @ bff26187
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 @ bff26187
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 @ bff26187
......@@ -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 @ bff26187
......@@ -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 @ bff26187
<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 @ bff26187
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 @ bff26187
......@@ -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 @ bff26187
......@@ -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