I am working with a leaflet app and I'm shifting a lot of the GIS calculations to the back end (a nodejs app). I need to be able to get the RGB value of a pixel given the latlng and the map zoom. (I'm using the Mapbox RGB Encoded Dem and I need elevation on a pixel-by-pixel basis). In order to do that, I need the XY value of the pixel relative to the map origin. This is conveniently done using leaflet's map.project function. You can see a quick example of this here: codesandbox example.

Now I want to be able to get these XY coordinates on the back end, and I won't have the leaflet map instance to help me. (I could pass the L.map instance to the back end, but I feel this is overkill.)

How can I write a function from scratch (or with some small / simple GIS libraries) to calculate the XY pixel value from a given latlng and zoom? I feel this is probably a simple or even duplicate question but I'm not finding any coord transformation discussions that account for map zoom, or that are specific to a latlng's associated pixel on a webmap for a given projection and xyz coord.

  • 1
    If you want to do it yourself on the server side, you can find all the required formulas/procedures/scripts here: wiki.openstreetmap.org/wiki/Slippy_map_tilenames – TomazicM Jan 3 at 11:04
  • Exactly what I was looking for, thank you – Seth Lutske Jan 3 at 16:31
  • I realize the formulas (js versions here) they give on that page gets you the X and Y of the tile coordinate, not necessarily the point coordinate (though I need both). Am I understanding that right? If so, how could I get the XY of the point on the tile? Simply multiply the remainders by 256 and round down? – Seth Lutske Jan 3 at 21:45

Use L.CRS.latLngToPoint(), e.g.

 L.latLng([-30, 60]), // L.LatLng instance
 6                    // Zoom level

See a working example

  • This is handy, thank you. I guess what I should have written explicitly in the question is that I'm trying to avoid bringing the leaflet library into my server side app in general, to avoid bloat. Though as my app would benefit from a lot of the util functions built into leaflet, it begs the question of whether or not its worth it to bring a front-end library like leaflet into a nodejs app for exactly this purpose, or find other ways to do my calculations. – Seth Lutske Jan 3 at 16:36
  • You can always import from 'leaflet/src/geo/crs/CRS.3857.js', which will import the minimal stuff needed. – IvanSanchez Jan 3 at 16:53
  • So I tried this directly and it didn't work, it started complaining that there is no window object. Leaflet's internals are very object oriented, and somewhere along the way, this points to the window object. I gutted out a lot of the functionality and removed alot of the this statements, and I have it working now. There's a lot of great math in leaflet's guts, I think it would be great to one day get it all into a headless package that's more runtime-environment independent. Thanks for your help! – Seth Lutske Jan 7 at 5:49

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.