Search code examples
javascriptmapboxgeospatialmapbox-gl-jssupercluster

map distance in pixels to meters


I have a web app using MapboxGL and supercluster library to do clustered points. Cluster radius is set in pixels.

I want to convert this radius to meters. Is there's some formula to do it? I also know zoom level and bounding box if it can help to convert this value.

I expect a Javascript function that convert my radius in pixels to meters. This value will be sent on the backend.


Solution

  • In general, the radius does not correspond to any value in meters. Depending on projection used and locations, distance in meters of 10 horizontal pixels could be very different from 10 vertical pixels. The world is spherical, not flat.

    What MapboxGL offers is function unproject - which converts a pixel locations to lng/lat pair. You can unproject a point in the center of the map, and then a point radius pixels right to it, compute distance between these coordinates (see Haversine formula), then choose a point radius pixels up from center to compute vertical distance. They might differ a lot (again, depending on projection and location on the globe).