1

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 here are they 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> 
)
}
New contributor
Johnny Capreano is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
5
  • 1
    Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code.
    – TomazicM
    2 days ago
  • thx for informing me :) i have editied my Question i hope it's better now 2 days ago
  • Add part of the code where you create your popup marker and add it to the map.
    – TomazicM
    2 days ago
  • Sorry, but I'm not familiar with React. But anyway, Leaflet layers have no property that would tell you it's type. Solution is that when creating a layer you add your own property as one of the options and which is later accessible under layer's options property.
    – TomazicM
    2 days ago
  • @TomazicM how do i do that in javascript ? 2 days ago

1 Answer 1

0

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();
  }
});

Your Answer

Johnny Capreano is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.