import { Injectable } from "@angular/core" ; import { HttpClient } from "@angular/common/http" ; import { Location } from "./location" ; import * as L from "leaflet" ; @ Injectable ( ) export class MapService { public map : L . Map ; public baseMaps : any ; private vtLayer : any ; constructor ( private http ) { const osmAttr = "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>, " + "Tiles courtesy of <a href='http://hot.openstreetmap.org/' target='_blank'>Humanitarian OpenStreetMap Team</a>" ; const esriAttr = "Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, " + "iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, " + "Esri China (Hong Kong), and the GIS User Community" ; const cartoAttr = "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> " + "&copy; <a href='http://cartodb.com/attributions'>CartoDB</a>" ; this . baseMaps = { OpenStreetMap : L . tileLayer ( "http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png" , { zIndex : 1 , attribution : osmAttr } ) , Esri : L . tileLayer ( "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}" , { zIndex : 1 , attribution : esriAttr } ) , CartoDB : L . tileLayer ( "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" , { zIndex : 1 , attribution : cartoAttr } ) } ; } disableMouseEvent ( elementId ) { const element = < HTMLElement > document . getElementById ( elementId ) ; L . DomEvent . disableClickPropagation ( element ) ; L . DomEvent . disableScrollPropagation ( element ) ; } toggleAirPortLayer ( on ) { if ( on ) { this . http . get ( "assets/airports.min.geojson" ) . subscribe ( result => { this . vtLayer = L . vectorGrid . slicer ( result , { zIndex : 1000 } ) ; this . vtLayer . addTo ( this . map ) ; } ) ; } else if ( this . vtLayer ) { this . map . removeLayer ( this . vtLayer ) ; delete this . vtLayer ; } } toggleMarkerEditing ( on ) { if ( on ) { this . map . on ( "click" , this . addMarker . bind ( this ) ) ; } else { this . map . off ( "click" ) ; } } fitBounds ( bounds ) { this . map . fitBounds ( bounds , { } ) ; } private addMarker ( e ) { const shortLat = Math . round ( e . latlng . lat * 1000000 ) / 1000000 ; const shortLng = Math . round ( e . latlng . lng * 1000000 ) / 1000000 ; const popup = `<div>Latitude: ${ shortLat }<div><div>Longitude: ${ shortLng }<div>` ; const icon = L . icon ( { iconUrl : "assets/marker-icon.png" , shadowUrl : "assets/marker-shadow.png" } ) ; const marker = L . marker ( e . latlng , { draggable : true , icon } ) . bindPopup ( popup , { offset : L . point ( 12 , 6 ) } ) . addTo ( this . map ) . openPopup ( ) ; marker . on ( "click" , ( ) => marker . remove ( ) ) ; } }