import { Component } from '@angular/core' ; import { icon , latLng , Layer , marker , tileLayer } from 'leaflet' ; @ Component ( { selector : 'leafletMarkersDemo' , templateUrl : './markers-demo.component.html' } ) export class LeafletMarkersDemoComponent { LAYER_OSM = tileLayer ( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { maxZoom : 18 , attribution : 'Open Street Map' } ) ; options = { layers : [ this . LAYER_OSM ] , zoom : 10 , center : latLng ( 46.879966 , - 121.726909 ) } ; markers : Layer [ ] = [ ] ; addMarker ( ) { const newMarker = marker ( [ 46.879966 + 0.1 * ( Math . random ( ) - 0.5 ) , - 121.726909 + 0.1 * ( Math . random ( ) - 0.5 ) ] , { icon : icon ( { iconSize : [ 25 , 41 ] , iconAnchor : [ 13 , 41 ] , iconUrl : '2b3e1faf89f94a4835397e7a43b4f77d.png' , iconRetinaUrl : '680f69f3c2e6b90c1812a813edf67fd7.png' , shadowUrl : 'a0c6cc1401c107b501efee6477816891.png' } ) } ) ; this . markers . push ( newMarker ) ; } removeMarker ( ) { this . markers . pop ( ) ; } }