Added the maps-module to the iwmlib.

Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
parent e2ea89cc0b
commit 86b23f4e6f
121 changed files with 12779 additions and 40 deletions
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>MapApp</title>
+
+    <link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
+    <link rel='stylesheet' href='../../../css/doctest.css'>
+
+    <script src="../../../dist/iwmlib.3rdparty.js"></script>
+    <script src="../../../dist/iwmlib.js"></script>
+    <script src="../../../dist/iwmlib.pixi.js"></script>
+
+
+    <style>
+        .controls {
+            display: flex;
+        }
+    </style>
+</head>
+
+<body onload="Doctest.run()">
+    <h1>MapApp</h1>
+    <p>
+        This class extends the PIXIApp to simplify the process of rendering
+        Maps in the canvas. For that reason, it contains useful functions
+        for an easier handling of maps in the canvas.
+    </p>
+    <canvas id="canvas"></canvas>
+    <div id="cityControl" class="controls"></div>
+    <p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
+    <script class="doctest">
+        let capitals = {
+            london: { x: 51.5, y: -0.083333 },
+            rome: { x: 41.9, y: 12.483333 },
+            madrid: { x: 40.4, y: -3.683333 },
+            paris: { x: 48.833986, y: 2.346989 }
+        }
+
+        // You may define a focus point ...
+        let focus = capitals.paris
+
+        // ... and a zoom level.
+        let zoom = 1
+
+        // Name has to be app (like all other PIXIApps).
+        const app = (window.app = new MapApp({
+            focus,
+            zoom,
+            view: canvas,
+            coordsLogging: true,
+            width: 512,
+            height: 512
+        }))
+
+        // As map an image of europe is used.
+        let europe = '../assets/maps/pixabay/europe.jpg'
+
+        //Preload all required sprites for the image map.
+        app.loadSprites([europe], sprites => ready(sprites), {
+            resolutionDependent: false
+        })
+
+        // The mapdata object contains informations,
+        // how the displayed map has to be interpreted.
+        // e.g. which projection is used or how the
+        // image is clipped.
+        let europeData = new MapData(new Projection.Mercator(), {
+            clip: {
+                min: { x: 32.863294, y: -18.58 },
+                max: { x: 57.467973, y: 44.277158 }
+            }
+        })
+
+        function ready(sprites) {
+            // When resources are loaded, the ImageMap can be instantiated.
+            let imageMap = new ImageMap(sprites.get(europe), europeData, {
+                coordsLogging: true,
+                maxScale: 1,
+                cover: false
+            })
+
+            // Finally apply the map to the MapApp
+            app.setMap('europe', imageMap)
+            console.error("IMAGE MAP SET!")
+
+
+            // The app requires a map before beeing able to run.
+            // So start the app here.
+            app.setup().run()
+        }
+
+        for (let [key, val] of Object.entries(capitals)) {
+            let cityBtn = document.createElement("button")
+            cityBtn.innerText = key
+            cityBtn.addEventListener("click", () => {
+                app.mapLayer.map.moveTo(val)
+            })
+            cityControl.appendChild(cityBtn)
+        }
+    </script>
+</body>
+
+</html>