diff --git a/package-lock.json b/package-lock.json index ff20cc3793..f40c3f8e79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -357,6 +357,12 @@ "integrity": "sha512-lbWmXFxIpEzpH7OprsCRvxj7kie+248Y2ItjeVsF+0+IqvwG+R+0xgZmxq1ofYNTszvuihDahas7O5dscfxTsw==", "dev": true }, + "@types/googlemaps": { + "version": "3.30.4", + "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.30.4.tgz", + "integrity": "sha512-S5Bzg+vlguaIhJa20V+QmetQqoAHAtpy+tAsv7ayps3Vsu0sU1QAEqHrV3KdBb7qy/tq9m4qDs1wQws0gm5Vpg==", + "dev": true + }, "@types/jasmine": { "version": "2.5.54", "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.54.tgz", @@ -6431,7 +6437,7 @@ "opn": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.1.0.tgz", - "integrity": "sha512-iPNl7SyM8L30Rm1sjGdLLheyHVw5YXVfi3SKWJzBI7efxRwHojfRFjwE/OLM6qp9xJYMgab8WicTU1cPoY+Hpg==", + "integrity": "sha1-cs4jBqF9vqWP8QQYUzUrSo/HdRk=", "dev": true, "requires": { "is-wsl": "1.1.0" @@ -6440,7 +6446,7 @@ "send": { "version": "0.16.1", "resolved": "https://registry.npmjs.org/send/-/send-0.16.1.tgz", - "integrity": "sha512-ElCLJdJIKPk6ux/Hocwhk7NFHpI3pVm/IZOYWqUmoxcgeyM+MpxHHKhb8QmlJDX1pU6WrgaHBkVNm73Sv7uc2A==", + "integrity": "sha1-pw4coh0TgsEdDZ9iMd6ygQgNerM=", "dev": true, "requires": { "debug": "2.6.9", diff --git a/package.json b/package.json index e3cf85b949..8f3f295130 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "@angular/compiler-cli": "~5.1.0", "@angular/language-service": "~5.1.0", "@compodoc/compodoc": "1.0.1", + "@types/googlemaps": "3.30.4", "@types/d3-color": "1.0.5", "@types/jasmine": "2.5.54", "@types/jasminewd2": "2.0.3", diff --git a/src/app/pages/maps/maps-routing.module.ts b/src/app/pages/maps/maps-routing.module.ts index f5a306cad1..feb58c772f 100644 --- a/src/app/pages/maps/maps-routing.module.ts +++ b/src/app/pages/maps/maps-routing.module.ts @@ -5,6 +5,9 @@ import { MapsComponent } from './maps.component'; import { GmapsComponent } from './gmaps/gmaps.component'; import { LeafletComponent } from './leaflet/leaflet.component'; import { BubbleMapComponent } from './bubble/bubble-map.component'; +import { SearchMapComponent } from './search-map/search-map.component'; +import { MapComponent } from './search-map/map/map.component'; +import { SearchComponent } from './search-map/search/search.component'; const routes: Routes = [{ path: '', @@ -18,6 +21,9 @@ const routes: Routes = [{ }, { path: 'bubble', component: BubbleMapComponent, + }, { + path: 'searchmap', + component: SearchMapComponent, }], }]; @@ -32,4 +38,7 @@ export const routedComponents = [ GmapsComponent, LeafletComponent, BubbleMapComponent, + SearchMapComponent, + MapComponent, + SearchComponent, ]; diff --git a/src/app/pages/maps/maps.module.ts b/src/app/pages/maps/maps.module.ts index 4cb8206d06..aef0352ccc 100644 --- a/src/app/pages/maps/maps.module.ts +++ b/src/app/pages/maps/maps.module.ts @@ -9,7 +9,10 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module'; @NgModule({ imports: [ ThemeModule, - AgmCoreModule.forRoot(), + AgmCoreModule.forRoot({ + apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k', + libraries: ['places'], + }), LeafletModule.forRoot(), MapsRoutingModule, NgxEchartsModule, diff --git a/src/app/pages/maps/search-map/entity/Location.ts b/src/app/pages/maps/search-map/entity/Location.ts new file mode 100644 index 0000000000..6a104253ab --- /dev/null +++ b/src/app/pages/maps/search-map/entity/Location.ts @@ -0,0 +1,4 @@ +export class Location { + constructor(public latitude: number = 54, public longitude: number = 33) { + } +} diff --git a/src/app/pages/maps/search-map/map/map.component.html b/src/app/pages/maps/search-map/map/map.component.html new file mode 100644 index 0000000000..1b3e17143c --- /dev/null +++ b/src/app/pages/maps/search-map/map/map.component.html @@ -0,0 +1,7 @@ + + + diff --git a/src/app/pages/maps/search-map/map/map.component.scss b/src/app/pages/maps/search-map/map/map.component.scss new file mode 100644 index 0000000000..a051dacb1c --- /dev/null +++ b/src/app/pages/maps/search-map/map/map.component.scss @@ -0,0 +1,13 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + + nb-card-body { + padding: 0; + } + + /deep/ agm-map { + width: 100%; + height: nb-theme(card-height-large); + } +} diff --git a/src/app/pages/maps/search-map/map/map.component.ts b/src/app/pages/maps/search-map/map/map.component.ts new file mode 100644 index 0000000000..7a117ceb7b --- /dev/null +++ b/src/app/pages/maps/search-map/map/map.component.ts @@ -0,0 +1,31 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Location } from '../entity/Location'; + +@Component({ + selector: 'ngx-map', + templateUrl: './map.component.html', + styleUrls: ['./map.component.scss'], +}) +export class MapComponent implements OnInit { + latitude: number; + longitude: number; + zoom: number; + + @Input() + public set searchedLocation(searchedLocation: Location) { + this.latitude = searchedLocation.latitude; + this.longitude = searchedLocation.longitude; + this.zoom = 12; + } + + ngOnInit(): void { + // set up current location + if ('geolocation' in navigator) { + navigator.geolocation.getCurrentPosition((position) => { + this.searchedLocation = new Location( + position.coords.latitude, position.coords.longitude, + ); + }); + } + } +} diff --git a/src/app/pages/maps/search-map/search-map.component.html b/src/app/pages/maps/search-map/search-map.component.html new file mode 100644 index 0000000000..91bc776ba6 --- /dev/null +++ b/src/app/pages/maps/search-map/search-map.component.html @@ -0,0 +1,7 @@ + + Google Maps with search + + + + + diff --git a/src/app/pages/maps/search-map/search-map.component.ts b/src/app/pages/maps/search-map/search-map.component.ts new file mode 100644 index 0000000000..a3fa7c5516 --- /dev/null +++ b/src/app/pages/maps/search-map/search-map.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { Location } from './entity/Location'; + +@Component({ + selector: 'ngx-search-map', + templateUrl: './search-map.component.html', +}) +export class SearchMapComponent { + + searchedLocation: Location = new Location(); + + updateLocation(event: Location) { + this.searchedLocation = new Location(event.latitude, event.longitude); + } +} diff --git a/src/app/pages/maps/search-map/search/search.component.html b/src/app/pages/maps/search-map/search/search.component.html new file mode 100644 index 0000000000..97fa47518c --- /dev/null +++ b/src/app/pages/maps/search-map/search/search.component.html @@ -0,0 +1,4 @@ +
+ +
diff --git a/src/app/pages/maps/search-map/search/search.component.ts b/src/app/pages/maps/search-map/search/search.component.ts new file mode 100644 index 0000000000..1ffe829fd1 --- /dev/null +++ b/src/app/pages/maps/search-map/search/search.component.ts @@ -0,0 +1,44 @@ +import { Component, ElementRef, EventEmitter, NgZone, OnInit, Output, ViewChild } from '@angular/core'; +import { MapsAPILoader } from '@agm/core'; +import { Location } from '../entity/Location'; +import {} from 'googlemaps'; + +@Component({ + selector: 'ngx-search', + templateUrl: './search.component.html', +}) +export class SearchComponent implements OnInit { + + @Output() positionChanged = new EventEmitter(); + + @ViewChild('search') + public searchElementRef: ElementRef; + + constructor(private mapsAPILoader: MapsAPILoader, + private ngZone: NgZone) { + } + + ngOnInit() { + // load Places Autocomplete + this.mapsAPILoader.load().then(() => { + const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { + types: ['address'], + }); + autocomplete.addListener('place_changed', () => { + this.ngZone.run(() => { + // get the place result + const place: google.maps.places.PlaceResult = autocomplete.getPlace(); + + // verify result + if (place.geometry === undefined || place.geometry === null) { + return; + } + + this.positionChanged.emit( + new Location(place.geometry.location.lat(), + place.geometry.location.lng())); + }); + }); + }); + } +} diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index a8bac96f70..1aa0fc98df 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -89,6 +89,10 @@ export const MENU_ITEMS: NbMenuItem[] = [ title: 'Bubble Maps', link: '/pages/maps/bubble', }, + { + title: 'Search Maps', + link: '/pages/maps/searchmap', + }, ], }, {