CODEWITHSUNDEEP
leaflet
Bruno
Bruno

Reputation: 418

leaflet pixel size depending on zoom level

I have to display 5x5 degrees pie chart on a leaflet map. I can display pie chart using the great leaflet-dvf library, but I have to provide the radius in pixel, and it is static so far.

I would like to have it dynamic so that at any zoom level, the pie chart fills the 5x5 square (aka radius = 5x5 degree length).

How can I know the length in pixel of the side of a 5x5 degrees square, depending on the zoom level?

Thanks

Upvotes: 4

Views: 3622

Answers (2)

synkyo
synkyo

Reputation: 440

This will work out metres per pixel

metresPerPixel = 40075016.686 * Math.abs(Math.cos(map.getCenter().lat / 180 * Math.PI)) / Math.pow(2, map.getZoom()+8);

Upvotes: 2

Bruno
Bruno

Reputation: 418

I used the following page that provides the pixel per meter on a leaflet map depending on the zoom level:

http://wiki.openstreetmap.org/wiki/Zoom_levels

Then I computed the length of a 5x5 square at the equator: 556000 meters. Then I store the length ratio for zoom level = 0: $scope.lengthRatio = 556000 / 156412 // in meter / pixel

Finally, I get the radius of a pie chart depending on the zoom level ($scope.mapZoom):

var radius = $scope.lengthRatio * Math.pow(2,$scope.mapZoom)) / 2

The /2 is because I want the radius and not the diameter

Simple!

Upvotes: 1

Related Questions