mirror of
https://github.com/supanadit/geo-smart-map.git
synced 2024-11-22 16:46:24 +00:00
Connect With Geo Smart System
This commit is contained in:
parent
0f1ca42f96
commit
9e807f8176
@ -6,7 +6,8 @@ This is the Front End Application for [Geo Smart System](https://github.com/supa
|
|||||||
- Angular
|
- Angular
|
||||||
|
|
||||||
## Todo
|
## Todo
|
||||||
- Integration With Geo Smart System
|
- Integration With Geo Smart System ( OK )
|
||||||
|
- Get Data From Geo Smart System by Service
|
||||||
|
|
||||||
## 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 [leafletLayer]="layer"></div>
|
<div *ngFor="let x of listLayer" [leafletLayer]="x"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
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 { 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',
|
||||||
@ -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) {
|
constructor(private appService: AppService, private toastr: ToastrService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
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);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -4,15 +4,10 @@ import { NgModule } from '@angular/core';
|
|||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
|
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
|
||||||
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
|
|
||||||
import { AppService } from './app.service';
|
import { AppService } from './app.service';
|
||||||
import { ToastrModule } from 'ngx-toastr';
|
import { ToastrModule } from 'ngx-toastr';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
|
||||||
const config: SocketIoConfig = {
|
|
||||||
url: 'http://localhost:8080', options: {}
|
|
||||||
};
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent
|
AppComponent
|
||||||
@ -21,7 +16,6 @@ const config: SocketIoConfig = {
|
|||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
LeafletModule.forRoot(),
|
LeafletModule.forRoot(),
|
||||||
SocketIoModule.forRoot(config),
|
|
||||||
BrowserAnimationsModule, // required animations module
|
BrowserAnimationsModule, // required animations module
|
||||||
ToastrModule.forRoot()
|
ToastrModule.forRoot()
|
||||||
],
|
],
|
||||||
|
@ -1,19 +1,10 @@
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { Socket } from 'ngx-socket-io';
|
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
export class AppService {
|
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
71
src/app/model/location.ts
Normal file
71
src/app/model/location.ts
Normal file
@ -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());
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user