Ongoing cleanup and refactoring of maps.

lib/pixi/maps/projections/projection.js

@@ -26,7 +26,7 @@ export default class Projection {
      * @memberof Projection
      */
     backward(point) {
-        console.error('You must override the backward fuction in ' + this.name + '.')
+        console.error('You must override the backward function in ' + this.name + '.')
     }
 
     toString() {
@@ -38,6 +38,6 @@ export default class Projection {
     }
 
     get maxViewport() {
-        return { min: new PIXI.Point(-90, -180), max: new PIXI.Point(90, 180) }
+        return { min: new PIXI.Point(0, 0), max: new PIXI.Point(1, 1) }
     }
 }

lib/pixi/maps/projections/projections.html

@@ -92,6 +92,10 @@
         </div>
 
         <script>
+
+
+            window.examples = []
+
             let boundaries = [
                 { x: -90, y: -180 },
                 { x: 90, y: 180 },
@@ -247,6 +251,8 @@
 
                         let point = createPointAtPoisition(relativePosition)
                         mercatorMap.appendChild(point)
+
+                        window.examples.push({ map: mercatorMap, projection: mercatorProjection })
                     }
 
                 })()
@@ -317,14 +323,53 @@
                         let relativePosition = robinsonProjection.forward(position)
 
                         // Run Test Cases
-                        Doctest.expectPointPrecision(robinsonTruth[key], relativePosition,0)
+                        Doctest.expectPointPrecision(robinsonTruth[key], relativePosition, 0)
 
                         let point = createPointAtPoisition(relativePosition)
                         robinsonMap.appendChild(point)
                     }
+
+                    window.examples.push({ projection: robinsonProjection, map: robinsonMap })
                 })()
         </script>
     </section>
+
+    <script>
+
+            // Put it in a self executing anonymous function to not pollute the window element.
+            (function () {
+                window.examples.forEach(({ map, projection }) => {
+                    let display = document.createElement("p")
+                    Object.assign(display.style, {
+                        position: "absolute",
+                        left: 0,
+                        top: 0
+                    })
+                    map.parentNode.appendChild(display)
+
+                    Object.assign(map.parentNode.style, {
+                        position: "relative"
+                    })
+                    display.innerText = "Hover over Map to display coordinates."
+
+                    map.addEventListener("mousemove", (event) => {
+                        let mousePosition = { x: event.offsetX, y: event.offsetY }
+
+                        let normalizedPosition = {
+                            x: mousePosition.x / map.offsetWidth,
+                            y: mousePosition.y / map.offsetHeight
+                        }
+
+                        let coordinates = projection.backward(normalizedPosition)
+
+                        display.innerHTML = `<b>lat:</b> ${coordinates.x.toFixed(3)} <br><b>lng:</b> ${coordinates.y.toFixed(3)}`
+                    })
+                })
+
+            })()
+
+
+    </script>
 </body>
 
 </html>

lib/pixi/maps/projections/robinson.js

@@ -117,8 +117,8 @@ export default class Robinson extends Projection {
 
     _adjustLng(lng, inv = false) {
         let moved = inv ? lng + this.lng0 : lng - this.lng0
-        if (moved < -180) moved += 360
-        if (moved > 180) moved -= 360
+        // if (moved < -180) moved += 360
+        // if (moved > 180) moved -= 360
 
         return moved
     }
@@ -139,10 +139,18 @@ export default class Robinson extends Projection {
         return { low: minIndex, high: maxIndex, ratio, sign }
     }
 
-    toString() {
-        return
-    }
     get name() {
         return 'Robinson Projection'
     }
+
+    get maxViewport() {
+        let min = new PIXI.Point(-90, -180)
+        let max = new PIXI.Point(90, 180)
+
+        max.x += this.lng0
+        min.x += this.lng0
+
+        console.log({ min, max })
+        return { min, max }
+    }
 }