Differences

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

--- projects:voyc:zoom_level [2023/02/17 12:43] – [k] jhagstrand
+++ projects:voyc:zoom_level [2023/02/23 18:01] (current) – [Zoom and Scale] jhagstrand
@@ Line 1: / Line 1: @@
 [[projects]]:[[voyc]]
-====== Zoom Level ======
+====== 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)$$
 | level | pow2 | scale |
@@ Line 47: / Line 81: @@
 ==== Resize ====
-on window resize
+what to do on window resize?  two choices:
+  * keep map scale constant, ala Google Maps
+  * keep zoom level constant, ala Google Earth and voyc
-Google
+field of view (FOV) follows the zoom level
-keep center and scale constant
-field of view falls where it may
-Voyc
+scale determines the level of detail possible
-keep center and field of view constant
-scale slides along with halfwid
+When you enlarge the window, you could show a wider area, or show more detail.
-We start with the window size.  Do we really?
+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
-What does the user expect when he changes the size of his window?
+window dimensions provide a viewport into the map after it is drawn
-User can change the size of his window.  Do we change our scale map so that
+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
+on resize, we have two options
+  * keep the zoom constant so the field of view (FOV) changes
+  * change the zoom to keep the field of view constant
+    * 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"
-Ways of representing scale
+k is the radius of the globe in pixels, and is set to half the window square / pi
-scale
-k
-zoom level
+at zoom level zero the full mercator square just fits in the window.  the globe is pi/2 smaller.
+Ways of representing scale
+  * scale
+  * k
+  * zoom level
-ratio 1/cm on the map : how many cm on the earth's surface
+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
-h - height
-at zoom level 0
-        // scale = number of pixels to display the radius of the globe
-        var halfwid = Math.round(Math.min(w, h) / 2)
-        this.scale = {}
-        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)
-halfwid - the smaller of width or height, divided by 2
-scale
-  min = halfwid * minfactor
-  max = halfwid * maxfactor
-  now = halfwid * scalefactor
-factor
-  min
-  max
-  factor
-voyc.defaultScale = {
-        minScaleFactor: .5,  // small number, zoomed out
-        maxScaleFactor: 6,   // large number, zoomed in
-        scaleStepPct: .14,
-        spinStep: 6,
-}
-| level | pow2 | scale |
-|     0 |    1 |       |
-|     1 |    2 |
 https://docs.google.com/spreadsheets/d/1ke6Qn_dxM6pKPYjXO0UKiwGXSUHdPTeeGnZkYoXL9wA/edit#gid=0
@@ Line 166: / Line 178: @@
 change orthographic and equirectangular to use google zoom level, and make them match up
-on resize
-keep the ctrCo
-change the ctrPt
-keep the zoom
-change the fov
-on zoom
-change the zoom
-keep the ctrCo
-keep the ctrPt
-keep the fov