Ongoing cleanup and refactoring of maps.

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>