Fixed map doctest.

2019-11-11 12:34:43 +01:00
parent ef16f2b12b
commit 58cbd44a7b
7 changed files with 394 additions and 330 deletions
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark-mode">

 <head>
    <meta charset="UTF-8" />
    <title>MapApp</title>

-    <link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
+    <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>
@@ -28,8 +31,41 @@
        for an easier handling of maps in the canvas.
    </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 },
@@ -81,12 +117,33 @@
                cover: false
            })

+            let testMapData = new DeepZoomMapData(new Projection.Mercator(), testConfig.tiles, {
+                app
+            })
+            let testMap = new DeepZoomMap(testMapData, Object.assign({}, testConfig.tiles, { app }), { cover: false })
+            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: false })
+            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)) {