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/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />

    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/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>
2

1 Answer 1

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);
}
3
  • Hi, thanks, but with this solution I don't see the markerscluster / icons anymore.
    – Robb
    Apr 6 at 21:40
  • See working JSFiddle at jsfiddle.net/TomazicM/gp0uejms
    – TomazicM
    Apr 7 at 7:33
  • Thank you very much! It works perfectly!
    – Robb
    Apr 8 at 6:31

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.