CODEWITHSUNDEEP
typescriptleafletangular-leaflet-directive
ojoaovitoraraujo
ojoaovitoraraujo

Reputation: 97

How to make a leaflet AwesomeMarkers blink

I am trying to make my marker blink on a certain occasion using the alarm-blink class. Currently, I am only able to make the icon blink and not the entire marker. Here is the relevant code I am using:

--TS-- 
static create(layer: MapViewLayer) {
const alarmList: Array<AlarmData> = [];

const colors: { [key: string]: string } = {};
colors['#d63e2a'] = 'red';
colors['#a23336'] = 'darkred';
colors['#ff8d7e'] = 'lightred';
colors['#f69730'] = 'orange';
colors['#ffca92'] = 'beige';
colors['#72af26'] = 'green';
colors['#728224'] = 'darkgreen';
colors['#b2ff59'] = 'lightgreen';
colors['#38aadd'] = 'blue';
colors['#0067a3'] = 'darkblue';
colors['#8adaff'] = 'lightblue';
colors['#ff91ea'] = 'pink';
colors['#d252b9'] = 'purple';
colors['#5b396b'] = 'darkpurple';
colors['#436978'] = 'cadetblue';
colors['#575757'] = 'gray';
colors['#a3a3a3'] = 'lightgray';
colors['#303030'] = 'black';

const markerColor = colors[
  layer.options.icon?.options.markerColorHexa || '#38aadd'
] as L.AwesomeMarkers.AwesomeMarkersIconOptions['markerColor'];
const marker = L.AwesomeMarkers.icon({
  prefix: layer.options.icon?.options.prefix as L.AwesomeMarkers.AwesomeMarkersIconOptions['prefix'],
  icon: layer.options.icon?.options.icon,
  markerColor: markerColor,
  // extraClasses: this.alarmBlink(layer, alarmList) == true ? 'alarm-blink' : '',
});
return new L.Marker(layer.latlng[0], { icon: marker });
}

How can I modify this code to make the entire marker, not just the icon, blink? Additionally, how can I access the bookmark so I can modify its properties?

Upvotes: 0

Views: 116

Answers (1)

ojoaovitoraraujo
ojoaovitoraraujo

Reputation: 97

To make this in parent component i create this function

updateMarkersPositionWithTag(value: LatLngValues, tag: string) {
    this.geometricLayers.markers.forEach((marker) => { 
      if (marker.tag === tag && marker.layer) { 
        marker.latLng = [{ lat: value.lat, lng: value.lng }]; 
        const latLngExp = new L.LatLng(value.lat, value.lng); 
        marker.layer.setLatLng(latLngExp); 
      } 
    });
  }

Upvotes: 0

Related Questions