react-leaflet, how I can search exact marker by marker id in react-leaflet?

Question

I want to search exact marker using marker key or id in react-leaflet? is it posible? can someone help me. i am new for react-leaflet

I added some markers on my map. now i want to add search bar and i need to find exact marker using marker key,name,id or anything.

const renderPlants = (plants) => {
    let plant = plants.filter(v => v?.longitude !== null);
      return plant?.map((item) => {
        var today = new Date();
        var dateofPlanting = new Date(item?.dateofPlanting);
        const diffTime = Math.abs(today - dateofPlanting);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        const isExpired = (diffDays > 1460) ? (true) : (false);
        const invested = (item?.investment===1) ? (true) : (false);
          return (
            
            <Marker
            key={item.treeID}
              eventHandlers={{
                mouseover: (event) => event.target.openPopup(),
                click: (e) => {
                  showModal(item, invested, isExpired );
                },
              }}
              position={[item?.latitude, item?.longitude]} 
              icon={(isExpired) ? (markerIconGold) :  (item?.investment) ? (markerIconSilver) : (markerIconGreen)}>
              <Popup>{item.treeID}</Popup>
      </Marker>
          )
      })
  };

score 0 · Answer 1 · answered Oct 27 '22 at 09:49

With react-leaflet I like to just see the leaflet part as a canvas. You control the state from the outside. You will do the search on the state in your case plants and then you will just filter out the markers matching the search condition in your render function:

const renderPlants = (plants, searchCondition) => {
    let plant = plants.filter(v => v?.longitude !== null).filter(p=> searchCondition(p));

react-leaflet, how I can search exact marker by marker id in react-leaflet?

1 Answers1