From 93e112873f656a611f6ea615d72973e14e405b6e Mon Sep 17 00:00:00 2001 From: Supan Adit Pratama Date: Sat, 4 Jan 2020 09:01:18 +0700 Subject: [PATCH] Integrate with new API, Pulse animation marker --- README.md | 2 +- angular.json | 8 +++- package-lock.json | 8 ++++ package.json | 1 + src/app/app-routing.module.ts | 9 ++-- src/app/app.component.html | 2 +- src/app/app.component.ts | 59 ++++++++++++----------- src/app/app.service.ts | 34 ++++++------- src/app/model/location.ts | 89 ++++++++++++++++++----------------- 9 files changed, 115 insertions(+), 97 deletions(-) diff --git a/README.md b/README.md index 8d3dee8..aeda0ea 100644 --- a/README.md +++ b/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 diff --git a/angular.json b/angular.json index fbbab43..caa442c 100644 --- a/angular.json +++ b/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": { diff --git a/package-lock.json b/package-lock.json index 1fda176..d89cdaa 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f52982f..fcaa94c 100644 --- a/package.json +++ b/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", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06c7342..a11dc76 100644 --- a/src/app/app-routing.module.ts +++ b/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 { +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 85d2057..7c128de 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,3 @@
-
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c157579..e668f08 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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 = []; + // @ts-ignore + listMarker: Array = []; - // 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) => { - this.listMarker = listMarker; - }); - } + ngOnInit(): void { + this.appService.getStreamUser().subscribe((listMarker: Array) => { + this.listMarker = listMarker; + }); + } } diff --git a/src/app/app.service.ts b/src/app/app.service.ts index 0a14f76..9c298bb 100644 --- a/src/app/app.service.ts +++ b/src/app/app.service.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> { - return new Observable(observer => { - const source = new EventSource(environment.api.concat('/stream?request=sse')); - source.addEventListener('message', message => { - const listLocationModel: Array = locationModelFromEventSource(message); - observer.next(markerListFromLocationModel(listLocationModel)); - }); - }); - } + getStreamUser(): Observable> { + return new Observable(observer => { + const source = new EventSource(environment.api.concat('/point/get/stream')); + source.addEventListener('message', message => { + const listLocationModel: Array = locationModelFromEventSource(message); + observer.next(markerListFromLocationModel(listLocationModel)); + }); + }); + } } diff --git a/src/app/model/location.ts b/src/app/model/location.ts index c2a5856..42b7679 100644 --- a/src/app/model/location.ts +++ b/src/app/model/location.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; + type: string; + coordinates: Array; } export class PointModel implements PointInterface { - coordinates: Array; - type: string; + coordinates: Array; + 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; + coordinates: Array; } 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 { - const data = JSON.parse(listener.data); - let locationModelList: Array = []; - if (data != null) { - const listData: Array = data.data; - if (listData != null) { - locationModelList = listData.map((x: LocationInterface) => new LocationModel(x)); - } + const data = JSON.parse(listener.data); + let locationModelList: Array = []; + if (data != null) { + const listData: Array = data.data; + if (listData != null) { + locationModelList = listData.map((x: LocationInterface) => new LocationModel(x)); } - return locationModelList; + } + return locationModelList; } export function markerListFromLocationModel(listLocationModel: Array): Array { - return listLocationModel.map((x: LocationModel) => x.Marker()); + return listLocationModel.map((x: LocationModel) => x.Marker()); }