0

I'm trying to add the coordinates from my GeoJSON data as popups when a user clicks on the resulting polyline that I'm plotting onto a map. I'm pretty new to Leaflet and JavaScript and am struggling with getting the coordinates to show in the popup. Ideally I'd like to have them as a tooltip on mouseover and allow the user to pick different points on the polyline, but trying to take it one step at a time currently. I've tried passing a string into bindPopup and that seems to work but alas I cannot figure out how to bind the coordinates.

Here's a picture of what it's giving me:

coordinates not displaying

Here's the snippet of my code that I've been struggling with:

let testing=L.geoJson(riverdata, {
    style: lineStyle,
    onEachFeature: function (feature,layer) { 
        layer.bindPopup(feature.coordinates);  // I also tried feature.geometry.coordinates
        
     }
 });

testing.addTo(map)

Here's what my GeoJSON data looks like:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -91.68191370368,
            37.4596392959356
          ],
          [
            -91.6816838011146,
            37.4592731967568
          ],
          [
            -91.6816256046295,
            37.458334594965
          ],
          [
            -91.6814819052815,
            37.4579912945628
          ],
          [
            -91.6814530044794,
            37.457739494741
          ],
          [
            -91.6813667044044,
            37.4576250985265
          ],
          [
            -91.6813376024365,
            37.4570299983025
          ],
          [
            -91.6814521998167,
            37.4565492942929
          ],
          [
            -91.6814807057381,
            37.4561599940062
          ],
          [
            -91.6815953031182,
            37.4557936936617
          ],
          [
            -91.6817386001348,
            37.4555188938975
          ],
          [
            -91.6821117028594,
            37.4551295936108
          ],
          [
            -91.6823126003146,
            37.4550379961729
          ],
          [
            -91.6830301061273,
            37.4544881954789
          ],
          [
            -91.6853550001979,
            37.4532281979918
          ],
          [
            -91.6856707036495,
            37.4529532939196
          ],
          [
            -91.6859001070261,
            37.4526556953788
          ],
          [
            -91.686387501657,
            37.451579593122
          ],
          [
            -91.6864448040724,
            37.4513735994697
          ],
          [
            -91.6867602020502,
            37.4507323950529
          ],
          [
            -91.6869896054268,
            37.4504347965121
          ],
          [
            -91.687075600028,
            37.4502515941858
          ],
          [
            -91.6871329024434,
            37.4501827955246
          ],
          [
            -91.6871039047837,
            37.4497479945421
          ],
          [
            -91.6868452057242,
            37.44940469414
          ],
          [
            -91.6863858029246,
            37.4493590965867
          ],
          [
            -91.6855818033218,
            37.4493594989181
          ],
          [
            -91.6831990033388,
            37.4497725963593
          ],
          [
            -91.682596206665,
            37.4499559998512
          ],
          [
            -91.6818213015795,
            37.4503913000226
          ],
          [
            -91.6808455064893,
            37.45110129565
          ],
          [
            -91.67998470366,
            37.4519256949425
          ],
          [
            -91.6797552034259,
            37.4523149952292
          ],
          [
            -91.6796695068479,
            37.452818594873
          ],
          [
            -91.6797847002745,
            37.4533220976591
          ],
          [
            -91.6796990036964,
            37.453940294683
          ],
          [
            -91.6795269027352,
            37.4543294981122
          ],
          [
            -91.6790964007378,
            37.4547416940331
          ],
          [
            -91.6782354041934,
            37.4553371965885
          ],
          [
            -91.6774603053927,
            37.455680899322
          ],
          [
            -91.6756515055895,
            37.4560479968786
          ],
          [
            -91.6749336048961,
            37.4560481980443
          ],
          [
            -91.6736126020551,
            37.4556823000312
          ],
          [
            -91.6730381026864,
            37.455270498991
          ],
          [
            -91.672290802002,
            37.4542176946998
          ],
          [
            -91.6722907051444,
            37.4541032984853
          ],
          [
            -91.6721182018518,
            37.453805796802
          ],
          [
            -91.6719744056463,
            37.4530732929707
          ],
          [
            -91.6716008037329,
            37.4526613950729
          ],
          [
            -91.6715716049075,
            37.4516541957855
          ],
          [
            -91.6716285049915,
            37.4507614001632
          ],
          [
            -91.6713982000947,
            37.4495940953493
          ],
          [
            -91.6710533052683,
            37.4490906000137
          ],
          [
            -91.6710245013237,
            37.4487471953034
          ],
          [
            -91.6713683009148,
            37.4475109949708
          ],
          [
            -91.6711384057999,
            37.4469845965505
          ],
          [
            -91.6706788018346,
            37.4467100948095
          ],
          [
            -91.6703341007233,
            37.4463896974921
          ],
          [
            -91.6701903045177,
            37.4461149945855
          ],
          [
            -91.6697595044971,
            37.4457487985492
          ],
          [
            -91.669242605567,
            37.4454742968082
          ],
          [
            -91.66855340451,
            37.4452913999557
          ],
          [
            -91.6680367067456,
            37.4453602954745
          ],
          [
            -91.6676635071635,
            37.4455433934927
          ],
          [
            -91.6667164042592,
            37.446116194129
          ],
          [
            -91.6657406017184,
            37.4470549970865
          ],
          [
            -91.6641620025039,
            37.4482914954424
          ],
          [
            -91.6634446009994,
            37.4490012973547
          ],
          [
            -91.6632149070501,
            37.4491157978773
          ],
          [
            -91.6624113023281,
            37.4497569948435
          ],
          [
            -91.6619522050023,
            37.4502377957106
          ],
          [
            -91.6615790054202,
            37.4503523930907
          ]
        ]
      },
      "properties": {
        "nhdplus_comid": "7516577"
      }
    }
  ]
}

EDIT: After taking IvanSanchez's great advice in the comments I'm able to assign the coordinates to each popup marker. However, each feature's entire coordinate array is assigned instead of each coordinate as shown:

coordinates

I then attempted to iterate through each feature's coordinates but unfortunately this only binds the final coordinate of each feature so this does not solve it either and neither does layer.bindPopup(feature.geometry.coordinates[0].toString()):

let testing = L.geoJson(riverdata, {
    style: lineStyle,
    onEachFeature: function (feature, layer) {
        
      for (let i=0; i<feature.geometry.coordinates.length; i++) { 
        layer.bindPopup(feature.geometry.coordinates[i].toString())
      }

        
}});
6
  • 1
    Look at your browser's console, and at leafletjs.com/reference-1.7.1.html#layer-bindpopup - the argument to bindPopup should be either a String or a HTMLElement. So feature.geometry.coordinates.toString() shall work. – IvanSanchez Apr 25 at 13:45
  • Thanks for the help! I was able to add the coordinates to the popup however I still am unable to bind each one accurately. I edited my post above to show the current iteration of the problem. – just_Mango Apr 25 at 17:40
  • 1
    You'll need to be more precise in what you are trying to achieve - do you want to display the coordinates of the entire polyline, the coordinates of the clicked point, or the coordinates of the polyline segment between two vertices? – IvanSanchez Apr 25 at 18:11
  • Thanks! I'd like to be able to show the coordinates of the clicked points on the polyline segment and (eventually) measure the distance along the polyline between clicked points. TomazicM's solution is working for the first part. I might be too much of a beginner for the second part! – just_Mango Apr 26 at 4:42
  • You are having a new question here. GIS SE site has a policy of one question per question. If you have a new question, please post it as a separate question. If answer below helped you solve problem from this question, it's customary on GIS SE site to mark it as accepted, to let others with similar questions know it was resolved. – TomazicM Apr 26 at 9:28
1

If you want do display coordinates of the clicked point, you can use layer popupopen event processing function to get hold of clicked coordinate and set popup content accordingly.

Code could the look something like this:

let testing = L.geoJson(riverdata, {
  style: lineStyle,
  onEachFeature: function (feature,layer) { 
    layer.bindPopup('');
    layer.on('popupopen', function(e) {
      var popup = e.popup;
      popup.setContent(popup.getLatLng().toString());
    });
  }
});

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.