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> 
)
}
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
    May 14 at 19:21
  • thx for informing me :) i have editied my Question i hope it's better now May 15 at 7:21
  • Add part of the code where you create your popup marker and add it to the map.
    – TomazicM
    May 15 at 7:35
  • 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
    May 15 at 8:11
  • @TomazicM how do i do that in javascript ? May 15 at 8:19

1 Answer 1

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

Your Answer

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.