This project is a website that creates high resolution height maps (where each bit represents the height for that spot) using terrain-dem (for actual elevation) and streets-v8 (for water contours) tile sets. With resolutionMultiplier I can control how high the resolution of final png image will be. The smaller map size I make with the same resolution, the higher zoom will be used when tiles will be downloaded.
Here are screenshots of 2 maps with the same resolution and at the same sample location, but with different zoom levels. As you can see, using zoom 12, water contours (where black coloured water is contacting gray coloured land) are fine and smooth, as they should be (cyan lines).
Here is a screenshot of height map that I get when I am setting zoom to 13 with oversimplified shapes I would not expect from zooming in.
I went to Mapbox studio to find out at which zoom I could get this resolution and recognised those shapes represented as cyan lines at zoom 8.
https://studio.mapbox.com/tilesets/mapbox.mapbox-streets-v8/#8.12/52.59451/5.42078
(all layers except water should be hidden to make those lines easy to see)
But at zoom 13 they have to look like this.
https://studio.mapbox.com/tilesets/mapbox.mapbox-streets-v8/#13.19/52.59451/5.42078
How can I get tiles that represent zoom level 13?
Here is the codepen my main js file.
<https://codepen.io/GP2023/pen/GRdWqNm.>
There are also other js files included into this project, but codepen does not allow me to attach them.
Thanks for helping.