author Christopher Cook
*  copyright import { Utils } from '../../../core/Utils' ; import { MappingAPI , IMapProvider , MapOptions , IMapManager } from '../interfaces/mapping' ; import { Events } from '../../../services/Events' ; import { Observable } from 'rxjs/Observable' ; import { Dictionary } from 'typescript-collections' ; import { GeoPosition , GeoLatLng , GeoBounds } from './../../../model/GeoPosition' ; import { Logging , LogLevel } from './../../Logging' ; import { Icon , Map , LatLng , Marker , TileLayer , LatLngBounds } from 'leaflet' ; import { PlaceSearchResult } from '../../../model/AppModels' ; module export class LeafletMap implements IMapProvider { mapAPIType : MappingAPI ; mapReady : boolean ; providerError : string ; mapCanvasID : string ; private map : L . Map ; private markerList : Dictionary < number , any > ; constructor constructor ( private events , private logging ) { this . events = events ; this . mapAPIType = MappingAPI . LEAFLET ; this . mapReady = false ; this . markerList = new Dictionary < number , google . maps . Marker > ( ) ; } initAPI ( ) { } param mapcanvasID param mapConfig initMap ( mapCanvasID , mapConfig , parentMapManager ) { this . mapCanvasID = mapCanvasID ; let apiLoaded = true ; if ( apiLoaded ) { if ( this . map == null ) { let mapCanvas = document . getElementById ( mapCanvasID ) ; if ( mapCanvas != null ) { this . map = new Map ( mapCanvasID ) . setView ( new LatLng ( 51.505 , - 0.09 ) , 13 ) ; ( < any > TileLayer ) . provider ( 'Stamen.Watercolor' ) . addTo ( this . map ) ; mapCanvas . style . width = '100%' ; mapCanvas . style . height = Utils . getClientHeight ( ) . toString ( ) ; this . logging . log ( "Defaulted map height to " + Utils . getClientHeight ( ) ) ; let providerContext = this ; this . map . on ( 'moveend' , ( ) => { providerContext . events . publish ( 'ocm:mapping:dragend' ) ; } ) ; this . map . on ( 'zoomend' , ( ) => { providerContext . events . publish ( 'ocm:mapping:zoom' ) ; } ) ; this . mapReady = true ; this . events . publish ( 'ocm:mapping:ready' ) ; } } } else { this . logging . log ( "Call to initMap before API is ready:" + MappingAPI [ this . mapAPIType ] , LogLevel . ERROR ) ; this . mapReady = false ; return false ; } } /** Clear current markers */ clearMarkers ( ) { if ( this . markerList != null ) { this . markerList . forEach ( ( key , marker ) => { try { marker . setMap ( null ) ; } catch { } } ) ; } this . markerList = new Dictionary < number , any > ( ) ; } param poiList param parentContext showPOIListOnMap ( poiList , parentContext ) { let clearMarkersOnRefresh = false ; let map = this . map ; let markersAdded = 0 ; let mapProviderContext = this ; if ( clearMarkersOnRefresh ) { this . clearMarkers ( ) ; } let mapzoom = map . getZoom ( ) ; if ( poiList != null ) { let poiCount = poiList . length ; for ( let i = 0 ; i < poiList . length ; i ++ ) { if ( poiList [ i ] . AddressInfo != null ) { if ( poiList [ i ] . AddressInfo . Latitude != null && poiList [ i ] . AddressInfo . Longitude != null ) { let poi = poiList [ i ] ; let addMarker = true ; if ( ! clearMarkersOnRefresh && this . markerList != null ) { if ( this . markerList . containsKey ( poi . ID ) ) { addMarker = false ; } } if ( addMarker ) { let poiLevel = Utils . getMaxLevelOfPOI ( poi ) ; let iconURL = null ; let animation = null ; let shadow = null ; let markerImg = null ; iconURL = "images/icons/map/level" + poiLevel ; if ( poi . UsageType != null && poi . UsageType . Title . indexOf ( "Private" ) > - 1 ) { iconURL += "_private" ; } else if ( poi . StatusType != null && poi . StatusType . IsOperational != true ) { iconURL += "_nonoperational" ; } else { iconURL += "_operational" ; } iconURL += "_icon.png" ; let defaultMarkerIcon = new Icon ( { iconUrl : iconURL , iconSize : [ 34 , 50 ] , iconAnchor : [ 15 , 45 ] } ) ; let markerTooltip = "OCM-" + poi . ID + ": " + poi . AddressInfo . Title + ":" ; if ( poi . UsageType != null ) { markerTooltip += " " + poi . UsageType . Title ; } if ( poiLevel > 0 ) { markerTooltip += " Level " + poiLevel ; } if ( poi . StatusType != null ) { markerTooltip += " " + poi . StatusType . Title ; } let marker = < any > new Marker ( new LatLng ( poi . AddressInfo . Latitude , poi . AddressInfo . Longitude ) , < L . MarkerOptions > { icon : defaultMarkerIcon , title : markerTooltip , draggable : false , clickable : true } ) ; marker . _isClicked = false ; marker . poi = poi ; marker . on ( 'click' , function ( e ) { if ( this . _isClicked == false ) { this . _isClicked = true ; if ( console ) { console . log ( "POI clicked:" + this . poi . ID ) ; } mapProviderContext . events . publish ( 'ocm:poi:selected' , { poi : poi , poiId : poi . ID } ) ; } } ) ; marker . addTo ( this . map ) ; this . markerList . setValue ( poi . ID , marker ) ; markersAdded ++ ; } } } } this . logging . log ( markersAdded + " new map markers added out of a total " + this . markerList . size ( ) ) ; } let uiContext = this ; } refreshMapLayout ( ) { if ( this . map != null ) { } } setMapCenter ( pos ) { if ( this . mapReady ) { } } getMapCenter ( ) { let obs = new Observable < GeoPosition > ( observer => { let pos = this . map . getCenter ( ) ; observer . next ( new GeoPosition ( pos . lat , pos . lng ) ) ; observer . complete ( ) ; } ) ; return obs ; } setMapZoom ( zoomLevel ) { if ( this . mapReady ) { this . map . setZoom ( zoomLevel , { } ) ; } } getMapZoom ( ) { let obs = new Observable < number > ( observer => { let zoom = this . map . getZoom ( ) ; observer . next ( zoom ) ; observer . complete ( ) ; } ) ; return obs ; } setMapType ( mapType ) { } getMapBounds ( ) { let obs = new Observable < Array < GeoLatLng > > ( observer => { let bounds = new Array < GeoLatLng > ( ) ; let mapBounds = this . map . getBounds ( ) ; bounds . push ( new GeoLatLng ( mapBounds . getNorthEast ( ) . lat , mapBounds . getNorthEast ( ) . lng ) ) ; bounds . push ( new GeoLatLng ( mapBounds . getSouthWest ( ) . lat , mapBounds . getSouthWest ( ) . lng ) ) ; observer . next ( bounds ) ; observer . complete ( ) ; } ) ; return obs ; } renderMap ( poiList , mapHeight , parentContext ) { document . getElementById ( this . mapCanvasID ) . style . height = mapHeight + "px" ; if ( this . mapReady ) { this . showPOIListOnMap ( poiList , parentContext ) ; } return true ; } renderPolyline ( polyline ) { this . clearPolyline ( ) ; } clearPolyline ( ) { } moveToMapBounds ( bounds ) { this . map . fitBounds ( new LatLngBounds ( { lat : bounds . southWest . latitude , lng : bounds . southWest . longitude } , { lat : bounds . northEast . latitude , lng : bounds . northEast . longitude } ) , { } ) ; } focusMap ( ) { } unfocusMap ( ) { } placeSearch ( keyword ) { return null ; } addPOILayer ( data ) { this . logging . log ( "Add POI Layer not implemented in this provider." ) ; } }