<!doctype html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <title>GeoGraphics</title>

    <link rel='stylesheet' href='../../3rdparty/highlight/styles/default.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>
        .inline-showcase {
            display: flex
        }

        .map-example {
            display: inline-block;
            width: 256px;
            margin: 5px;
        }
    </style>
</head>

<script>
    let capitals = {
        abidjan: { x: 5.349470, y: -4.006472 },
        berlin: { x: 52.525430, y: 13.385291 },
        canberra: { x: -35.282025, y: 149.128648 },
        capetown: { x: -33.925448, y: 18.416962 },
        moscow: { x: 55.750892, y: 37.622799 },
        washington: { x: 38.895650, y: -77.031407 },
        rio: { x: -22.871400, y: -43.280490 },
        tokio: { x: 35.696278, y: 139.731366 }
    }

    window.apps = [

    ]

    function createApp(view) {
        let app = new MapApp({
            view,
            focus: { x: 0, y: 0 },
            zoom: 1,
            width: 512,
            height: 512,
            coordsLogging: true
        })

        const osmworld = "../assets/maps/osm/0/0/0.png"
        const wikimedia = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"



        return new Promise((resolve, reject) => {
            setTimeout(() => {
                reject("Creating app timed out.")
            }, 3000)

            app.loadSprites([
                osmworld,
                wikimedia
            ], (sprites) => {

                let osmMap = new ImageMap(sprites.get(osmworld), new MapData(new Projection.Mercator()), { cover: false })

                let wikimediaMap = new ImageMap(sprites.get(wikimedia), new MapData(new Projection.Robinson(10)), {
                    baseZoomHeight: sprites.get(osmworld).texture.height,
                    cover: false
                })

                app.addMaps({
                    "osm": osmMap, "wiki": wikimediaMap
                })
                app.selectMap("osm")
                app.setup().run()
                window.apps.push(app)
                resolve(app)
            }, { resolutionDependent: false })

        })
    }

    function enableSwitch(button, app) {
        button.addEventListener("click", () => {
            let next = app.mapList.next()
            console.log(app.mapList)
            app.selectMap(next)
        })
    }

</script>

<body onload='Doctest.run()'>
    <h1>GeoGraphics</h1>
    <p> GeoGraphics are graphical objects, that does not store the graphics information
        in screen space, but in geographical coordinates. Therefore GeoGraphics must be
        placed on GeoLayers to work properly. </p>
    <p><i>
            Note: As GeoLayers are always children of a map layer. When the map is changed
            all GeoLayers are notified via the 'adaptTo(map)' method.</i></p>
    <p>
        The geolayers forward this 'adaptTo' to all children that are GeoGraphics.
        Which adjust their so called 'point' data to the new map.</p>
    </ul>

    <nav>
        <ul>
            <li><a href="#geopoint">Gep Point</a></li>
            <li><a href="#geoline">Geo Line</a></li>
            <li><a href="#geoshape">Geo Shape</a></li>
        </ul>
    </nav>
    <!--GeoPoint -->
    <section id="geopoint">
        <h2>GeoPoint</h2>
        <p>GeoPoint is a single coordinate in the map.</p>
        <canvas id="geopoint_canvas"></canvas>
        <div class=" controls">
            <button id="geopoint_switch">Change Map</button>
        </div>


        <script class="doctest">

            ; (function () {
                createApp(geopoint_canvas).then(app => {

                    let capitalContainer = new PIXI.Container()
                    let capitalLayer = new GeoLayer(capitalContainer)
                    for (key in capitals) {
                        let capitalPoint = new GeoPoint(capitals[key], {

                            /**
                             * To style GeoGraphics, the fill has to be set in the
                             * onDraw callback.
                             * 
                             * Note: GeoPoints are the only GeoGraphic with no
                             * initial geometry attached. These have to be drawn to
                             * the graphics object manually.
                             */
                            onDraw: function () {
                                this.graphics.beginFill(0xFF0000)
                                this.graphics.drawCircle(0, 0, 5)
                                this.graphics.endFill()
                            }
                        })
                        capitalContainer.addChild(capitalPoint)
                    }

                    enableSwitch(geopoint_switch, app)

                    // app.mapLayer.place(capitalLayer)

                    app.mapLayer.addLayer(capitalLayer)
                }).catch(console.error)
            })()

        </script>
    </section>
    <!-- <section id="geoline">
        <h2>GeoLine</h2>
        <p>Geo line is a set of points, that are rendered as a line and can be updated individually.</p>
        <canvas id="geoline_canvas"></canvas>
        <div class="controls">
            <button id="geoline_switch">Change Map</button>
            <label>closed
                <input type="checkbox" id="geoline_close_toggle">
            </label>
        </div>
        <script class="doctest">

                ; (function () {
                    createApp(geoline_canvas).then(app => {
                        let overlay = new GeoLayer()

                        //// You can initialize the GeoLine with a set of coordinates.
                        let newYorkRooseveltAirField = { x: 40.738473, y: -73.613131 }
                        let aeroport_de_Paris_le_bourget = { x: 48.960373, y: 2.436891 }

                        // Instantiate the geo line.
                        let lindberghTransatlanticFlight = new GeoLine([
                            newYorkRooseveltAirField,
                            aeroport_de_Paris_le_bourget
                        ], {
                            // Define how the line should be drawn.
                            // Note: This is called everytime the GeoGraphic
                            // has to adapt.
                            onDraw: function () {
                                this.graphics.lineStyle(3, 0xf8baea)
                            }
                        })

                        // Just place it on a GeoLayer.
                        overlay.place(lindberghTransatlanticFlight)


                        // Another option is to add points with the *addPoint()* method.
                        // This is useful for dynamic lines.
                        let geoline = new GeoLine([], {
                            onDraw: function () {
                                this.graphics.lineStyle(3, 0x00cc54, 0.5)
                            }
                        })
                        overlay.place(geoline)
                        for (let [name, coordinates] of Object.entries(capitals)) {
                            geoline.addPoint(coordinates)
                        }

                        // Don't forget to add the geolayer to the maplayer.
                        app.mapLayer.place(overlay)

                        enableSwitch(geoline_switch, app)

                        geoline_close_toggle.addEventListener("input", () => {

                            geoline.closed = geoline_close_toggle.checked
                        })

                    }).catch(console.error)
                })()



        </script>
    </section>

    <section id="geoshape">

        <h2>Geoshape</h2>
        <p>GeoGraphics represent Polygons, that are drawn on a map. If the map change, the graphic adapts to the new map
            and represents
            the same geographical shape.</p>
        <div class="inline-showcase">
            <div class="map-example">
                <canvas id="geoshape_canvas"></canvas>
            </div>
        </div>
        <button id="geoshape_switch">Change Map</button>

        <script class='doctest'>


                (function () {
                    createApp(geoshape_canvas).then((app) => {

                        let triangle = [
                            [capitals.berlin,
                            capitals.moscow,
                            capitals.tokio,
                            capitals.canberra,
                            capitals.capetown]
                        ]

                        let countryLayer = new GeoLayer({ name: "Country Layer" })


                        let shape = new GeoShape(triangle, {
                            onDraw: function () {
                                this.graphics.beginFill(0xFF0000)
                            }
                        })

                        /**
                         * The following click handler should trigger when either the
                         * shape or a hole is clicked. This is the default and intended
                         * behaviour, as holes are considered to be contained by the 
                         * desired geometry and should not interefere with any userinteraction.
                         */
                        shape.graphics.interactive = true
                        shape.graphics.on("pointerdown", () => {
                            app.showNotification("Shape was clicked!")
                        })

                        countryLayer.place(shape)
                        app.mapLayer.place(countryLayer)

                        enableSwitch(geoshape_switch, app)



                    }).catch(console.error)
                })()

        </script>
    </section>-->
</body>

</html>