From 9bd0cbb6b4a7132c1d3d877732bc9a6f57a1251c Mon Sep 17 00:00:00 2001
From: Roberto Callari <robertocallari89@gmail.com>
Date: Fri, 18 Jun 2021 14:55:42 +0200
Subject: [PATCH] clusters
---
angular.json | 3 ++-
package-lock.json | 21 ++++++++++++++++++-
package.json | 3 +++
src/app/pages/messina/messina.module.ts | 2 ++
.../messina/traffic/traffic.component.ts | 17 ++++++++-------
5 files changed, 37 insertions(+), 9 deletions(-)
diff --git a/angular.json b/angular.json
index 1bbc97f4..95e361c2 100644
--- a/angular.json
+++ b/angular.json
@@ -45,7 +45,8 @@
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
"src/app/@theme/styles/styles.scss",
"node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css",
- "node_modules/leaflet.awesome-markers/dist/leaflet.awesome-markers.css"
+ "node_modules/leaflet.awesome-markers/dist/leaflet.awesome-markers.css",
+ "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
],
"scripts": [
"node_modules/pace-js/pace.min.js",
diff --git a/package-lock.json b/package-lock.json
index 4281bdf5..d0cc98d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1239,6 +1239,11 @@
"resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-3.0.1.tgz",
"integrity": "sha512-rQaqLM/n9gIPMKkNDOd3+H1kiQiuXtY5KVOM5cPJCoetaN9oIJrCATQHPRO47j1os8Wqcv5I0BKEH/EtTtVuiA=="
},
+ "@asymmetrik/ngx-leaflet-markercluster": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet-markercluster/-/ngx-leaflet-markercluster-5.0.1.tgz",
+ "integrity": "sha512-XqRSgMKZN/670/nRXtjZ98fniuCzvQnZ5EDEOr+coEC4OI0OYeDIvAN253C5U8kJX6hIdzDtQcbOrC1milWUBw=="
+ },
"@babel/code-frame": {
"version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
@@ -3271,6 +3276,14 @@
"@types/leaflet": "*"
}
},
+ "@types/leaflet.markercluster": {
+ "version": "1.4.4",
+ "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.4.4.tgz",
+ "integrity": "sha512-BQAilNWlBpYl4+PrsJXLOh4vyv7KfWi5kh3Fclg5y4gEeNeXKqhS6y1zzBB4+wcTuVUnMWfm2G0MfqA4yA5A5A==",
+ "requires": {
+ "@types/leaflet": "*"
+ }
+ },
"@types/marked": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-2.0.2.tgz",
@@ -12389,6 +12402,11 @@
"resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz",
"integrity": "sha1-EJ2M9Ybwre5B8Fr/Ax4np3/swik="
},
+ "leaflet.markercluster": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.0.tgz",
+ "integrity": "sha512-Fvf/cq4o806mJL50n+fZW9+QALDDLPvt7vuAjlD2vfnxx3srMDs2vWINJze4nKYJYRY45OC6tM/669C3pLwMCA=="
+ },
"less": {
"version": "3.12.2",
"resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz",
@@ -23532,7 +23550,8 @@
},
"ssri": {
"version": "6.0.1",
- "resolved": "",
+ "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+ "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
"dev": true,
"requires": {
"figgy-pudding": "^3.5.1"
diff --git a/package.json b/package.json
index 1e311149..b6655b8d 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
"@angular/platform-browser-dynamic": "^11.0.9",
"@angular/router": "^11.0.9",
"@asymmetrik/ngx-leaflet": "3.0.1",
+ "@asymmetrik/ngx-leaflet-markercluster": "^5.0.1",
"@fortawesome/angular-fontawesome": "^0.8.2",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
@@ -57,6 +58,7 @@
"@ngx-translate/http-loader": "^6.0.0",
"@swimlane/ngx-charts": "^14.0.0",
"@types/leaflet.awesome-markers": "^2.0.24",
+ "@types/leaflet.markercluster": "^1.4.4",
"angular2-chartjs": "0.4.1",
"bootstrap": "4.3.1",
"chart.js": "2.7.1",
@@ -72,6 +74,7 @@
"leaflet-timedimension": "^1.1.1",
"leaflet.awesome-markers": "^2.0.5",
"leaflet.heat": "0.2.0",
+ "leaflet.markercluster": "^1.5.0",
"nebular-icons": "1.1.0",
"ng2-ckeditor": "^1.2.9",
"ng2-smart-table": "^1.6.0",
diff --git a/src/app/pages/messina/messina.module.ts b/src/app/pages/messina/messina.module.ts
index 0dd6bb43..4040b09a 100644
--- a/src/app/pages/messina/messina.module.ts
+++ b/src/app/pages/messina/messina.module.ts
@@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
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} from '@nebular/theme';
import { ThemeModule } from '../../@theme/theme.module';
@@ -27,6 +28,7 @@ import { TrafficFilterComponent } from './traffic-filter/traffic-filter.componen
NbButtonModule,
NbSelectModule,
NbTimepickerModule,
+ LeafletMarkerClusterModule
],
exports: [],
declarations: [
diff --git a/src/app/pages/messina/traffic/traffic.component.ts b/src/app/pages/messina/traffic/traffic.component.ts
index 91fc279d..031b65f7 100644
--- a/src/app/pages/messina/traffic/traffic.component.ts
+++ b/src/app/pages/messina/traffic/traffic.component.ts
@@ -82,6 +82,7 @@ export class TrafficComponent implements OnInit {
* Call API and display a Layer on MAP with Stops
*/
private displayStops() {
+ let clusterData = L.markerClusterGroup();
this.messinaClient.getStops().subscribe(res => {
let stopLayer = L.geoJSON(res['results'], {
pointToLayer: (feature, latlng) => {
@@ -98,20 +99,22 @@ export class TrafficComponent implements OnInit {
}
});
// this.layers.push(this.stopLayer);
- this.layersControl.overlays['Layer STOPs'] = stopLayer;
+ clusterData.addLayer(stopLayer);
+ this.layersControl.overlays['Layer STOPs'] = clusterData;
});
}
- types=[];
+ // types=[];
/**
* Call API and display a Layer on MAP with POIs
*/
private displayPOIs() {
+ let clusterData = L.markerClusterGroup();
this.messinaClient.getPOI().subscribe(res => {
let poiLayer = L.geoJSON(res['results'], {
pointToLayer: (feature, latlng) => {
- if(this.types.indexOf(feature.properties['type'])<0){
- this.types.push(feature.properties['type']);
- }
+ // if(this.types.indexOf(feature.properties['type'])<0){
+ // this.types.push(feature.properties['type']);
+ // }
let icon = this.getIcon(feature.properties['type']);
@@ -126,8 +129,8 @@ export class TrafficComponent implements OnInit {
return L.marker(latlng, { icon: markerIcon })
}
});
- console.log(JSON.stringify(this.types));
- this.layersControl.overlays['Layer POIs']=poiLayer;
+ clusterData.addLayer(poiLayer);
+ this.layersControl.overlays['Layer POIs']=clusterData;
});
}
--
GitLab