<!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>