Search code examples
javascriptleafletreact-leaflet

React-Leaflet : Calculate actual camera height from the ground based on zoom level

Is it possible to get the height of the leaflet's 'camera' from the ground, based on the zoom level?

enter image description here

If you look at the screenshot above (taken from a movie), I am trying to achieve the same result in the red circle, which is displaying at what height the 'camera' is at on the current zoom level.

I've tried to search for a solution for this, but couldn't find any. Keywords used such as 'height', 'zoom level', 'elevation' yielded results that were either to calculate the height of the map canvas, or the topographic elevation.

What I am looking for is how to calculate the hypothetical height from the ground to where the 'camera' (or users viewing the map). My thinking is that this can somehow be achieved via referencing to the zoom level.

Is there a way to achieve this using react-leaflet?

Solution

  • Thank you @SethLutske for pointing to the right direction. The actual answer can be found on the gis.stackexchange : link

    const EARTH_RADIUS_IN_METERS = 6371010
const TILE_SIZE = 256
const SCREEN_PIXEL_HEIGHT = 768

const RADIUS_X_PIXEL_HEIGHT = 27.3611 * EARTH_RADIUS_IN_METERS * SCREEN_PIXEL_HEIGHT

const altitude = (zoom, latitude) => (RADIUS_X_PIXEL_HEIGHT * Math.cos((latitude * Math.PI) / 180)) / (Math.pow(2, zoom) * TILE_SIZE)

    There's actually a lot of discussion related to the topic in the gis.stackexchange link above, but I choose this, as rightfully pointed out by @sethluske and it worked well with react-leaflet.