Ongoing cleanup and refactoring of maps.

lib/pixi/maps/mapdata.html

@@ -145,7 +145,7 @@
     <script>
         printCoordinates(map_image_1, germany, map_coords_1)
     </script>
-    <h2>Clipped And Translated Map</h2>
+    <h2>Translated Map</h2>
     <p>Maps can be also translated, if the whole world is shown and clipping is not an option.</p>
     <p>Coordinates:
         <strong id="map_coords_2"></strong>
@@ -160,7 +160,7 @@
 
 
         // Fake offset by using the old mapdata.
-        let translation = squared_world.toPixel({ x: 0, y: -140 })
+        let translation = squared_world.toPixel({ x: 90-10, y: -140 })
         console.log(translation)
 
 
@@ -168,7 +168,7 @@
         // And also translated in hoizontal direction.
         // The translate option corrects that.
         let translated_world = new MapData(new Projection.Mercator(), {
-            translate: { x: 0, y: 40 },
+            translate: { x: -10, y: 40 },
 
         })
 
@@ -180,7 +180,7 @@
             height: size + "px",
             backgroundImage: "url(../assets/maps/osm/0/0/0.png)",
             backgroundColor: "red",
-            backgroundPosition: translation.x * size + "px 0"
+            backgroundPosition: translation.x * size + "px " +translation.y * size + "px"
         })
 
         //Same as above
@@ -191,7 +191,9 @@
     </script>
     <script>
         map_image_2.addEventListener("mousemove", (event) => {
-            let coords = translated_world.toCoordinates({ x: event.offsetX / event.target.width, y: event.offsetY / event.target.height })
+            let map = map_image_2
+            console.log(event.offsetX / map.width)
+            let coords = translated_world.toCoordinates({ x: event.offsetX / map.offsetWidth, y: event.offsetY / map.offsetHeight })
             map_coords_2.innerHTML = "Lat: " + coords.x.toFixed(4) + " Lng: " + coords.y.toFixed(4)
         })
     </script>