19 mar 2023

#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;
18 lut 2022

#shorts - utworzenie dodatkowych miejsc w kontrolce sterującej

W leaflet domyślnie mamy dostępne cztery miejsca (cztery rogi mapy) w które możemy wstawić własne elementy lub zmienić pozycję już istniejących elementów np. zoom in/out.
Te miejsca to oczywiście [topleft, topright, bottomleft, bottomright], a co jeżeli chcemy stawić dodatkowy element ale na górze strony i na środku.

Oczywiście możemy to zrobić na wiele sposobów, np. dodając div do strony i przez position abolute i z-index wyśrodkować dany element. Wstrzyknąć element do leaflet-control-container.

25 cze 2021

react-leaflet w przykładach

Tak, stało się. Przepisałem zbiór przykładów użycia leafelt w czystym js z tego adresu leaflet-examples na reacta, a dokładnie za pomocą bibliotek react-leaflet i leaflet.
Wszystkie przykłady w react znajdują się pod tym adresem react-leaflet-examples
Oczywiście nie przeniosłem jeszcze wszystkiego i raczej na to się nie zanosi 😉

Jeżeli ktoś ma pomysły na jakieś inne przykłady chętnie zapoznam się z propozycjami.

15 lip 2020

Centrowanie mapy uwzględniając szerokość diva - fitBounds leaflet.

Tym razem przykład który pokazuje jak wycentrować mapę z pinem uwzględniając szerokość diva. Mapa posiada div nie jest on stworzony przez mapę tylko jest jako osobny div obok mapy a jedynie wyświetla się nad mapa. Do tego jeżeli mapę będziemy zmniejszasz/powiększać na szerokość to mapa wraz pinem będzie ustawiała się na odpowiednim miejscu.

fitBounds with leaflet

To jak konfigurujemy prostą mapę opisałem tutaj alternatywa dla google maps OSM oraz leaflet więc nie będę się już rozpisywał na ten temat.