Earthquake Geoserve UI

User interface from Geoserve web service data.

Getting Started:

How to preview the project in your browser:

1. Install NPM dependencies

   npm install
   

2. 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.

1. Install the earthquake-geoserve-ui project

   npm install earthquake-geoserve-ui
   

2. 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
   ]
   

3. 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>
   

4. 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
   });
   

5. With the coordinates set the geoserve components should now display region/place information for the selected coordinates.

General Angular Information

This project was generated with Angular CLI version 1.5.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.