How to open popups from HTML table seperate from map

[Joel Vazquez]

Hello,

I create a map and an HTML table with the list of items I add to the map.  I want to make one of the value of each record a href link that open the marker popup on the map.  Is that possible?  here is the code I use to create both, the table and the markers:

Im not a programmer, so dont blame me if it is not pretty. :D

// Draw HTML table
html = '<table id="firsttable" border="1" width="100%"><tr> <th>Location</th> <th width="10%">Callsign</th> <th>Frequency</th><th>Mode(s)</th> <th width="40%">Notes</th></tr>';

//usage:
readTextFile( file2Download, function(text){
    var markers = JSON.parse(text);

    for ( var i=0; i < markers.length; ++i )
    {
        var freq = markers[i].frequency;
        var frequency = freq.toFixed(4);

        eval("var marker_" + markers[i].id + "= L.marker([ " + markers[i].coordinates    +"]).addTo(nodes);")
       
           eval('var popup_' + markers[i].id + ' = marker_' + markers[i].id + '.bindPopup("<b>Location</b>: ' + markers[i].location + '</br><b>Callsign: </b>' + markers[i].callsign + '</br><b>Frequency: </b>' + frequency + '<br><b>Notes: </b>' + markers[i].notes +'")')

           //console.log("popup_"+markers[i].id);

           //add Table Rows to the table

          //here will go the href link to open the marker popup on the map.

        html += "<tr><td>" + markers[i].location +  '</td> <td width="10%">' + markers[i].callsign +  '</td> <td><a href="#">' + frequency +  "</a></td> <td>" + markers[i].mode +  '</td> <td width="40%">' + markers[i].notes +  "</td> </tr>";

        totalReps= i;
    }


    //Close the table.
    html += "</table>";
    //Add the table to the html div.
    document.getElementById("reptable").innerHTML = html;

    totalReps += "!";
    document.getElementById("totalRepsText").innerHTML = totalReps;
});

Thanks in advance.

[Mark Lawton]

seems like it should work.

did you try it?  

Mark Lawton

www.markslawton.com

If I asked a question above, please respond.  Thank You!

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/90e1c15d-c6f3-4edd-aeea-27880b1ba9fdn%40googlegroups.com.

[Joel Vazquez]

no, is not working, in the href I have "#" just as a placeholder. 

I can create the markers, and the popups, and they work on the map... but I want to open the popups also from the table...

You can see how far I am on it here:
https://www.we0dx.us/maps/kcrooms/

[Mark Lawton]

I see.  Since you want to open the popup using a link, don’t bind the popup to the marker.   Just open a popup when the user clicks the link like this…

function addThePopup() {

L.popup().setLatLng([0,0]).setContent(’some text).openOn(yourMap)

}

You will also need to know when the user clicks the link.  You can add something like this to the <a> tag

onclick=“addThePopup()”

if you want the popup to also work when the user clicks the marker, you can store the popup in a global variable and then open it when the user clicks the link and also open the same popup when the user clicks the marker (by using bind popup)

[Joel Vazquez]

if you want the popup to also work when the user clicks the marker, you can store the popup in a global variable and then open it when the user clicks the link and also open the same popup when the user clicks the marker (by using bind popup)

Yes, this is the way I want it... can you suggest how to do that one?  so I can open the popup from both, the marker and the table?

Thanks again for the help!

[Mark Lawton]

this is approximate. (I’m doing it from memory.) That is, it has been debugged.

var myPopOne = L.popup().setLatLng([0,0]).setContent(’some text);
var myPopTwo = L.popup().setLatLng([10,10]).setContent(’some text 2);


>
> function addThePopup(whichPopup) {
> myMap.addlayer(whichPopup)
> }
>



> You will also need to know when the user clicks the link. You can add something like this to each of your <a> tags
>
> onclick=“addThePopup(myPopOne)”
> onclick=“addThePopup(myPopTwo)”
>

Then to get it working when the user clicks the marker, instead of binding the popup to the marker, you will need to listen for an event when the user clicks the marker. I have never done this, so you will have to research it.

> --
>
> ---
> You received this message because you are subscribed to the Google Groups "Leaflet" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/32fa4acc-21e9-4873-b129-b758b60a91e4n%40googlegroups.com.

[Joel Vazquez]

Ok, thanks, I really appreciate it.  This should get me going...  Ill play with this and post my final for future reference. 

Thanks again.

[Mark Lawton]

if you don’t want to research the event technique, you could have two popups for each marker.  one that gets opened using the link and the other because it is bound to the marker.

Mark Lawton

www.markslawton.com

If I asked a question above, please respond.  Thank You!

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/32fa4acc-21e9-4873-b129-b758b60a91e4n%40googlegroups.com.

[Joel Vazquez]

got it, that sounds easier...