2

bindPopup gives the correct id, how do I get the correct id from the click event?

The code below gives the id of the last layer.

<!DOCTYPE html>
<html lang="en">
<head>
  <base target="_top">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>question</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

<div id="map" style="width: 100%; height: 1000px;"></div>   
</body>
</html>
<script>
var latArAr = [[55,55],[55.2,55.2],[55.4,55.4]];
var lngArAr = [[-1,-3],[-1,-3],[-1,-3]];
var idAr = [0,1,2];
var colAr = ["#FF0000","#FF8000","#FFFF00"];
const map = L.map('map',{
  doubleClickZoom: false, 
  zoomControl: false,
  center: [55.60418, -1.62987],
  zoom: 7       
});
new L.Control.Zoom({ position: 'topright' }).addTo(map);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var boundsAr = [];
var myLinesAr = [];
for (i = 0; i <latArAr.length;i++) {
  var latAr = latArAr[i];
  var lngAr = lngArAr[i];
  var id = idAr[i];
  var pipAr = [];
  for (j = 0; j <latAr.length;j++) {            
    if(latAr[j]){
      var pip = [];
      var lng = Number(lngAr[j]);
      var lat = Number(latAr[j]);
      pip.push(lng);
      pip.push(lat);
      pipAr.push(pip);
      var newLatLng = new L.latLng(Number(latAr[j]), Number(lngAr[j]));
      boundsAr.push(newLatLng);
    } 
  }
  var myLines = [{
    "type": "LineString",
    "coordinates": pipAr
  }];
  myLinesAr.push(myLines);
  L.geoJSON(myLines, {
    style: function (feature) {
      return {
        stroke: true,
        color: colAr[i], 
        id: idAr[i],
        weight: 15};
       },
     onEachFeature: function (feature, layer, e) {                              
      layer.bindPopup(id+")  id is correct");       //id is correct
      layer.on('click', function(){
        console.log("id = "+id)                     //gives id of last element
        //window.open('x.php?id='+id);
      });
    }
  }).addTo(map);
}

var bounds = new L.bounds;
var polyline = new L.Polyline(boundsAr);
bounds = (polyline.getBounds());
map.fitBounds(bounds, { padding: [1, 1] });
</script>
1

1 Answer 1

3

On way to bind id to each GeoJSON layer is to use onEachFeature option function, by adding to the layer some property that does no interfere with standard Leaflet layer properties.

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

onEachFeature: function (feature, layer) {
  layer.myId = id;
  layer.bindPopup(id + ")  id is correct");
  layer.on('click', function(evt){
    console.log('Clicked id: ' + evt.target.myId);
  });
}
1
  • That works great, many thanks
    – chris
    Nov 22, 2023 at 18:22

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.