Integrate with new API, Pulse animation marker

This commit is contained in:
Supan Adit Pratama 2020-01-04 09:01:18 +07:00
parent 40dc9508a3
commit 93e112873f
9 changed files with 115 additions and 97 deletions

View File

@ -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

View File

@ -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": {

8
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -5,7 +5,8 @@ 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 {
}

View File

@ -1,8 +1,11 @@
import {Component, OnInit} from '@angular/core';
import { latLng, Marker, tileLayer } from 'leaflet';
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',

View File

@ -14,7 +14,7 @@ export class AppService {
getStreamUser(): Observable<Array<Marker>> {
return new Observable(observer => {
const source = new EventSource(environment.api.concat('/stream?request=sse'));
const source = new EventSource(environment.api.concat('/point/get/stream'));
source.addEventListener('message', message => {
const listLocationModel: Array<LocationModel> = locationModelFromEventSource(message);
observer.next(markerListFromLocationModel(listLocationModel));

View File

@ -1,5 +1,8 @@
import {icon, marker, Marker} from 'leaflet';
declare const L: any;
import '@ansur/leaflet-pulse-icon';
export interface PointInterface {
type: string;
coordinates: Array<number>;
@ -46,11 +49,9 @@ export class LocationModel implements LocationInterface {
}
Marker(): Marker {
const pulseMarker = L.icon.pulse({iconSize: [6, 6], color: 'red'});
return marker([this.Point().Lat(), this.Point().Lng()], {
icon: icon({
iconSize: [20, 20],
iconUrl: 'assets/markers/red.png',
}),
icon: pulseMarker,
});
}
}