Ongoing cleanup and refactoring of maps.

2019-11-25 18:04:11 +01:00
parent 88048f14ec
commit 5305561619
16 changed files with 462 additions and 158 deletions
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en" class="dark-mode">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Map</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>Map</h1>
+    <p>
+        The Map class shows a geographical map using a scatter element.
+    </p>
+
+    <h2 id="DeepZoomMap">DeepZoomMap</h2>
+    <p>Usually a DeepZoomMap will be used to display maps. It uses a <a
+            href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending on
+        the zoom factor.</p>
+    <canvas id="deepZoomCanvas">
+
+    </canvas>
+    <script>
+        
+
+    </script>
+    <script class="doctest" data-collapsible data-collapsed data-title="Script">
+
+
+        (function () {
+
+            // Create the mapapp.
+            let app = window.DeepZoomMapApp = new MapApp({
+                view: deepZoomCanvas,
+                coordsLogging: true,
+                width: 512,
+                height: 512
+            })
+
+
+            // Load or specify a tilesConfig as required by the DeepZoomImage.
+            const tilesConfig = {
+                "tileSize": 256,
+                "format": "png",
+                "overlap": 0,
+                "type": "map",
+                "height": 1024,
+                "width": 1024,
+                "path": "../assets/maps/osm",
+                "urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
+            }
+
+
+            // Create a projection.
+            const projection = new Projection.Mercator()
+
+            // Create a map data object.
+            const osmDeepZoomMapData = new DeepZoomMapData(projection, tilesConfig, { app })
+
+            // Create the map
+            const osmMap = new DeepZoomMap(osmDeepZoomMapData, tilesConfig)
+
+            // Add the map to the app.
+            app.addMap("osm", osmMap)
+
+            // Run the app when at least one map is set.
+            app.setup().run()
+        })()
+    </script>
+
+    <h2 id="imageMap">ImageMap</h2>
+    <p>Single images can be also used as maps. This can be useful for examples, debugging purposes or other use-cases
+        when there are no different tiles required or available.</p>
+    <canvas id="imageMapCanvas">
+
+    </canvas>
+    <script>
+    </script>
+    <script class="doctest" data-collapsible data-collapsed data-title="Script">
+
+
+            (function () {
+
+                // Create the mapapp.
+                let app = window.ImageMapApp = new MapApp({
+                    view: imageMapCanvas,
+                    coordsLogging: true,
+                    width: 512,
+                    height: 512
+                })
+
+                const mapTexture = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
+
+
+
+
+                // The images used by the image map need to be loaded beforehand.
+                // Therefore this loading step is required.
+                app.loadSprites([mapTexture], sprites => spritesLoaded(sprites), {
+                    resolutionDependent: false
+                })
+
+                spritesLoaded = (sprites) => {
+
+                    // Create a projection.
+                    const projection = new Projection.Robinson(10)
+
+                    // Create a map data object.
+                    let mapData = new MapData(projection)
+
+                    // Create the map
+                    let imageMap = new ImageMap(sprites.get(mapTexture), mapData)
+
+
+                    // Add the map to the app.
+                    app.addMap("europe", imageMap)
+
+
+                    // Run the app when at least one map is set.
+                    app.setup().run()
+                }
+
+
+
+            })()
+    </script>
+</body>
+
+</html>