leaflet-awesome marker

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",

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",

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",

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})}`);
   }
 
 }

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":[]
@@ -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){