How to address a specific marker created from a JS-array with forEach

[Frank Poppe]

Hi,
I am rather new to leaflet.
I have created a page that displays markers for points of interest. I created these by putting information into a JS-array, and executing .forEach on the array. So the function executes 

var krp = L.marker ( item[1] etc. )

for all entries, and binds an onClick event to each

krp.on ( 'click' , function (e) { ... }

When clicked I display markers with more detail, by adding the new markers to a FeatureGroup, and zoom in on that group.
By examining the event-object e I am able to determine which marker was clicked (the title is somewhere in that object).

But I would also like to hide temporarily the marker that was clicked, by executing 

???.removeFrom(map)

But as all markers are generated with the variable krp, I am at a loss how to address that specific marker. What to put for ???

[Pat Keller]

The clicked object is available as the `target` property of the MouseEvent.

https://leafletjs.com/reference.html#mouseevent-target

[Frank Poppe]

Thanks, but I had thought in that direction, and did not get it to work.

I do the following.

  krp.on ( 'click' , function (e) {

    alert ( 'e: ' + e ) ;
    alert ( Object.entries( e ) );
    t = Object.entries( e.target ) ;
    alert ( 'target: ' + t) ;
    alert ( 'type: ' + typeof ( t ) ) ;
    t.removeFrom ( nld ) ;

...

  }

The alerts show that t is indeed an object just like the markers created.
But on the removeFrom request I get in the console:

           Uncaught TypeError: t.removeFrom is not a function

I probably overlook something rather simple...

Op dinsdag 25 februari 2025 om 15:13:21 UTC+1 schreef pkel...@gmail.com:

[Pat Keller]

Can you create a jsfiddle, stackblitz, codepen, etc to demonstrate the issue?

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/qupcStHg-pU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/leaflet-js/82d6e2e9-1030-4f83-ad16-b512ffdafaa3n%40googlegroups.com.

--

Patrick Keller
pkel...@gmail.com

[Frank Poppe]

Thanks for willing to look into this.
I know about jsfiddle etc., but have never tried to use it.
However, I will try to put together a small static version of my web-app and find some way to share it. That'll take some time, though.
Maybe scaling down will make it work as intended; in that case I will know where to look and share that.

Op dinsdag 25 februari 2025 om 18:10:11 UTC+1 schreef pkel...@gmail.com:

[Pat Keller]

I couldn't get any of my old jsfiddle's to work. You could fork this plunker and add some example code to the script,js file.

To view this discussion visit https://groups.google.com/d/msgid/leaflet-js/6e0de4b2-2b62-47e2-a1f3-824e60fc6d98n%40googlegroups.com.

--

Patrick Keller
pkel...@gmail.com

[Frank Poppe]

I started to use that plunker, but indeed, while creating a working static version I discovered what went wrong.

Explanation:
I had a function bound to the moveend event, and that function created markers for the points of interest.
A click on a marker generated a query that created markers for more detailed points, and removed the original marker.
These new markers were added to a featureGroup, and then a fitBounds for the featureGroup was executed.
But, this triggered the moveend event, so the original marker was immediately re-created! 
This looked like it was never removed.

Thanks for your helpfulness.

Op woensdag 26 februari 2025 om 15:24:15 UTC+1 schreef pkel...@gmail.com:

[Pat Keller]

Glad you got it figured out.