search

Eddie-Larsson / mapbox-print-pdf

A library for saving high resolution versions of mapbox-gl maps to a pdf with an optional header and/or footer that scales with the size of the format.
https://eddie-larsson.github.io/mapbox-print-pdf/
MIT License
51 stars 18 forks source link

Fixed Scale #4

Open reyemtm opened 6 years ago

reyemtm commented 6 years ago

Is there a way to force the map to print at the current map scale (or setting a map scale) instead of having it resizing to fit the document size? I am working on getting a fixed scale (1" to x ft or mi) on my print maps. This is one of the last pieces of that I still need in order to not have to open a desktop client to print a simple map.

ma-v commented 5 years ago

Hi @reyemtm ,

I'm currently having the same issue. Did you find a way to fix a scale? Cheers !

reyemtm commented 5 years ago

Updated. Please read new comment.

I ended up figuring out with trial and error what zoom levels result in what scale, and then having a dropdown to choose a scale for the printed map, with the map then zooming to the appropriate zoom level for the requested print scale. This is a rough estimate but good enough for my purposes.

//1" = x ft to map zoom level
var scales = {
  20:20.8,
  50:19.7,
  100:18.46,
  200:17.55
};

This only works because my maps are limited to a small geographic area. As you move around the globe the scale ratios will change. There is probably a way to figure out what the resulting scale would be regardless of geographic area and screen resolution, but I did not mess with figuring that out. I was also using a custom version of mapbox gl js with a fixed scale control. I have since stopped using this custom version and am not printing a scale control at all. For the maps printed with a known scale I just put 1" ~ x' in the attribution which gets printed with the map.

If you find a better method please share!

reyemtm commented 4 years ago

Fixed! Ok, sort of fixed. For proper scales (i.e. 1 inch = 200ft), the key is to adjust the scale maxWidthPercent to the percent of the target layout that would equal 1 inch. This will get the scale bar in the map to be about 1 inch, assuming you are at a proper zoom level. Then it is just a matter of playing with the zoom levels until you find one that will export the map to the proper scale. For example, in central Ohio zoom level 16.6 is equal to about 1 inch to 200 feet when printed to the letter format with quarter inch margins. However, this will change depending on your screen resolution/map container size due to this line: https://github.com/Eddie-Larsson/mapbox-print-pdf/blob/a6237ac5f837a109bd3e9f4d5afbea8d5aceda97/js/map-utils.js#L100 This line adjusts your print map to fit inside the current map container, but what we actually want is for the print map to be at the same zoom level and center of the current map, even if that means cutting off a certain percentage of area around the borders. Fitting the print map to the current map bounds will of course change the zoom, and then all your work in figuring out which zoom levels match a proper scale goes out the window. I have not found a way to use the fitBounds() method for proper scales across devices, mainly due to this issue. So the key is to delete this line and add an option to the renderMap that passes the current map zoom to the print map. 

zoom: map.getZoom(),

This works well for a small area, but more work would be needed if you wanted to have proper zoom levels to print map scales for a larger area as the ratios will change depending on the longitude and latitude.