<!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 osmDeepZoomMapProjection = new DeepZoomMapProjection(projection, tilesConfig, { app }) // Create the map const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, 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 mapProjection = new MapProjection(projection) // Create the map let imageMap = new ImageMap(sprites.get(mapTexture), mapProjection) // 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>