Hazdev Angular Location View

User interface to accept a geolocated, geocoded, or coordinate location.

Dependecies

Angular Material npm install @angular/material BrowserAnimationsModule npm install @angular/platform-browser/animations BrowserModule npm install @angular/platform-browser' Leaflet npm install leaflet

Using the Location View

Install the hazdev-ng-location-view

npm install hazdev-ng-location-view

Import the LocationInputModule to use the location input

import { LocationInputModule } from 'hazdev-ng-location-view';
…
@NgModule({
  imports: [
    LocationInputModule.forRoot()
  ],
  …
})

Add the LocationDialogComponent and MatDialog service to your componnent

import { MatDialog } from '@angular/material';
import { LocationDialogComponent } from 'hazdev-ng-location-view';

Pass MatDialog into the constructor

constructor(
  public dialog: MatDialog
) {}

Call the following method to open the dialog

openDialog() {
  if (this.dialog && LocationDialogComponent) {
    this.dialog.open(LocationDialogComponent);
  }
}

Tracking the entered location

Import Coordinate object and Coordinates service to keep track of the entered location

import { Coordinates, CoordinatesService } from 'hazdev-ng-location-view';

Subscribe to the CoordinatesService to access the selected location

ngOnInit() {
  this.coordinatesService.coordinates$.subscribe((coordinates: Coordinates) => {
    console.log(coordinates);
  });
}