Integrate with new API, Pulse animation marker

Author: supanadit

README.md

@@ -1,7 +1,7 @@
 ![Geo Smart Logo](http://supanadit.com/wp-content/uploads/2019/11/Geo-Smart-Logo.png)
 
 # GEO Smart Map
-This is the Front End Application which the Live Map for [Geo Smart System](https://github.com/supanadit/geosmartsystem)
+This is the Front End Application which is the Live Map for [Geo Smart System](https://github.com/supanadit/geosmartsystem)
 
 ## Requirements
 - NPM

angular.json

@@ -31,9 +31,13 @@
               "src/styles.scss",
               "node_modules/leaflet/dist/leaflet.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/ngx-toastr/toastr.css"
+              "node_modules/ngx-toastr/toastr.css",
+              "node_modules/@ansur/leaflet-pulse-icon/dist/L.Icon.Pulse.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/leaflet/dist/leaflet.js",
+              "node_modules/@ansur/leaflet-pulse-icon/dist/L.Icon.Pulse.js"
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~8.2.11",
     "@angular/platform-browser-dynamic": "~8.2.11",
     "@angular/router": "~8.2.11",
+    "@ansur/leaflet-pulse-icon": "^0.1.1",
     "@asymmetrik/ngx-leaflet": "^6.0.1",
     "bootstrap": "^4.3.1",
     "leaflet": "^1.5.1",

package.json

@@ -1,11 +1,12 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
 
 
 const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {useHash: true})],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/app/app-routing.module.ts

@@ -1,3 +1,3 @@
 <div class="map" leaflet [leafletOptions]="options">
-    <div *ngFor="let x of listMarker" [leafletLayer]="x"></div>
+  <div *ngFor="let x of listMarker" [leafletLayer]="x"></div>
 </div>

src/app/app.component.html

@@ -1,38 +1,41 @@
-import { Component, OnInit } from '@angular/core';
-import { latLng, Marker, tileLayer } from 'leaflet';
-import { AppService } from './app.service';
-import { ToastrService } from 'ngx-toastr';
+import {Component, OnInit} from '@angular/core';
+import {latLng, marker, Marker, tileLayer} from 'leaflet';
+import {AppService} from './app.service';
+import {ToastrService} from 'ngx-toastr';
+
+declare const L: any;
+import '@ansur/leaflet-pulse-icon';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss']
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-    token = 'pk.eyJ1Ijoic3VwYW5hZGl0IiwiYSI6ImNrMmVweWdrcTA4ZzgzY3A1NDE5ZnQwazkifQ.hK2Mz6cFk-jeIHzFBdaKTg';
-    style = `ck1w9autf0f0r1co76j79eab7`;
+  token = 'pk.eyJ1Ijoic3VwYW5hZGl0IiwiYSI6ImNrMmVweWdrcTA4ZzgzY3A1NDE5ZnQwazkifQ.hK2Mz6cFk-jeIHzFBdaKTg';
+  style = `ck1w9autf0f0r1co76j79eab7`;
 
-    options = {
-        layers: [
-            tileLayer(`https://api.mapbox.com/styles/v1/supanadit/${this.style}/tiles/256/{z}/{x}/{y}@2x?access_token=${this.token}`, {
-                maxZoom: 18,
-            })
-        ],
-        zoom: 12,
-        center: latLng(-6.914744, 107.609810)
-    };
+  options = {
+    layers: [
+      tileLayer(`https://api.mapbox.com/styles/v1/supanadit/${this.style}/tiles/256/{z}/{x}/{y}@2x?access_token=${this.token}`, {
+        maxZoom: 18,
+      })
+    ],
+    zoom: 12,
+    center: latLng(-6.914744, 107.609810)
+  };
 
-    // @ts-ignore
-    listMarker: Array<Marker> = [];
+  // @ts-ignore
+  listMarker: Array<Marker> = [];
 
-    // tslint:disable-next-line:variable-name
-    constructor(private appService: AppService, private toastr: ToastrService) {
-    }
+  // tslint:disable-next-line:variable-name
+  constructor(private appService: AppService, private toastr: ToastrService) {
+  }
 
-    ngOnInit(): void {
-        this.appService.getStreamUser().subscribe((listMarker: Array<Marker>) => {
-            this.listMarker = listMarker;
-        });
-    }
+  ngOnInit(): void {
+    this.appService.getStreamUser().subscribe((listMarker: Array<Marker>) => {
+      this.listMarker = listMarker;
+    });
+  }
 
 }

src/app/app.component.ts

@@ -1,24 +1,24 @@
-import { Injectable } from '@angular/core';
-import { LocationModel, locationModelFromEventSource, markerListFromLocationModel } from './model/location';
-import { Observable } from 'rxjs';
-import { environment } from '../environments/environment';
-import { Marker } from 'leaflet';
+import {Injectable} from '@angular/core';
+import {LocationModel, locationModelFromEventSource, markerListFromLocationModel} from './model/location';
+import {Observable} from 'rxjs';
+import {environment} from '../environments/environment';
+import {Marker} from 'leaflet';
 
 @Injectable({
-    providedIn: 'root'
+  providedIn: 'root'
 })
 export class AppService {
-    constructor() {
+  constructor() {
 
-    }
+  }
 
-    getStreamUser(): Observable<Array<Marker>> {
-        return new Observable(observer => {
-            const source = new EventSource(environment.api.concat('/stream?request=sse'));
-            source.addEventListener('message', message => {
-                const listLocationModel: Array<LocationModel> = locationModelFromEventSource(message);
-                observer.next(markerListFromLocationModel(listLocationModel));
-            });
-        });
-    }
+  getStreamUser(): Observable<Array<Marker>> {
+    return new Observable(observer => {
+      const source = new EventSource(environment.api.concat('/point/get/stream'));
+      source.addEventListener('message', message => {
+        const listLocationModel: Array<LocationModel> = locationModelFromEventSource(message);
+        observer.next(markerListFromLocationModel(listLocationModel));
+      });
+    });
+  }
 }

src/app/app.service.ts

@@ -1,72 +1,73 @@
-import { icon, marker, Marker } from 'leaflet';
+import {icon, marker, Marker} from 'leaflet';
+
+declare const L: any;
+import '@ansur/leaflet-pulse-icon';
 
 export interface PointInterface {
-    type: string;
-    coordinates: Array<number>;
+  type: string;
+  coordinates: Array<number>;
 }
 
 export class PointModel implements PointInterface {
-    coordinates: Array<number>;
-    type: string;
+  coordinates: Array<number>;
+  type: string;
 
-    constructor(dataLocation: PointInterface) {
-        this.coordinates = dataLocation.coordinates;
-        this.type = dataLocation.type;
-    }
+  constructor(dataLocation: PointInterface) {
+    this.coordinates = dataLocation.coordinates;
+    this.type = dataLocation.type;
+  }
 
-    Lat(): number {
-        return this.coordinates[1];
-    }
+  Lat(): number {
+    return this.coordinates[1];
+  }
 
-    Lng(): number {
-        return this.coordinates[0];
-    }
+  Lng(): number {
+    return this.coordinates[0];
+  }
 }
 
 export interface PointInterface {
-    coordinates: Array<number>;
+  coordinates: Array<number>;
 }
 
 export interface LocationInterface {
-    id: string;
-    object: PointInterface;
+  id: string;
+  object: PointInterface;
 }
 
 export class LocationModel implements LocationInterface {
-    id: string;
-    object: PointInterface;
+  id: string;
+  object: PointInterface;
 
-    constructor(location: LocationInterface) {
-        this.id = location.id;
-        this.object = location.object;
-    }
+  constructor(location: LocationInterface) {
+    this.id = location.id;
+    this.object = location.object;
+  }
 
-    Point(): PointModel {
-        return new PointModel(this.object);
-    }
+  Point(): PointModel {
+    return new PointModel(this.object);
+  }
 
-    Marker(): Marker {
-        return marker([this.Point().Lat(), this.Point().Lng()], {
-            icon: icon({
-                iconSize: [20, 20],
-                iconUrl: 'assets/markers/red.png',
-            }),
-        });
-    }
+  Marker(): Marker {
+    const pulseMarker = L.icon.pulse({iconSize: [6, 6], color: 'red'});
+    return marker([this.Point().Lat(), this.Point().Lng()], {
+      icon: pulseMarker,
+    });
+  }
 }
 
 export function locationModelFromEventSource(listener: any): Array<LocationModel> {
-    const data = JSON.parse(listener.data);
-    let locationModelList: Array<LocationModel> = [];
-    if (data != null) {
-        const listData: Array<any> = data.data;
-        if (listData != null) {
-            locationModelList = listData.map<LocationModel>((x: LocationInterface) => new LocationModel(x));
-        }
+  const data = JSON.parse(listener.data);
+  let locationModelList: Array<LocationModel> = [];
+  if (data != null) {
+    const listData: Array<any> = data.data;
+    if (listData != null) {
+      locationModelList = listData.map<LocationModel>((x: LocationInterface) => new LocationModel(x));
     }
-    return locationModelList;
+  }
+  return locationModelList;
 }
 
 export function markerListFromLocationModel(listLocationModel: Array<LocationModel>): Array<Marker> {
-    return listLocationModel.map<Marker>((x: LocationModel) => x.Marker());
+  return listLocationModel.map<Marker>((x: LocationModel) => x.Marker());
 }