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