1

I have marker cluster layer in Leaflet. I want to open specific URL when individual marker is clicked, but every time I click on any marker the URL of the last marker is opened.

I've tried many things like:

window.open(this.win_url);
window.open(this.options.win_url);

etc. but nothing works. Can anybody help me?

This is what I got so far:

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet - Marker Click Event</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />

    <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <style>
      #map {
        width: 800px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
      var addressPoints = [
        [-37.8210922667, 175.2209316333, "1", "https://url_address_01.com"],
        [-37.8210819833, 175.2213903167, "2", "https://url_address_02.com"],
        [-37.8210881833, 175.2215004833, "3", "https://url_address_03.com"],
        [-37.8211946833, 175.2213655333, "4", "https://url_address_04.com"],
        [-37.8209458667, 175.2214051333, "5", "https://url_address_05.com"],
        [-37.8208292333, 175.2214374833, "6", "https://url_address_06.com"],
      ];

      var map = L.map("map").setView([-37.82, 175.23], 13);
      L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);
      var markers = L.markerClusterGroup();
      for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var win_url = a[3];
        var marker = L.marker(
          new L.LatLng(a[0], a[1]),
          {
            title: title,
          },
          { win_url: a[3] }
        );

        marker.on("click", function (evt) {
          window.open(win_url);
        });
        markers.addLayer(marker);
      }
      map.addLayer(markers);
    </script>
  </body>
</html>
Improve this question
2
  • Ah, the old "not knowing how javascript variable scope and referencing works" stuff. See stackoverflow.com/questions/111102/…
    – IvanSanchez
    Commented Apr 7, 2022 at 10:35
  • Thanks Ivan, the solution of TomazicM works, but I understand it better now.
    – Robb
    Commented Apr 8, 2022 at 6:33

1 Answer 1

Reset to default
1

Your solution always opens last url from addressPoints beacuse value win_url is just pointer to array a which is again just pointer to array addressPoints, and this pointer changes when you iterate and it finally points to the last element of addressPoints array.

To use actual win_url option value of clicked marker inside click processing function you have to use evt.target.options.win_url value.

Relevant part of the code could then look something like this:

var markers = L.markerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
  var a = addressPoints[i];
  var title = a[2];
  var win_url = a[3];
  var marker = L.marker(new L.LatLng(a[0], a[1]), {
    title: title,
    win_url: a[3]
  });
  marker.on('click', function(evt){ 
    window.open(evt.target.options.win_url);
  });
  markers.addLayer(marker);
}
Improve this answer
3
  • Hi, thanks, but with this solution I don't see the markerscluster / icons anymore.
    – Robb
    Commented Apr 6, 2022 at 21:40
  • See working JSFiddle at jsfiddle.net/TomazicM/gp0uejms
    – TomazicM
    Commented Apr 7, 2022 at 7:33
  • Thank you very much! It works perfectly!
    – Robb
    Commented Apr 8, 2022 at 6:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.