From ae2226d54b8f977ed0467d9f7d6def7502594af1 Mon Sep 17 00:00:00 2001
From: Roberto Callari <robertocallari89@gmail.com>
Date: Tue, 15 Jun 2021 10:14:03 +0200
Subject: [PATCH] leaflet-awesome marker
---
angular.json | 3 +-
package-lock.json | 17 ++++-
package.json | 2 +
.../messina/service/messina-client.service.ts | 2 +-
.../messina/traffic/traffic.component.ts | 64 ++++++++++++++-----
5 files changed, 67 insertions(+), 21 deletions(-)
diff --git a/angular.json b/angular.json
index 87de3191..1bbc97f4 100644
--- a/angular.json
+++ b/angular.json
@@ -44,7 +44,8 @@
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
"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-timedimension/dist/leaflet.timedimension.control.css",
+ "node_modules/leaflet.awesome-markers/dist/leaflet.awesome-markers.css"
],
"scripts": [
"node_modules/pace-js/pace.min.js",
diff --git a/package-lock.json b/package-lock.json
index 512bbba7..12cffbd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3135,8 +3135,7 @@
"@types/geojson": {
"version": "7946.0.1",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.1.tgz",
- "integrity": "sha512-BXY6tH16Snp/ZdX6cFlBD8yfEArcZemzxEGciXkMmp1/tU76oyqkxJq91JQzT8SXWzRPwj//dw0/FdCSnnT8mw==",
- "dev": true
+ "integrity": "sha512-BXY6tH16Snp/ZdX6cFlBD8yfEArcZemzxEGciXkMmp1/tU76oyqkxJq91JQzT8SXWzRPwj//dw0/FdCSnnT8mw=="
},
"@types/glob": {
"version": "7.1.3",
@@ -3177,11 +3176,18 @@
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.2.3.tgz",
"integrity": "sha512-ancdZhtqOp64/ZXuvKuadFCUmXDhRDGiBSqM6MhARk4kET9UKAdkWY76hn0VlwvknmynMB8wbDMJSGXYRbQFEg==",
- "dev": true,
"requires": {
"@types/geojson": "*"
}
},
+ "@types/leaflet.awesome-markers": {
+ "version": "2.0.24",
+ "resolved": "https://registry.npmjs.org/@types/leaflet.awesome-markers/-/leaflet.awesome-markers-2.0.24.tgz",
+ "integrity": "sha512-Pj2cxvKl8OL9UYGneCrc7r7vC0neAwOnqTBMLr0S/zP5IimwBku4439WBIhvIiLm6zTf65XuoQ7FYDZsXnnxrA==",
+ "requires": {
+ "@types/leaflet": "*"
+ }
+ },
"@types/marked": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-2.0.2.tgz",
@@ -12290,6 +12296,11 @@
"leaflet": "~0.7.4 || ~1"
}
},
+ "leaflet.awesome-markers": {
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/leaflet.awesome-markers/-/leaflet.awesome-markers-2.0.5.tgz",
+ "integrity": "sha512-Ne/xDjkGyaujwNVVkv2tyXQUV0ZW7gZ0Mo0FuQY4jp2qWrvXi0hwDBvmZyF/8YOvybyMabTMM/mFWCTd1jZIQA=="
+ },
"less": {
"version": "3.12.2",
"resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz",
diff --git a/package.json b/package.json
index 46ffa936..c001929f 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@swimlane/ngx-charts": "^14.0.0",
+ "@types/leaflet.awesome-markers": "^2.0.24",
"angular2-chartjs": "0.4.1",
"bootstrap": "4.3.1",
"chart.js": "2.7.1",
@@ -69,6 +70,7 @@
"iso8601-js-period": "^0.2.1",
"leaflet": "1.2.0",
"leaflet-timedimension": "^1.1.1",
+ "leaflet.awesome-markers": "^2.0.5",
"nebular-icons": "1.1.0",
"ng2-ckeditor": "^1.2.9",
"ng2-smart-table": "^1.6.0",
diff --git a/src/app/pages/messina/service/messina-client.service.ts b/src/app/pages/messina/service/messina-client.service.ts
index 19438e65..8afc69f8 100644
--- a/src/app/pages/messina/service/messina-client.service.ts
+++ b/src/app/pages/messina/service/messina-client.service.ts
@@ -27,7 +27,7 @@ export class MessinaClientService {
}
getStops(page:number=0,pageSize:number=20000): Observable<any> {
- return this.http.get<any>(`${this.apiURL}/api/v1/data/atmStops?page=${page}&pageSize=${pageSize}&format=geojson&token=${this.token}`);
+ return this.http.get<any>(`${this.apiURL}/api/v1/data/atmStops?page=${page}&pageSize=${pageSize}&format=geojson&token=${this.token}&filter=${JSON.stringify({"mainStop":true})}`);
}
}
diff --git a/src/app/pages/messina/traffic/traffic.component.ts b/src/app/pages/messina/traffic/traffic.component.ts
index 437ee6da..22fe5625 100644
--- a/src/app/pages/messina/traffic/traffic.component.ts
+++ b/src/app/pages/messina/traffic/traffic.component.ts
@@ -3,6 +3,7 @@ import { color } from 'd3-color';
import * as L from 'leaflet';
import 'leaflet-timedimension';
+import 'leaflet.awesome-markers';
import { MessinaClientService } from '../service/messina-client.service';
@Component({
@@ -39,6 +40,8 @@ export class TrafficComponent implements OnInit {
loading=true;
ngOnInit(): void {
+ L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
+
this.geojson = {
"type":"FeatureCollection",
"features":[]
@@ -62,8 +65,8 @@ export class TrafficComponent implements OnInit {
this.messinaClient.getTrafficByDateTime(null,null).subscribe(res => {
this.trafficMapConverter(res);
this.loading=false;
- // this.displayStops();
- // this.displayPOIs();
+ //this.displayStops();
+ //this.displayPOIs();
})
}
@@ -71,13 +74,16 @@ export class TrafficComponent implements OnInit {
this.messinaClient.getStops().subscribe(res => {
let stopLayer = L.geoJSON(res['results'], {
pointToLayer: (feature, latlng) => {
- let icon= new L.Icon({
- iconSize: [24,36],
- iconAnchor: [12,36],
- iconUrl: '/assets/img/markers/marker-icon.png',
- shadowUrl: '/assets/img/markers/marker-shadow.png'
- })
- return L.marker(latlng,{icon:icon})
+
+ let markerIcon = L.AwesomeMarkers.icon({
+ markerColor: 'blue',
+ prefix: 'fa',
+ extraClasses: 'fas',
+ icon: "bus",
+ iconColor: "white",
+ });
+
+ return L.marker(latlng,{icon:markerIcon})
}
});
this.layers.push(stopLayer);
@@ -88,13 +94,16 @@ export class TrafficComponent implements OnInit {
this.messinaClient.getPOI().subscribe(res => {
let stopLayer = L.geoJSON(res['results'], {
pointToLayer: (feature, latlng) => {
- let icon= new L.Icon({
- iconSize: [24,36],
- iconAnchor: [12,36],
- iconUrl: '/assets/img/markers/marker-icon.png',
- shadowUrl: '/assets/img/markers/marker-shadow.png'
- })
- return L.marker(latlng,{icon:icon})
+
+ let markerIcon = L.AwesomeMarkers.icon({
+ markerColor: 'blue',
+ prefix: 'fa',
+ extraClasses: 'fas',
+ icon: "map-marker",
+ iconColor: "white",
+ });
+
+ return L.marker(latlng,{icon:markerIcon})
}
});
this.layers.push(stopLayer);
@@ -157,6 +166,29 @@ export class TrafficComponent implements OnInit {
style:(feature)=>{
let v=feature.properties[this.instant];
let color='green';
+
+ if (v>0 && v<1) {
+ color = '#009688';
+ } else if (v>=1 && v<2) {
+ color = '#4caf50';
+ } else if (v>=2 && v<3) {
+ color = '#8bc34a';
+ } else if (v>=3 && v<4) {
+ color = '#cddc39';
+ } else if (v>=4 && v<5) {
+ color = '#ffeb3b';
+ } else if (v>=5 && v<6) {
+ color = '#ffc107';
+ } else if (v>=6 && v<7) {
+ color = '#ff9800';
+ } else if (v>=7 && v<8) {
+ color = '#ff5722';
+ } else if (v>=8 && v<9) {
+ color = '#f44336';
+ } else if (v>9) {
+ color = '#970e0e';
+ }
+
// if(v>=2.5 && v<5){
// color='yellow'
// }else if(v>=5 && v<7.5){
--
GitLab