import * as L from 'leaflet' ; import { FormatterService } from '@core/formatter.service' ; import { StationService } from '@core/station.service' ; import { LocationPipe } from '../location.pipe' ; import { NumberPipe } from '../number.pipe' ; import { RomanPipe } from '../roman.pipe' ; import { AsynchronousGeoJSONOverlay } from './asynchronous-geojson-overlay' ; /**
 * Shakemap overlay for leaflet map
 */ const ShakemapStationsOverlay = AsynchronousGeoJSONOverlay . extend ( { id : 'shakemap-stations' , legends : [ ] , locationPipe : null , numberPipe : null , romanPipe : new RomanPipe ( ) , title : 'Shakemap Stations' , param product initialize : function ( product ) { const mmiLegend = document . createElement ( 'img' ) ; mmiLegend . src = './assets/shakemap-intensity-legend-small.png' ; mmiLegend . setAttribute ( 'alt' , 'Intensity Scale Legend' ) ; const stationLegend = document . createElement ( 'img' ) ; stationLegend . src = './assets/legend-seismic-station.png' ; stationLegend . setAttribute ( 'alt' , 'Seismic Station Legend' ) ; const dyfiStation = document . createElement ( 'img' ) ; dyfiStation . src = './assets/legend-shakemap-station.png' ; dyfiStation . setAttribute ( 'alt' , 'DYFI Shakemap Station Legend' ) ; this . legends . push ( mmiLegend , stationLegend , dyfiStation ) ; AsynchronousGeoJSONOverlay . prototype . initialize . call ( this ) ; const formatter = new FormatterService ( ) ; this . locationPipe = new LocationPipe ( formatter ) ; this . numberPipe = new NumberPipe ( formatter ) ; this . url = this . getUrl ( product ) ; } , param product getUrl : function ( product ) { if ( product === null ) { return null ; } return product . contents [ 'download/stationlist.json' ] ? product . contents [ 'download/stationlist.json' ] . url : null ; } , param feature param latlng pointToLayer : function ( feature , latlng ) { const props = feature . properties ; const intensity = this . romanPipe . transform ( props . intensity ) ; let marker ; if ( props . network === 'DYFI' || props . network === 'INTENSITY' || props . network === 'CIIM' || props . station_type === 'macroseismic' ) { marker = L . marker ( latlng , { icon : L . divIcon ( { className : `station-overlay-dyfi-layer-icon mmi${ intensity }` , iconAnchor : [ 3.5 , 3.5 ] , iconSize : [ 7 , 7 ] , popupAnchor : [ 0 , 0 ] } ) } ) ; } else { marker = L . marker ( latlng , { icon : L . divIcon ( { className : 'station-overlay-station-layer-icon station-mmi' + `${ intensity }` , iconAnchor : [ 6 , 6 ] , iconSize : [ 12 , 10 ] , popupAnchor : [ - .5 , 0 ] } ) } ) ; } marker . on ( 'click' , this . generatePopup , this ) ; return marker ; } , param data parse : function ( data ) { data = typeof data === 'string' ? JSON . parse ( data ) : data ; const stationService = new StationService ( this . httpClient ) ; data = stationService . translate ( data ) ; return data ; } , param event generatePopup : function ( event ) { const marker = event . target ; const popupContent = this . generatePopupContent ( marker . feature ) ; const options = { maxWidth : 'auto' } ; marker . bindPopup ( popupContent , options ) . openPopup ( ) ; marker . off ( 'click' , this . generatePopup , this ) ; } , param feature generatePopupContent : function ( feature ) { const station = `
      <shakemap-station
          class='shakemap-station-popup'
          station='${ JSON . stringify ( feature ) }'>
      </shakemap-station>
    ` ; return station ; } } ) ; export { ShakemapStationsOverlay } ;