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

minor in ngx-map-layers

parent 47fe4e42
No related branches found
No related tags found
No related merge requests found
......@@ -33,6 +33,7 @@
import { ChartModule } from 'angular2-chartjs';
import 'chartjs-plugin-zoom';
import { DashboardCloneWizardComponent } from './pages/dashboard-management/dashboard-clone-wizard/dashboard-clone-wizard.component';
import { DashboardPageCrudService } from './pages/dashboard-management/services/dashboard-page-crud.service';
export function configFactory(http: HttpClient): ConfigLoader {
return new ConfigHttpLoader(http, './assets/config.json');
......@@ -86,7 +87,7 @@ import { DashboardCloneWizardComponent } from './pages/dashboard-management/dash
},
})
],
providers: [
providers: [DashboardPageCrudService,
AuthGuard,
{
provide: HTTP_INTERCEPTORS,
......
......@@ -3,7 +3,7 @@ import { GoogleMapsModule } from '@angular/google-maps';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletMarkerClusterModule } from '@asymmetrik/ngx-leaflet-markercluster';
import { NgxEchartsModule } from 'ngx-echarts';
import { NbCardModule, NbRadioModule, NbSpinnerModule, NbDatepickerModule, NbInputModule, NbButtonModule, NbSelectModule, NbTimepickerModule, NbIconModule, NbTooltipModule} from '@nebular/theme';
import { NbCardModule, NbRadioModule, NbSpinnerModule, NbDatepickerModule, NbInputModule, NbButtonModule, NbSelectModule, NbTimepickerModule, NbIconModule, NbTooltipModule, NbListComponent, NbListModule} from '@nebular/theme';
import { ThemeModule } from '../../@theme/theme.module';
import { MatCardModule } from '@angular/material/card';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
......@@ -13,6 +13,7 @@ import { MapLayerFilterComponent } from './map-layer-filter/map-layer-filter.com
import { MapComponent } from './map/map.component';
import { RouterModule } from '@angular/router';
import { MapLayersRoutingModule } from './map-layers-routing.module';
import { MatListModule } from '@angular/material/list';
......@@ -34,6 +35,8 @@ import { MapLayersRoutingModule } from './map-layers-routing.module';
NbButtonModule,
NbSelectModule,
NbTimepickerModule,
NbListModule,
MatListModule,
LeafletMarkerClusterModule,
NbIconModule,
NbTooltipModule,
......
<div class="row d-flex justify-content-between align-items-center">
<nb-card class="col-6">
<nb-card-header>
Layers in map
</nb-card-header>
<nb-card-body>
<div leaflet #map
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
>
</div>
</nb-card-body>
</nb-card>
<div class="col-6">
<nb-card class="row">
<nb-card-header>
Available Layers list
</nb-card-header>
<nb-card-body>
<mat-selection-list (selectionChange)="onChange($event)" [(ngModel)]="selectedLayers" [disabled]="isDisabled">
<mat-list-option *ngFor="let layer of availableLayers;let indexOfelement=index;" (indexOfelement) = "selectedLayerId" [value]="layer">
{{layer}}
</mat-list-option>
</mat-selection-list>
</nb-card-body>
<nb-card-footer>
<nb-card class="row">
<nb-card-header>
Layers info'ss: Selected: {{ selectedLayers | json }}
</nb-card-header>
<nb-card-body>
{{layerDescr}}
</nb-card-body>
<nb-card-footer>
<button nbButton status="info" [value] = "selectedLayerId" (click)="loadLayer($event)">
Load Layer
</button>
</nb-card-footer>
</nb-card>
</nb-card-footer>
</nb-card>
</div>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { MatListOption } from '@angular/material/list';
import * as L from 'leaflet';
import 'leaflet.heat/dist/leaflet-heat.js';
import { DashboardPageCrudService } from '../../dashboard-management/services/dashboard-page-crud.service';
import { MessinaClientService } from '../../messina/service/messina-client.service';
import TESTJSON from '../../../../assets/geojsons/bilbao_wifi_request_edited_for_angular_test.json';
import AMTram2020 from '../../../../assets/map/am_tram_2020.json';
import AMTram2018 from '../../../../assets/map/am_tram_2018.json';
@Component({
selector: 'ngx-map',
styleUrls: ['./map.component.scss'],
template: `
<div class="row d-flex justify-content-between align-items-center">
<nb-card class="col-6" [nbSpinner]="loading">
<nb-card-header>
Layers in map
</nb-card-header>
<nb-card-body>
<div id="map1" #map1 class="map"
leaflet [leafletOptions]="options1"
[leafletLayers]="layers1"
[leafletLayersControl]="layersControl1"
(leafletMapReady)="onMapReady1($event)">
</div>
</nb-card-body>
</nb-card>
<div class="col-6">
<nb-card class="row">
<nb-card-header>
Available Layers list
</nb-card-header>
<nb-card-body>
<span *ngFor="let layer of layers1">
{{layer}}
</span>
</nb-card-body>
<nb-card-footer>
</nb-card-footer>
</nb-card>
<nb-card class="row">
<nb-card-header>
Layers info's
</nb-card-header>
<nb-card-body>
<p>{{ layerInfo }}</p>
</nb-card-body>
<nb-card-footer>
</nb-card-footer>
</nb-card>
</div>
</div>
`
templateUrl: './map.component.html',
})
export class MapComponent implements OnInit {
layerInfo: string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum egestas auctor. Ut vehicula vitae augue quis placerat. Vestibulum egestas a sem sed fringilla. Nunc interdum auctor turpis, in feugiat dui gravida ac. Fusce tempus, odio nec luctus placerat, ex mi fringilla tellus, in auctor lectus mauris viverra risus. Etiam at pretium arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In feugiat diam urna, nec ornare diam tempor ut. Mauris posuere cursus ornare. Aenean augue nisi, elementum nec blandit vitae, dapibus ut purus. Curabitur vel porta felis, et rhoncus nulla. Etiam at libero rutrum, accumsan justo imperdiet, consequat odio. Integer ac urna id ipsum tristique varius ut luctus lectus."
loading = true;
public map1: L.Map;
public map2: L.Map;
selectedLayers: [];
selectedPeriod1 = "2017_03_F10";
selectedPeriod2 = "2020_03_F10";
constructor(private messinaClient: MessinaClientService) {
}
layersControl1 = {
overlays: {}
}
layersControl2 = {
overlays: {}
}
ngOnInit(): void {
L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
let now = new Date();
let dayBefore = new Date().setDate(now.getDate() - 1);
var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
var startDateTime = (new Date(dayBefore - tzoffset)).toISOString().slice(0, -1).split('.').shift() + 'Z';
var endDateTime = (new Date(now.getTime() - tzoffset)).toISOString().slice(0, -1).split('.').shift() + 'Z';
//Inizialize Maps
this.initializeMap1(startDateTime, endDateTime, this.selectedPeriod1);
// Loads others layers for Maps
this.displayStops1();
this.displayPOIs1();
}
options1 = {
pointsFile = '/assets/geojsons/bilbao_wifi_request_edited_for_angular_test.json';
isDisabled: boolean = false;
selectedLayerId: number;
availableLayers: string[] = ["Layer 2020", "Layer 2018"];
layerDescr: string;
option: MatListOption;
selectedLayers: string[];
public map: L.Map;
layer2020: L.GeoJSON;
layer2018: L.GeoJSON;
options = {
layers: [
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 18,
attribution: ""
})
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
],
zoom: 11,
center: L.latLng(38.181529, 15.562588)
};
options2 = {
layers: [
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 18,
attribution: ""
})
],
zoom: 11,
center: L.latLng(38.181529, 15.562588)
zoom: 9,
center: L.latLng({ lat: 52.372664783594274, lng: 4.8950958251953125 }),
};
testLayer: L.GeoJSON;
heatOptions = {
radius: 25,
max: 1.0,
blur: 15,
maxZoom: 18,
// gradient: { 0.0: 'green', 0.5: 'yellow', 1.0: 'red' },
minOpacity: 0.7
constructor(private dashboardPageService: DashboardPageCrudService) {
}
layers1 = [];
layers2 = [];
onMapReady1(map) {
var legend = new (L.Control.extend({
options: { position: 'bottomright' }
}));
legend.onAdd = (map) => {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0.0, 0.5, 1.0],
labels = ["Low level", "Medium level", "High level "];
div.innerHTML = '<div><b>Legend</b></div>';
for (var i = 0; i < grades.length; i++) {
div.innerHTML += '<i style="background: ' + this.getLegendColor(grades[i]) + '">'
+ '&nbsp;&nbsp;&nbsp;&nbsp;' + '</i> ' + labels[i] + (i + 1 < grades.length ? '</br>' : '');
}
return div;
};
legend.addTo(map);
// this.layers1.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions));
}
ngOnInit(): void {
this.layer2020 = this.getLayer('2020', <any>AMTram2020);
this.layer2018 = this.getLayer('2018', <any>AMTram2018);
this.testLayer = this.getLayer('TESTJSON', <any>TESTJSON);
}
onMapReady(map: L.Map) {
this.map = map;
setTimeout(() => {
this.map.invalidateSize();
this.map.addLayer(this.testLayer);
this.map.fitBounds(this.testLayer.getBounds(), {
padding: [50, 50]
});
}, 50);
getLegendColor(v: number) {
let color = 'green';
if (v == 0.0) {
color = 'green';
} else if (v == 0.5) {
color = 'yellow';
} else if (v == 1.0) {
color = 'red';
}
return color;
}
public getLayer(title, l): L.GeoJSON {
/**
* This transform geoJSON into array managed by leaflet for heatmap
* @param geoJson geoJSON
* @returns Points with intensity for leflet heatmap
*/
private heatLayerConverter(geoJson) {
var result = [];
for (let r in geoJson['features']) {
let coord = geoJson['features'][r].geometry.coordinates;
result.push([coord[1], coord[0], 0.5]); // lat, lng, intensity
let layer = L.geoJSON(l,
{
onEachFeature: (feature, layer) => {
let text = "";
for (let p in feature.properties) {
text += `${p}: ${feature.properties[p]}\n`;
}
// console.log("Points result.length =>" + result.length + " result: " + result);
return result;
layer.bindPopup(text);
},
style: function () {
if (title == '2020')
return { color: '#248175', weight: 7, opacity: 0.8 }
else
return { color: "#880808", weight: 5, opacity: 0.8 }
}
},
)
.on('popupclose', ($event) => {
})
updateMap1($event) {
var startDate = $event['startDate'];
var endDate = $event['endDate'];
var selectedPeriod = $event['selectedPeriod'];
var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
var startLocalISOTime = (new Date(startDate - tzoffset)).toISOString().slice(0, -1).split('.').shift() + 'Z';
var endLocalISOTime = (new Date(endDate - tzoffset)).toISOString().slice(0, -1).split('.').shift() + 'Z';
this.initializeMap1(startLocalISOTime, endLocalISOTime, selectedPeriod);
layer['_id'] = title;
return layer;
}
private initializeMap1(startDate, endDate, selectedPeriod) {
this.loading = true;
this.messinaClient.getHeatMap(selectedPeriod, startDate, endDate).subscribe(res => {
this.layers1 = [];
this.layers1.push(L.heatLayer(this.heatLayerConverter(res), this.heatOptions));
this.loading = false;
});
onChange(event: any) {
this.option = event.option;
if(event.option.selected === true){
this.selectedLayerId = event.option.value;
console.log("OPTION VALUE");
console.log(this.option);
console.log("selectedLayerId VALUE");
console.log(this.selectedLayerId)
}
/**
* Call API and display a Layer on MAP1 with Stops
*/
private displayStops1() {
let clusterData = L.markerClusterGroup();
this.messinaClient.getStops().subscribe(res => {
let stopLayer = L.geoJSON(res['results'], {
pointToLayer: (feature, latlng) => {
let markerIcon = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: "bus",
iconColor: "white",
});
return L.marker(latlng, { icon: markerIcon }).bindPopup(() => {
let str = '';
if (feature.properties.stopName != undefined && feature.properties.stopName != null && feature.properties.stopName != '') {
str += '<p><strong>Stop Name: </strong>' + feature.properties.stopName + '</p>';
if(event.option.selected === false){
console.log("UNCHECK");
this.removeLayer(this.selectedLayerId.toString());
}
return str
})
}
});
// this.layers.push(this.stopLayer);
clusterData.addLayer(stopLayer);
this.layersControl1.overlays['Layer STOPs'] = clusterData;
});
event.option.selected = false;
}
/**
* Call API and display a Layer on MAP1 with POIs
*/
private displayPOIs1() {
let clusterData = L.markerClusterGroup();
this.messinaClient.getPOI().subscribe(res => {
let poiLayer = L.geoJSON(res['results'], {
pointToLayer: (feature, latlng) => {
let icon = this.getIcon(feature.properties['type']);
let markerIcon = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: icon,
iconColor: "white",
});
return L.marker(latlng, { icon: markerIcon }).bindPopup(() => {
let str = '';
if (feature.properties.category != undefined && feature.properties.category != null && feature.properties.category != '') {
str += '<p><strong>Category: </strong>' + feature.properties.category + '</p>';
loadLayer(event: any){
this.option.selected = true;
this.option.color = 'primary';
switch(event.target.value){
case "Layer 2020":
this.map.addLayer(this.layer2020);
break;
case "Layer 2018":
console.log("FEATURE");
console.log(this.layer2018.feature);
this.map.addLayer(this.layer2018);
break;
}
if (feature.properties.name != undefined && feature.properties.name != null && feature.properties.name != '') {
str += '<p><strong>Name: </strong>' + feature.properties.name + '</p>';
}
return str
})
}
});
clusterData.addLayer(poiLayer);
this.layersControl1.overlays['Layer POIs'] = clusterData;
});
}
private getIcon(type): string {
switch (type) {
case "Retail_Services":
return "store";
case "Restaurant":
return "utensils";
case "Medical_Facility":
return "heartbeat";
case "School":
return "school";
case "Sport_Recreation":
return "running";
case "City_Town_Center":
return "university";
case "Hotel":
return "h-square";
case "Enclosed_Carpark":
return "parking";
case "Automobile_Facility":
return "car-side";
case "Bus_Station":
return "bus";
case "Religious_Facility":
return "pray";
case "Open_Carpark":
return "parking";
case "Forest":
return "tree";
case "Cultural_Buildings":
return "building";
case "River":
return "water";
case "Rail_Station":
return "train";
case "Ferry":
return "ship";
case "Lake":
return "water";
case "Public_Buildings":
return "building";
case "WaterElements":
return "water";
case "Regio Nat State Park":
return "tree";
case "lndustrial_Area":
return "industry";
case "Industry":
return "industry";
case "Sand_Area":
return "umbrella-beach";
case "Tunnel":
return "archway";
case "Rail":
return "train";
removeLayer(selectedLayerId: string){
switch(selectedLayerId){
case "Layer 2020":
this.map.removeLayer(this.layer2020);
break;
case "Layer 2018":
console.log("FEATURE");
console.log(this.layer2018.feature);
this.map.removeLayer(this.layer2018);
break;
}
return "map-marker"
}
}
\ No newline at end of file
[
{
"id": "urn:ngsi-ld:MapLayer:Bilbao:wifi",
"alternateName": "bilbao_wifi.geojson",
"name": "bilbao_wifi",
"description": "test",
"type": "MapLayer",
"@context": [
"https://smartdatamodels.org/context.jsonld",
"https://uri.etsi.org/ngsi-ld/v1/ngsi-ld-core-context.jsonld",
"https://git.code.tecnalia.com/urbanite/public/-/raw/main/datamodels/maplayer-ngsi.jsonld"
],
"map": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
43.244796539908236,
-2.946572772738531
]
]
],
"type": "Polygon"
},
"id": "urn:ngsi-ld:GtfsShape:bilbao:wifi_zone:10",
"properties": {
"fill": "#fff5f0",
"fill-opacity": 0.5,
"type": "GtfsShape",
"name": "10",
"alternateName": "wifi_zone",
"description": "D7 NORTE",
"val": 0
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
-2.9517021717970633,
43.286386892944606
],
[
-2.9516936976183215,
43.28638688936629
],
[
-2.9516937047436627,
43.286377884731266
],
[
-2.9517021789211544,
43.286377888309616
],
[
-2.9517021717970633,
43.286386892944606
]
]
],
"type": "Polygon"
},
"id": "urn:ngsi-ld:GtfsShape:bilbao:wifi_zone:21",
"properties": {
"fill": "#fff5f0",
"fill-opacity": 0.5,
"type": "GtfsShape",
"name": "21",
"alternateName": "wifi_zone",
"description": "ACCESOS_VIARIOS",
"val": 0
}
}
]
}
}
]
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment