Open link in new window when clicking on marker

Geographic Information Systems Asked by Paul van Zyl on June 22, 2021

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>

hyperlink leaflet

One Answer

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

Correct answer by Dror Bogin on June 22, 2021

Add your own answers!

Ask a Question

Get help from others!