mirror of
https://github.com/supanadit/geo-smart-map.git
synced 2024-11-10 09:52:16 +00:00
Get Data From Geo Smart System by Service
This commit is contained in:
parent
00c8b819d5
commit
408c2a4f70
@ -9,7 +9,7 @@ This is the Front End Application for [Geo Smart System](https://github.com/supa
|
|||||||
|
|
||||||
## Todo
|
## Todo
|
||||||
- Integration With Geo Smart System ( OK )
|
- Integration With Geo Smart System ( OK )
|
||||||
- Get Data From Geo Smart System by Service
|
- Get Data From Geo Smart System by Service ( OK )
|
||||||
|
|
||||||
## License
|
## License
|
||||||
Copyright 2019 Supan Adit Pratama
|
Copyright 2019 Supan Adit Pratama
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
<div class="map" leaflet [leafletOptions]="options">
|
<div class="map" leaflet [leafletOptions]="options">
|
||||||
<div *ngFor="let x of listLayer" [leafletLayer]="x"></div>
|
<div *ngFor="let x of listMarker" [leafletLayer]="x"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { icon, latLng, Marker, marker, tileLayer } from 'leaflet';
|
import { latLng, Marker, tileLayer } from 'leaflet';
|
||||||
import { AppService } from './app.service';
|
import { AppService } from './app.service';
|
||||||
import { ToastrService } from 'ngx-toastr';
|
import { ToastrService } from 'ngx-toastr';
|
||||||
import { LocationModel, locationModelFromEventSource, markerListFromLocationModel } from './model/location';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
@ -10,7 +9,7 @@ import { LocationModel, locationModelFromEventSource, markerListFromLocationMode
|
|||||||
styleUrls: ['./app.component.scss']
|
styleUrls: ['./app.component.scss']
|
||||||
})
|
})
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements OnInit {
|
||||||
token = 'pk.eyJ1Ijoic3VwYW5hZGl0IiwiYSI6ImNqb3RlbmwyNjEwaHEzcG5oOG1uYXd2bDgifQ.Gb4UHqHuRsXhRsGj8ZfqQg';
|
token = 'pk.eyJ1Ijoic3VwYW5hZGl0IiwiYSI6ImNrMmVweWdrcTA4ZzgzY3A1NDE5ZnQwazkifQ.hK2Mz6cFk-jeIHzFBdaKTg';
|
||||||
style = `ck1w9autf0f0r1co76j79eab7`;
|
style = `ck1w9autf0f0r1co76j79eab7`;
|
||||||
|
|
||||||
options = {
|
options = {
|
||||||
@ -23,49 +22,16 @@ export class AppComponent implements OnInit {
|
|||||||
center: latLng(-6.914744, 107.609810)
|
center: latLng(-6.914744, 107.609810)
|
||||||
};
|
};
|
||||||
|
|
||||||
layer = marker([-6.914744, 107.609810], {
|
|
||||||
icon: icon({
|
|
||||||
iconSize: [20, 20],
|
|
||||||
iconUrl: 'assets/markers/red.png',
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
listLayer: Array<Marker> = [
|
listMarker: 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
|
// tslint:disable-next-line:variable-name
|
||||||
constructor(private appService: AppService, private toastr: ToastrService) {
|
constructor(private appService: AppService, private toastr: ToastrService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
const source = new EventSource('http://localhost:8080/stream');
|
this.appService.getStreamUser().subscribe((listMarker: Array<Marker>) => {
|
||||||
source.addEventListener('message', message => {
|
this.listMarker = listMarker;
|
||||||
const listLocationModel: Array<LocationModel> = locationModelFromEventSource(message);
|
|
||||||
this.listLayer = markerListFromLocationModel(listLocationModel);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,10 +1,24 @@
|
|||||||
import { Injectable } from '@angular/core';
|
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({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
export class AppService {
|
export class AppService {
|
||||||
getEventSource(url: string): EventSource {
|
constructor() {
|
||||||
return new EventSource(url);
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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));
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -55,14 +55,15 @@ export class LocationModel implements LocationInterface {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
export function locationModelFromEventSource(listener: any): Array<LocationModel> {
|
export function locationModelFromEventSource(listener: any): Array<LocationModel> {
|
||||||
const data = JSON.parse(listener.data);
|
const data = JSON.parse(listener.data);
|
||||||
let locationModelList: Array<LocationModel> = [];
|
let locationModelList: Array<LocationModel> = [];
|
||||||
if (data != null) {
|
if (data != null) {
|
||||||
const listData: Array<any> = data.data;
|
const listData: Array<any> = data.data;
|
||||||
|
if (listData != null) {
|
||||||
locationModelList = listData.map<LocationModel>((x: LocationInterface) => new LocationModel(x));
|
locationModelList = listData.map<LocationModel>((x: LocationInterface) => new LocationModel(x));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
return locationModelList;
|
return locationModelList;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
export const environment = {
|
export const environment = {
|
||||||
|
api: 'http://localhost:8080',
|
||||||
production: true
|
production: true
|
||||||
};
|
};
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
// The list of file replacements can be found in `angular.json`.
|
// The list of file replacements can be found in `angular.json`.
|
||||||
|
|
||||||
export const environment = {
|
export const environment = {
|
||||||
|
api: 'http://localhost:8080',
|
||||||
production: false
|
production: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user