import { AfterViewInit , ChangeDetectorRef , Component , EventEmitter , Input , Output } from '@angular/core' ; import { environment } from '../../../../../environments/environment' ; import L , { icon , LatLng , latLng , Layer , marker , tileLayer } from 'leaflet' ; import { convertPrecisionFloatDigit } from '@gauzy/common-angular' ; @ Component ( { selector : 'ga-leaflet-map' , templateUrl : './leaflet.component.html' , styleUrls : [ './leaflet.component.scss' ] } ) export class LeafletMapComponent implements AfterViewInit { loaded : boolean ; private _zoom : number ; private _icon : string ; private _marker : LatLng ; private map : L . Map ; layer = tileLayer ( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { maxZoom : 18 , attribution : 'Open Street Map' } ) ; protected options = { layers : [ this . layer ] , zoom : this . zoom , center : latLng ( environment . DEFAULT_LATITUDE , environment . DEFAULT_LONGITUDE ) } ; markers : Layer [ ] = [ ] ; @ Input ( ) set zoom ( val ) { this . _zoom = val ; this . options . zoom = val ; } get zoom ( ) { return this . _zoom || 12 ; } @ Input ( ) set icon ( val ) { this . _icon = val ; } get icon ( ) { return this . _icon || 'assets/leafelt/marker-icon.png' ; } @ Input ( ) set marker ( val ) { this . _marker = val ; this . addMarker ( this . _marker ) ; } get marker ( ) { return this . _marker ; } @ Output ( ) mapClicked = new EventEmitter < LatLng > ( ) ; @ Output ( ) mapDoubleClicked = new EventEmitter < LatLng > ( ) ; constructor ( private cdr ) { } ngAfterViewInit ( ) { setTimeout ( ( ) => { this . loaded = true ; } , 100 ) ; this . cdr . detectChanges ( ) ; } onMapReady ( map ) { this . map = map ; } onMapMove ( map ) { } onMapMoveStart ( map ) { } onMapMoveEnd ( map ) { } onMapZoom ( map ) { } onMapZoomStart ( map ) { } onMapZoomEnd ( map ) { } onMapClick ( map ) { const { lat , lng } = map . latlng ; const latitude = convertPrecisionFloatDigit ( lat ) ; const longitude = convertPrecisionFloatDigit ( lng ) ; this . mapClicked . emit ( new LatLng ( latitude , longitude ) ) ; this . addMarker ( new LatLng ( latitude , longitude ) ) ; } onMapDoubleClick ( map ) { } onMapMouseDown ( map ) { } onMapMouseUp ( map ) { } onMapMouseMove ( map ) { } onMapMouseOver ( map ) { } onMapMouseOut ( map ) { } addMarker ( latlng ) { const { lat , lng } = latlng ; const newMarker = marker ( [ lat , lng ] , { icon : icon ( { iconSize : [ 25 , 41 ] , iconAnchor : [ 13 , 41 ] , iconUrl : this . icon , tooltipAnchor : [ 0 , - 41 ] } ) , riseOnHover : true } ) . bindTooltip ( `${ lat },${ lng }` , { permanent : true , opacity : 1 , direction : 'top' } ) ; this . markers = [ ] ; this . markers . push ( newMarker ) ; this . map . panTo ( new LatLng ( lat , lng ) ) ; } }