Earthquake-geoserve-ui NPM

Earthquake Geoserve UI

User interface from Geoserve web service data.

Getting Started:

How to preview the project in your browser:

Install NPM dependencies
```
npm install
```
Preview in a browser
```
ng serve -o
```
The application should open (flag -o) in your browser.

Building

This project is intended to be deployed as an NPM package. Building in this sense requires packaging the application from the Angular source code, and then publishing that package to npm earthquake-geoserve-ui.

Package & Publish

Package from the Angular source using ng-packgr. This script packages the application into an npm distributable that can be published.

$ npm run package

The bundled application in the dist-npm folder should be tagged and pushed to npm so that it can be imported into other projects.

$ npm publish dist-npm --tag <version>

The package can now be installed via npm by referencing the earthquake-geoserve-ui package name.

$ npm install earthquake-geoserve-ui@<version>

Using the Geoserve Components

Follow these steps to use any of the geoserve components in your application.

Geoserve Component Selectors

The GeoserveOutputModule contains the following component selectors:

app-admin-region
app-authoritative-region
app-nearby-places
app-neic-catalog-region
app-neic-response-region
app-offshore-region
app-tectonic-summary-region

Installing & Importing

To use the component selectors you must import the correct modules and services into your application.

Install the earthquake-geoserve-ui project
```
npm install earthquake-geoserve-ui
```

Import the GeoserveOutputModule and CoreModule from the earthquake-geoserve-ui

/** app.module.ts */

import { GeoserveOutputModule } from 'earthquake-geoserve-ui';
import { CoreModule as GeoserveCoreModule } from 'earthquake-geoserve-ui';
...
imports: [
    GeoserveCoreModule.forRoot(),
    GeoserveOutputModule
]

Add the desired geoserve components to your component template

/* some.component.html */

<app-admin-region></app-admin-region>
<app-nearby-places></app-nearby-places>
<app-tectonic-summary-region></app-tectonic-summary-region>

Import the CoordinatesService and use the setCoordinates() method to set the coordinate location for the geoserve components. The geoserve components are subscribed to coordinate changes and will trigger a region/place change when the coordinates are updated.
```
/* some.component.ts */

import { CoordinatesService } from 'earthquake-geoserve-ui';
...
constructor(
    public coordinatesService: CoordinatesService
) { }
...
this.coordinatesService.setCoordinates({
    longitude: 35,
    latitude: -105
});
```
With the coordinates set the geoserve components should now display region/place information for the selected coordinates.