Dodawanie, przesuwanie i kasowanie markerów - Leaflet

Ten wpis pokaże w jaki sposób dodać, przesuwać oraz kasować markery. Przykład ten można fajnie wykorzystać. Jeżeli chcemy poznać współrzędne np. firmy. Moglibyśmy zrobić formularz w popupie który przechwyci kliknięcie i współrzędne geograficzne, jakieś pole na nazwę firmy, pole na opis firmy. Przydał by się również przycisk który zapisze te dane w bazie, a później wyświetlić te informacje wraz z markerem na produkcyjnej mapie.

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.

<div class="marker-position">click on the map, move the marker, click on the marker</div>
<div id="map"></div>

W pierwszy div będzie "wstrzykiwać" współrzędne i inne teksty 😉 Drugi div to oczywiście miejsce na naszą mapę.

Teraz czas na trochę js. Najpierw podstawa do wyświetlenia mapy.

// konfiguracja mapy
let config = {
  minZoom: 7,
  maxZomm: 18
};

// powiększenie w jakim uruchomi się mapa
const zoom = 18;

// współrzędne mapy
const lat = 52.2297700;
const lon = 21.0117800;

// wstawienie mapy w div o zadanych ustawieniach
const map = L.map('map', config).setView([lat, lon], zoom);

// ta część ustawia nam warstwę "kafelków"
// które są serwowane z www.openstreetmap.org 
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Dalsza część odpowiada już za zdarzenia na mapie. Czyli nasze kliknięcia, przesuwanie markerów oraz ich kasowanie.

// wywołanie funkcji dodającej marker
// na zdarzenie 'click'
map.on('click', addMarker);

// ten button będzie kasował marker
const buttonRemove = '<button type="button" class="remove">delte marker ?</button>';

// div do którego będziemy wstawiać wszelaki informacje
const markerPlace = document.querySelector('.marker-position');

// Dodaj znacznik do mapy w miejscu kliknięcia
function addMarker(e) {
  // ustawiamy aby marker był przesuwalny
  const marker = new L.marker(e.latlng, {
    draggable: true
  })
     // dodajmy marker do mapy
    .addTo(map)
     // dodajemy do popup button
    .bindPopup(buttonRemove);

  // zdarzenie na otwarcie popupu 'popupopen'
  // wywołuje funkcję usuwającą marker
  marker.on("popupopen", removeMarker);

  // zdarzenie na zakończenie 'dragend' przesunięcia
  // markera, wywołuje funkcję 'dragedMaker'
  marker.on('dragend', dragedMaker);

  // dodaje na mapie informację o pozycji markera
  markerPlace.textContent = `
    new marker: ${e.latlng.lat}, ${e.latlng.lng}
  `;
}

// funkcja usuwająca marker z mapy
function removeMarker() {
  const marker = this;
  const btn = document.querySelector('.remove');

  btn.addEventListener('click', function () {
    // tekst w po usunięciu markera ;)
    markerPlace.textContent = 'goodbye marker ?'
    // usunięcie markera z mapy
    map.removeLayer(marker);
  })
}

// funkcja dodająca wpis na mapie ze
// współrzędnymi przesuniętego markera
function dragedMaker() {
  markerPlace.textContent = `
    change position: ${this.getLatLng().lat}, ${this.getLatLng().lng}
  `;
};

Jak widać jest to dość prosty przykład, bardziej "życiowy" 😉
Poniżej podgląd jak wszystko razem działa.

See the Pen
Add move and delete marker Leaflet by Greg (@Tomik23)
on CodePen.

Powiązane artykuły:

Alternatywa dla google maps – Open Street Map oraz Leaflet
Jak do Open Street Map i Leaflet dodać routing – OSRM
Użycie GeoJson z Leaflet
Centrowanie mapy uwzględniając szerokość diva – fitBounds leaflet
Jak dodać kolorowe markery w postaci svg oraz legendę do map z leaflet