Detecting Leaflet layer type (react-Leaflet)?

Question

I am using the EachLayer() Method to know how many and what Layers are in my Map now

    mapView.eachLayer(layer=>{  
     console.log(layer)
        })

const map = useMapEvents({
layeradd(e){
//if the Layer Added is a PopUp Marker 
// excute map.flyTo(CoordsFromUser,Zoom) 
 console.log(e)
}

I wanted to Determine the Layer Type whether it was Popup Marker or anything else. Is there a way to do so? I looked through the Objects (Layers) returned from the EachLayer() Method and unfortunately I didn't find anything helpful. Is there a way to know the Layer type? The reason why I want to know the Layer type is because I am using the FlyTo() method to set the View of the Map. When a user Enters coordinates a popupMarker would be displayed on the coordinate's location. The Map View should change. I wanted to make sure that the View only changes when the Layer added to the Map is a popupMarker.

return positions===null?null:  (
//if the positions state Array is not Null return the Marker 
and pass the lat,lan recieved from the user  to the position Prop
      <Marker position={[props.lat,props.lan]}>
       
       <Popup>
      <div style={{display:"flex",flexDirection:"column" ,height:"100%"}}>
            
      <p style={{fontSize:"1.2rem",margin:"0.2rem"}}>{props.hotelName}</p>
      
      <img src={props.pic} style={{height:"100%",width:"100%"}}/>
      </div>
        
           </Popup>

         </Marker>
       )
     }

the popup component is Added in my map.js File if the the Array of Coordinates is not Empty the popupMarker will be Returned.

Map.js File :

return(

<MapContainer style={{ height: "100%" ,width:"100%"}} center={mapView} zoom={mapZoom} scrollWheelZoom={true} zoo> 
   <TileLayer noWrap={true}
     attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>

{context&&context[0].length>0?geoData.map((el,index)=>
<LocationMarker   // popupMarker
key={index}
lat={el.latitude}
lan={el.longitude}
/>):"no data"}
</MapContainer> 
)
}

Answer 1

Since I'm not familiar with React, answer will be for vanilla Leaflet JS.

Since Leaflet layers have no property that can be used to detect layer type, one possible solution is, when creating layer, to use some custom option (with name that does not conflict with standard Leaflet layer options), for example layerType.

So creating marker with popup that has to be detected when added to the map could look something like this:

var myMarker = L.marker([46.0434, 14.5041], {layerType: 'markerPopup'}).bindPopup('Marker popup text');

To trigger automatic flyTo map action and popup open when layer is added to the map, the following map layeradd event action can be set (before any marker is added to the map):

map.on('layeradd', function(evt) {
  var layer = evt.layer;
  if (layer.options && (layer.options.layerType == 'markerPopup')) {
    map.flyTo(layer.getLatLng(), 10);
    layer.openPopup();
  }
});