CODEWITHSUNDEEP
jqueryleaflet
Keith D Kaiser
Keith D Kaiser

Reputation: 1036

How to verify the Leaflet Marker being clicked is the one I want based on its popup information?

In leaflet some of my markers are built like this;

$div1 = "<div class='xx'>OBJ: $objmrkr<br></div><div class='gg'>W3W: $w3w</div>";                          //echo "$div1<br>";   
        $div2 = "<div class='cc'>Comment:<br>$comment</div>";               //echo "$div2<br>";
        $div3 = "<div class='bb'><br>Cross Roads:<br>$cr</div><br><div class='gg'>$row[lat],$row[lng]<br>Grid: $gs<br><br>Captured:<br>$row[timestamp]</div>";  //echo "$div3<br>";
        
        
        $objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
                            rotationAngle: $dup, 
                            rotationOrigin: 'bottom', 
                            opacity: 0.75,
                            contextmenu: true, 
                            contextmenuWidth: 140,
                            contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
                            
                            icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
                            title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();                    
                            
                            $('Objects'._icon).addClass('objmrkr'); 
                                       
                       ";
        };

When right clicked on the circleKoords function is called, but before its code is run I need to know if I have the correct marker. The correct markers have an 'OBJ:' in the title like the example. This seems like a clumsy way to do this but I don't know another. My question is how do I verify that 'OBJ:' is in the popup of this marker? There are a number of similar questions on SO but none of them seems to work, I'm not sure if its because I'm using contextmenu or something else. I tried; var imanobj = e.xx kind of things but nothing seems to get what I need? Thoughts?

Upvotes: 0

Views: 108

Answers (1)

Falke Design
Falke Design

Reputation: 11348

You need to get the content of the popup (of the marker) marker.getPopup().getContent() and then you can check with content.indexOf("OBJ") > -1 if it contains the string.

marker.on('contextmenu',(e)=>{
  var marker = e.target;
  if(marker.getPopup()){
    var popup = marker.getPopup();
    if(popup.getContent().indexOf("OBJ") > -1){
        alert('Clicked Marker has OBJ')
    }
  }
})

https://jsfiddle.net/falkedesign/54hoaerx/

Other way to set the OBJ flag:

If you want to know if the marker is a OBJ-Marker, you can simply add a property flag. $objmrkr.objFlag = true;

$objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
                            rotationAngle: $dup, 
                            rotationOrigin: 'bottom', 
                            opacity: 0.75,
                            contextmenu: true, 
                            contextmenuWidth: 140,
                            contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
                            
                            icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
                            title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();                    
                            
                            $('Objects'._icon).addClass('objmrkr'); 
                   $objmrkr.objFlag = true;
                       ";

marker.on('contextmenu',(e)=>{
  var marker = e.target;
  if(marker.objFlag){
        alert('Clicked Marker is a OBJ-Marker')
  }
})

Implementation of the listener in the php string:

(I have not checked if there any php errors)


$objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
        rotationAngle: $dup,
        rotationOrigin: 'bottom',
        opacity: 0.75,
        contextmenu: true,
        contextmenuWidth: 140,
        contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
        
        icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
        title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();

        $('Objects'._icon).addClass('objmrkr');

        $objmrkr.on('contextmenu',function(e){
            var marker = e.target;
            if(marker.getPopup()){
                var popup = marker.getPopup();
                if(popup.getContent().indexOf('OBJ') > -1){
                    alert('Clicked Marker has OBJ')
                }
            }
        })";

Upvotes: 2

Related Questions