Rolf B: Kreise oder Bilder auf OSM Karte lassen sich nicht removen

Beitrag lesen

Hallo Henrique,

von Leaflet habe ich keine Ahnung, nur von JavaScript im Allgemeinen.

Ich habe zunächst einmal den von Dir geposteten Code formatiert. Sowas hilft extrem bei der Lesbarkeit, auch für einen selbst. Es kann natürlich sein, dass deine Formatierung beim Kopieren ins Forum kaputt gegangen ist, aber eigentlich sah es danach nicht aus.

Sodann kommt ein ~~~html davor und ein ~~~ dahinter, damit das Forum es als Code formatiert. Das habe ich letztes Mal kommentarlos für Dich gemacht - ich hätte schon da darauf hinweisen sollen. Sorry.

Zum Code selbst:

Einen DOMContentLoaded Handler braucht man nicht, wenn das Script am Ende der Seite steht. Der ist nur nötig, wenn Du es im <head> einbindest und Du auf DOM Elemente zugreifen willst (wie das >div id="map">, die dann noch nicht da sind. Steht das Script am Ende, sind sie schon da.

Wenn man sich darauf verlässt, dass der Internet Explorer tot ist, kann man die Script-Ausführung am Ende des Body auch mit dem defer Attribut des Script-Elements erzwingen. defer-Scripte laufen unmittelbar vor dem DOMContentLoaded Event.

Für den body braucht man querySelector nicht, der ist über document.body auch direkt zugänglich

Für genauere Aussagen müsste ich den Code online sehen. Ich habe an einigen Stellen den Verdacht, dass Du nicht auf die richtigen Elemente zugreifst, aber da ich Leaflet nicht kenne, müsste man dafür ein bisschen debuggen.

Zum Beispiel:

  • Ich würde annehmen, dass L.popup() ein neues Popup erzeugt. Dieses Popup wird bei Dir, wie es aussieht, für jeden Klick auf die Karte recycled. Ich bin nicht sicher, ob das eine gute Idee ist. Vermutlich sollte man für jeden Klick ein neues Popup erzeugen und das alte verwerfen
  • Das Popup wird nicht geschlossen. Ich sehe den "openOn(map)" dafür, aber wenn removeElement läuft, sehe ich nur das Entfernen von myCircle. Das Popup bleibt. Ist das deine Absicht?
  • Es ist falsch, den click-Handler für den remove auf dem Dokument zu registrieren. Diese click-Handler sammeln sich an, du erzeugst bei jedem click einen neuen. Wenn Du das Popup wiederverwenden willst, registriere den remove-Handler auf dem Popup, und nur einmal. Nicht im onMapClick. Wenn Du für jeden onMapClick ein neues Popup erzeugen willst, dann registriere den click-Handler für's remove in onMapClick, aber auf dem Popup. Im removeElement verwende dann event.currentTarget, um das HTML Element für das Popup zu erhalten.

Ob das so passt, weiß ich nicht, weil ich nicht weiß, was L.popup liefert. Ist das ein Leaflet-internes Objekt, oder das DOM Element, das Leaflet für das Popup verwenden will?

Rolf

--
sumpsi - posui - obstruxi