react leaflet updating markers

0
votes

hello I am a leaflet newbie, I am building my app with map component. the marker on the map should be updated every time the user perform specific action (filters) . the component was working fine . then I decided to add the responsive popup plugin from the original Leaflet. so I tweaked a lot the normal component of react leaflet . now every time I perform I new filters the new markers are added successfully to the map however the old marker are not deleted.

codesandbox demo

any help on how to fix this ?

1
leafletreact-leaflet
Could you create a small demo to reproduce this? – kboul
@kboul I edited my question and added a sandbox link to a demo – Youssef
@Youssef, I sent you two solutions, one is with and one without ResponsivePopup. To be honest I would go without ResponsivePopup (one less dependency and more declarative syntax) – radulle

1 Answers

1
votes

If you are not bound to that component (leaflet-responsive-popup) you can solve it like this (preferred solution): CodeSandbox without ResponsivePopup

<Marker key={i} position={bus}>
  <Popup>
    <span>Note<br />{i}</span>
  </Popup>
</Marker>

If you have to use that component than you have to store markers in an array and clear all the markers before you add new ones like this: CodeSandbox with ResponsivePopup Problem is that you were adding markers, while never removing the old ones. You have to pass all the coordinates so that first you could remove the old ones and than add the new ones.