Clickable L.CanvasLayer.SimpleLonLat

[marceloandrioni]

Hello, I am trying to create a L.CanvasLayer.SimpleLonLat where I can click on each individual point and open a popup with the exact coordinates of the grid point (and not just the mouse click coordinates). The final objective is to also show a link in the popup where the user would be redirected to a THREDDS service (NCSS) where he could download the time series for that specific grid point.

Using the code in one of the examples I managed to display the points just fine but the popup never shows. My knowledge of JavaScript is very limited so I am not sure what I should try next.

// GeoTIFF
var tiff = "https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/tz850.tiff";
fetch(tiff).then(r => r.arrayBuffer()).then(function(buffer) {
  var s = L.ScalarField.fromGeoTIFF(buffer);
  let points = s.getCells().map(c => c.center);
  let layer = L.canvasLayer.simpleLonLat(points, {color: 'red'}).addTo(map);
  layer.on("click", function(e) {
    if (e.points !== null) {
      let lat = e.points.lat;
      let lon = e.points.lng;
      let myLatLng = L.LatLng(lat, lng);            
      let popup = L.popup()
      .setLatLng(myLatLng)
      .setContent(`${e.points.lng}`)
      .openOn(map);
    }
  });
  map.fitBounds(layer.getBounds());
});

Thank you and congratulations for the awesome plugin. Besides the main attraction (the vector/flow view), the option of showing gridpoints is excellent for when the user wants to select a model grid point nearest to a desired location.

[Pedrazl]

On a first view it looks fine. You should check if the Developer Console (F12 on Chrome) shows any error.