earthquake-geoserve-ui
v0.0.4
Published
User interface from Geoserve web service data.
Downloads
3
Readme
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
andCoreModule
from theearthquake-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 thesetCoordinates()
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.
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.