Integrate with new API, Pulse animation marker

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

@@ -1011,6 +1011,14 @@
         "tslib": "^1.9.0"
       }
     },
+    "@ansur/leaflet-pulse-icon": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@ansur/leaflet-pulse-icon/-/leaflet-pulse-icon-0.1.1.tgz",
+      "integrity": "sha512-2vymis4WMiacers0JJ43Ku0TjdKypnh0atMdFC2VdTGd5G/NGsmW5eYnTZr1YHNOts3CXRbnwlkEMKB7OPsfIg==",
+      "requires": {
+        "leaflet": ">=0.7.3"
+      }
+    },
     "@asymmetrik/ngx-leaflet": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-6.0.1.tgz",

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

src/app/app-routing.module.ts

@@ -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.component.ts

@@ -1,7 +1,10 @@
-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',

src/app/app.service.ts

@@ -1,8 +1,8 @@
-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'
@@ -14,7 +14,7 @@ export class AppService {
 
   getStreamUser(): Observable<Array<Marker>> {
     return new Observable(observer => {
-            const source = new EventSource(environment.api.concat('/stream?request=sse'));
+      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/model/location.ts

@@ -1,4 +1,7 @@
-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;
@@ -46,11 +49,9 @@ export class LocationModel implements LocationInterface {
   }
 
   Marker(): Marker {
+    const pulseMarker = L.icon.pulse({iconSize: [6, 6], color: 'red'});
     return marker([this.Point().Lat(), this.Point().Lng()], {
-            icon: icon({
-                iconSize: [20, 20],
-                iconUrl: 'assets/markers/red.png',
-            }),
+      icon: pulseMarker,
     });
   }
 }