Differences

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

--- projects:voyc:zoom_level [2023/02/14 03:03] – 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 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
-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 163: / Line 178: @@
 change orthographic and equirectangular to use google zoom level, and make them match up