Connect With Geo Smart System

README.md

@@ -6,7 +6,8 @@ This is the Front End Application for [Geo Smart System](https://github.com/supa
 - Angular
 
 ## Todo
-- Integration With Geo Smart System
+- Integration With Geo Smart System ( OK )
+- Get Data From Geo Smart System by Service
 
 ## License
 Copyright 2019 Supan Adit Pratama

src/app/app.component.html

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

src/app/app.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { icon, latLng, marker, tileLayer } from 'leaflet';
+import { icon, latLng, Marker, marker, tileLayer } from 'leaflet';
 import { AppService } from './app.service';
 import { ToastrService } from 'ngx-toastr';
+import { LocationModel, locationModelFromEventSource, markerListFromLocationModel } from './model/location';
 
 @Component({
     selector: 'app-root',
@@ -29,11 +30,43 @@ export class AppComponent implements OnInit {
         }),
     });
 
+    // @ts-ignore
+    listLayer: Array<Marker> = [
+        marker([-6.914744, 107.609810], {
+            icon: icon({
+                iconSize: [20, 20],
+                iconUrl: 'assets/markers/red.png',
+            }),
+        }),
+        marker([-6.914744, 107.213], {
+            icon: icon({
+                iconSize: [20, 20],
+                iconUrl: 'assets/markers/red.png',
+            }),
+        }),
+        marker([-6.914744, 107.603459810], {
+            icon: icon({
+                iconSize: [20, 20],
+                iconUrl: 'assets/markers/red.png',
+            }),
+        }), marker([-6.914744, 107.345435], {
+            icon: icon({
+                iconSize: [20, 20],
+                iconUrl: 'assets/markers/red.png',
+            }),
+        })
+    ];
+
+    // tslint:disable-next-line:variable-name
     constructor(private appService: AppService, private toastr: ToastrService) {
     }
 
     ngOnInit(): void {
-        // this.toastr.success('Hello world!', 'Toastr fun!');
+        const source = new EventSource('http://localhost:8080/stream');
+        source.addEventListener('message', message => {
+            const listLocationModel: Array<LocationModel> = locationModelFromEventSource(message);
+            this.listLayer = markerListFromLocationModel(listLocationModel);
+        });
     }
 
 }

src/app/app.module.ts

@@ -4,15 +4,10 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
-import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 import { AppService } from './app.service';
 import { ToastrModule } from 'ngx-toastr';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-const config: SocketIoConfig = {
-    url: 'http://localhost:8080', options: {}
-};
-
 @NgModule({
     declarations: [
         AppComponent
@@ -21,7 +16,6 @@ const config: SocketIoConfig = {
         BrowserModule,
         AppRoutingModule,
         LeafletModule.forRoot(),
-        SocketIoModule.forRoot(config),
         BrowserAnimationsModule, // required animations module
         ToastrModule.forRoot()
     ],

src/app/app.service.ts

@@ -1,19 +1,10 @@
 import { Injectable } from '@angular/core';
-import { Socket } from 'ngx-socket-io';
 
 @Injectable({
     providedIn: 'root'
 })
 export class AppService {
-    notification = this.socket.fromEvent<string[]>('notification');
+    getEventSource(url: string): EventSource {
-    marker = this.socket.fromEvent<number[]>('marker');
+        return new EventSource(url);
-
-    constructor(private socket: Socket) {
     }
-
-
-    sendNotice(msg: string) {
-        this.socket.emit('notice', msg);
-    }
-
 }

src/app/model/location.ts

@@ -0,0 +1,71 @@
+import { icon, marker, Marker } from 'leaflet';
+
+export interface PointInterface {
+    type: string;
+    coordinates: Array<number>;
+}
+
+export class PointModel implements PointInterface {
+    coordinates: Array<number>;
+    type: string;
+
+    constructor(dataLocation: PointInterface) {
+        this.coordinates = dataLocation.coordinates;
+        this.type = dataLocation.type;
+    }
+
+    Lat(): number {
+        return this.coordinates[1];
+    }
+
+    Lng(): number {
+        return this.coordinates[0];
+    }
+}
+
+export interface PointInterface {
+    coordinates: Array<number>;
+}
+
+export interface LocationInterface {
+    id: string;
+    object: PointInterface;
+}
+
+export class LocationModel implements LocationInterface {
+    id: string;
+    object: PointInterface;
+
+    constructor(location: LocationInterface) {
+        this.id = location.id;
+        this.object = location.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',
+            }),
+        });
+    }
+}
+
+// @ts-ignore
+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;
+        locationModelList = listData.map<LocationModel>((x: LocationInterface) => new LocationModel(x));
+    }
+    return locationModelList;
+}
+
+export function markerListFromLocationModel(listLocationModel: Array<LocationModel>): Array<Marker> {
+    return listLocationModel.map<Marker>((x: LocationModel) => x.Marker());
+}