Projecting a GeoTIFF onto a Zoomable/Pan-able Canvas

Community Help
1

Hey all,

I was wondering if anyone had any experience with projecting geotiff images beneath data? I’m trying to draw relevant points from a dataset on top of a zoomable/pan-able map. My current method is:

create a projection using:

const projection = d3.geoIdentity()
  .fitSize([width, height], geojson)

with geojson being constructed from data represented as points.

Since the geotiff file gives me the coordinate extent, I’m trying to draw it to a canvas with:

const [px_min, py_min] = projection([min_coordx, min_coordy])
const [px_max, py_max] = projection([max_coordx, max_coordy])
canvas.drawImage(tiff, px_min, py_min,
  Math.abs(px_max-px_min), Math.abs(py_max-py_min))

But the drawn map doesn’t seem to line up with the data points

for reference, the points are drawn with:

data.forEach(d => {
  const [x,y] = projection([d.Longitude, d.Latitude])
  // ... fillstyles
  canvas.beginPath()
  canvas.moveTo(x,y)
  canvas.arc(x, y, radius, 0, 2.0*Math.PI)
})

I’m not sure exactly where I’m going wrong. Any help would be appreciated :slight_smile: Thank you!

1 Like
2

As a small update, I made a notebook to show where I’m running into trouble.

Link to Notebook

For this example, the goal would be to line up the rivers with the SRTM tile. I kind of eyeballed it here to make them line up, and one can see the magic number from this line:

c.drawImage(bufferCanvas, minx,miny*.67, wx, wy)
1 Like
3

I’ve sent you a suggestion

1 Like
4

Am I unable to see the suggestion b/c the notebook is link shared rather than published? Would be very happy to learn!

5
3 Likes
6

Thank you!

7

Thank you @Fil!!! I’m still learning about which projections are best for what :slight_smile:

1 Like