1

I have my map showing my different markers - from info pulling from MySQL. But I need to let the marker open html when clicked on.

At this moment the popup is just the marker label and does not take you to the link provided.

<!DOCTYPE html>
<html>
<head>
    <title>AJC Tracking</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />
</head>
<body>

    <div id="map" style="width: 100%; height:100%"></div>

    <script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js">
    </script>

    <script>

    var planes = [
        ["CM63CKGP",-26.090852,28.137212, "http://ajcdev.savanacloud.com/custom/qsourcescript/leaflet/single.php?Registration=CM63CKGP"],
["CW94GBGP",-26.12728,28.037458, "http://ajcdev.savanacloud.com/custom/qsourcescript/leaflet/single.php?Registration=CW94GBGP"],
["DJ17CSGP",-26.037963,28.115384, "http://ajcdev.savanacloud.com/custom/qsourcescript/leaflet/single.php?Registration=DJ17CSGP"],
            ["Office",-25.6641595,28.2375668]
        ];

        var map = L.map('map').setView([-25.890852, 28.090852], 10);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);

        for (var i = 0; i < planes.length; i++) {
            marker = new L.marker([planes[i][1],planes[i][2]])
                .bindPopup(planes[i][0])
                .addTo(map);
        }
        
         function onClick(e) {
        console.log(this.options.win_url);
        window.open(this.options.win_url);
    }
 

  
    </script>
</body>
</html>
2

I would recommend updating your leaflet version to 1.7.1 which is the latest, and note that there are differences between leaflet 0.7 and 1+.

About your popup not opening the link, it's because you set the url as text, and not as a link.

You should do this to create a link:

marker = new L.marker([planes[i][1],planes[i][2]])
            .bindPopup(`<a href="${planes[i][0]}" target="_blank" rel="noopener noreferrer">whatever text you want to display for your link</a>`)
            .addTo(map);
| improve this answer | |
  • How do i get each individual marker then to have its own link, sorry stil dont understand how i should change my code. did the upgrade though – Paul van Zyl Oct 12 at 9:30
  • when you just change the bindPopup statement you can have your own link. If you want the link to appear as a url just do .bindPopup(`<a href="${planes[i][0]}" target="_blank" rel="noopener noreferrer">${planes[i][0]}</a>`) – Dror Bogin Oct 12 at 9:31
  • thanks working 100% you are a star, one extra question though; – Paul van Zyl Oct 12 at 10:08
  • if i want ${planes[i][0]} to be shown as a label under each marker and still have the popups working? how do i do that – Paul van Zyl Oct 12 at 10:08
  • bindTooltip(`${planes[i][0]} `) That's the closest leaflet has to a label – Dror Bogin Oct 12 at 10:27

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.