#shorts - dodanie data attribute do markera

Oj dawno mnie tutaj nie było 😉
Dzisiaj coś co ostatnio mi się bardzo przydało, a mianowicie dodanie data attribute do markera. Potrzebowałem kilka takich elementów.
A więc zacząłem od rozszerzenia funkcji divIcon.
Poniżej funkcja, która jest dość prosta. Używamy metody createIcon

const DataMarkers = L.DivIcon.extend({
  createIcon: function (oldIcon) {
    let divElement = L.DivIcon.prototype.createIcon.call(this, oldIcon);

    // w pętli dodajemy odpowiednie elementy do markera
    if (this.options.data) {
      for (let key in this.options.data) {
        divElement.dataset[key] = this.options.data[key];
      }
    }
    return divElement;
  },
});

L.dataDivIcon = (options) => new L.DivIcon(options);

export default DataMarkers;

A jak użyć tej funkcji.

import DataMarkers from "./dataMarkers";

new DataMarkers({
  html,
  data: { 
    partner: "jakiś tekst"
  },
  className,
  iconSize,
  iconAnchor,
  popupAnchor,
});

Do funkcji przekazujemy to co zwykle plus objekt data. W tym przykładzie jest tylko jeden element parnter ale może ich byś tyle ile potrzebujemy.
Funkcja w pętli na podstawie klucza i wartości poda odpowiednie elementy do markera.
W tym przypadku będzie to data-parner="jakiś tekst".

Jak pobrać te dane z markera, podobnie jak szukamy nazwę klasy. Czyli używam tutaj eachLayer

map.eachLayer((layer) => {
 
 // jeżeli warstwa jest markerem
 if(layer instanceof L.Marker) {
   
   const parnterName = layer.options.icon.options.data;

   // sprawdzam czy data ma określoną własność "partner"
   if(parnterName.hasOwnProperty("partner") {

     // i tutaj możemy zrobić cokolwiek
     console.log(parnterName.partner);
   }
 }
});