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='© <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>
)
}
options
property.