Renamed 'MapView' to 'MapViewport'. Added documentation to the maps module.

2019-12-09 18:15:28 +01:00
parent 60e28f8fe5
commit 65fac2f406
16 changed files with 638 additions and 151 deletions
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en" class="dark-mode">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>MapViewport</title>
+
+    <script src="../../3rdparty/highlight/highlight.pack.js"></script>
+
+    <link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css">
+    <link rel='stylesheet' href='../../3rdparty/highlight/styles/vs2015.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>MapViewport</h1>
+    <p>
+        The MapViewport works under the hood of a map layer to track the informations about the current focus point and
+        zoom position.
+        This is important to maintain the same view when maps are changed.
+    </p>
+    <canvas id="canvas"></canvas>
+    <div id="mapControl"></div>
+    <div id="cityControl" class="controls"></div>
+    <p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
+    <script>
+        let osmConfig = {
+            "projection": "mercator",
+            "type": "deepzoom",
+            "tiles": {
+                "tileSize": 256,
+                "format": "png",
+                "overlap": 0,
+                "type": "map",
+                "height": 1024,
+                "width": 1024,
+                "path": "../assets/maps/osm",
+                "urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
+            }
+        }
+
+        let testConfig = {
+            "projection": "mercator",
+            "type": "deepzoom",
+            "tiles": {
+                "tileSize": 128,
+                "format": "jpg",
+                "overlap": 0,
+                "type": "map",
+                "height": 4096,
+                "width": 4096,
+                "path": "../assets/maps/test",
+                "urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
+            }
+        }
+
+    </script>
+    <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) {
+
+            const cover = true
+
+            // When resources are loaded, the ImageMap can be instantiated.
+            let imageMap = new ImageMap(sprites.get(europe), europeData, {
+                coordsLogging: true,
+                maxScale: 1,
+                cover
+            })
+
+            let testMapData = new DeepZoomMapData(new Projection.Mercator(), testConfig.tiles, {
+                app
+            })
+            let testMap = new DeepZoomMap(testMapData, Object.assign({}, testConfig.tiles, { app }), { cover })
+            app.addMap("test", testMap)
+
+            let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles, {
+                app
+            })
+            let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app }), { cover })
+            app.addMap("osm", deepZoomMap)
+
+            // Finally apply the map to the MapApp
+            app.setMap('europe', imageMap)
+
+            // 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(app.mapList.maps)) {
+                let mapBtn = document.createElement("button")
+                mapBtn.innerText = key
+                mapBtn.addEventListener("click", () => {
+                    app.mapLayer.changeMap(val)
+                })
+                mapControl.appendChild(mapBtn)
+            }
+        }
+
+        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>