Differences

This shows you the differences between two versions of the page.

--- projects:voyc:zoom_level [2023/02/13 20:10] – [Resize] jhagstrand
+++ projects:voyc:zoom_level [2023/02/23 18:01] (current) – [Zoom and Scale] jhagstrand
@@ Line 1: / Line 1: @@
-[[Projects]]:[[voyc]]
+[[projects]]:[[voyc]]
+====== Zoom and Scale ======
+Google, ESRI and other systems use a fixed system.
+**zoom level** is a number from 0 to 20
+**scale** is the ratio of distance on the map vs distance on the earth
+Zoom level and scale are inversely related.
+Zoom changes the field of view.
+Scale changes the level of detail.
+===== Zoom Level 0 =====
+At zoom level 0, scale is 1:591657527.591555.
+On the mercator map, the equator is 256 pixels long.
+Scale is calculated using 256 pixels at 96 pixels per inch (ppi), or 37.79527559 pixels per cm (ppcm).
+On the globe, we see only half of the equator and its length is described by:
+$$256 / (PI / 2)$$
-====== Zoom Level ======
 | level | pow2 | scale |
@@ Line 42: / Line 76: @@
 width = height = 845 pixels
-==== Resize ====
+https://liorsinai.github.io/mathematics/2020/08/27/secant-mercator.html
-on window resize
-Google
+==== Resize ====
-keep center and scale constant
-field of view falls where it may
-Voyc
+what to do on window resize?  two choices:
-keep center and field of view constant
+  * keep map scale constant, ala Google Maps
-scale slides along with halfwid
+  * keep zoom level constant, ala Google Earth and voyc
+field of view (FOV) follows the zoom level
-We start with the window size.  Do we really?
+scale determines the level of detail possible
-What does the user expect when he changes the size of his window?
+When you enlarge the window, you could show a wider area, or show more detail.
-User can change the size of his window.  Do we change our scale map so that
+map drawing is done from the center outward with three factors: rotate, scale, translate
+  * rotate - center coordinate [lng,lat]
+  * translate - center pixel [x,y]
+  * scale - zoom level
+window dimensions provide a viewport into the map after it is drawn
+user actions
+  * rotate - spin the globe, or slide the mercator back and forth
+  * zoom - zoom in and out
+  * resize the window - this translates the center pixel, and may optionally change the zoom
+  * startup - do all three: rotate, zoom, resize
+  * restart - maintain settings from localStorage
+the size of the map at zoom level 0
+  * fixed at radius 256 pixels at 96 pixels per inch
+  * based on the window size
-Ways of representing scale
+on resize, we have two options
-scale
+  * keep the zoom constant so the field of view (FOV) changes
-k
+  * change the zoom to keep the field of view constant
-zoom level
+    * in this case, the proportion between window size and zoom level 0 is lost
+    * voyc current, the next user zoom will be wonky because it will reset to the new screen size
+proportion between zoom level and window size is maintained by "k"
+k is the radius of the globe in pixels, and is set to half the window square / pi
+at zoom level zero the full mercator square just fits in the window.  the globe is pi/2 smaller.
-ratio 1/cm on the map : how many cm on the earth's surface
+Ways of representing scale
+  * scale
+  * k
+  * zoom level
+ratio 1cm on the map : how many cm on the earth's surface
 k - number of pixels to display the radius of the globe
-w - width
+https://docs.google.com/spreadsheets/d/1ke6Qn_dxM6pKPYjXO0UKiwGXSUHdPTeeGnZkYoXL9wA/edit#gid=0
-h - height
-at zoom level 0
-        // scale = number of pixels to display the radius of the globe
+realistic distances
-        var halfwid = Math.round(Math.min(w, h) / 2)
+mercator: distance along the equator
-        this.scale = {}
+orthographic: distance at the window centerpoint
-        this.scale.min = halfwid * voyc.defaultScale.minScaleFactor   // small number, zoomed out
-        var maxscale = voyc.geosketch.options.maxscale || voyc.defaultScale.maxScaleFactor
-        this.scale.max = halfwid * maxscale                           // large number, zoomed in
-        this.scale.factor = scalefactor
-        this.scale.now = Math.round(halfwid * scalefactor)
+the orthographic globe
+km earth radius
+km earth diameter
+  1274200000 cm earth diameter
-halfwid - the smaller of width or height, divided by 2
+  arcgis level 0 -> scale 1:591657528
+  1274200000 cm / 591657528 = 2.15
+  ergo, earth diameter displayed in 2.15 cm
+  mercator square displayed in ? cm
-scale
-  min = halfwid * minfactor
-  max = halfwid * maxfactor
-  now = halfwid * scalefactor
-factor
+what determines scale?
-  min
+  * orthographic: k
-  max
+  * equirectangular: ?
-  factor
+  * mercator: pow(2,zlevel)
-voyc.defaultScale = {
-        minScaleFactor: .5,  // small number, zoomed out
-        maxScaleFactor: 6,   // large number, zoomed in
-        scaleStepPct: .14,
-        spinStep: 6,
-}
-| level | pow2 | scale |
+halfwid * factor = k = "scale"
-|     0 |    1 |       |
+only the factor is saved in localStorage
-|     1 |    2 |
+on resize, factor stays the same, scale changes
+factor = scale / 2
-https://docs.google.com/spreadsheets/d/1ke6Qn_dxM6pKPYjXO0UKiwGXSUHdPTeeGnZkYoXL9wA/edit#gid=0
+scale = factor * halfwid
+factor= scale / halfwid
+google
+  zoom level 0 thru 20
-km earth radius
+zoom from whole earth to india
-km earth diameter
+  * voyc: 16 levels
-1274200000 cm earth diameter
+  * google: 3 levels
-:591657528
-.15 earth diameter displayed in 2.15 cm
+voyc k is based on window size
+google zoom level is based on 0 - 20
+scalefactor chosen by user zoom
+k = windowsize / 2 * scalefactor
+pxlPerDgr = k * 4 / 360
+change orthographic and equirectangular to use google zoom level, and make them match up