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

<head>
    <meta charset='UTF-8'>
    <title>GeoJson</title>
    <link rel='stylesheet' href='../../iwmlib/lib/3rdparty/highlight/styles/default.css'>
    <link rel='stylesheet' href='../../iwmlib/lib/../css/doctest.css'>
    <script src='../../iwmlib/lib/3rdparty/highlight/highlight.pack.js'></script>
    <script src='../../iwmlib/lib/3rdparty/all.js'></script>
    <script src='../../iwmlib/lib/all.js'></script>
    <script src='../../iwmlib/lib/pixi/all.js'></script>
    <script src="../all.js"></script>

    <style>
        @font-face {
            font-family: "Material Icons";
            font-style: normal;
            font-weight: 400;
            src: url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.eot);
            /* For IE6-8 */
            src: local('Material Icons'),
                local('MaterialIcons-Regular'),
                url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
                url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.woff) format('woff'),
                url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.ttf) format('truetype');
        }

        .inline-showcase {
            display: flex
        }

        .map-example {
            display: inline-block;
            width: 256px;
            margin: 5px;
        }

        table {
            border-radius: 3px;
            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
            color: white;
           
            background: #333;
            padding: 40px;
            margin: 20px auto;
            box-sizing: border-box;
        }


        thead  td {
                border-bottom: 1px solid white;
            }

        td {
            padding: 5px;
        }

        span.implemented {
            content: "";
            color: greenyellow
        }

        span:before {

            font-size: 1.5em;
        }

        span.implemented:before {
            font-family: "Material Icons";
            content: 'check';
            width: 32px;
            height: 32px;
        }

        span.not-implemented {
            color: tomato;
        }

        span.not-implemented:before {
            font-family: "Material Icons";
            content: 'close';
        }
    </style>
</head>

<body onload='Doctest.run()'>
    <h1>GeoJson</h1>
    <p>GeoJson is a standardized format of how to display geometry in a geographical context, using latitude/longitude
        pairs
        to display one (or multiple) Point, Line or Polygon.
    </p>
    <p> This implementation is roughly based on
        <a class="external" href="https://tools.ietf.org/html/rfc7946">RFC7946</a>.
    </p>
    <p>GeoJson objects consist of two objects:
        <ul>
            <li>type: The type of the object. All listed in the table below.</li>
            <li>coordinates: The coordinate point(s)* of which the object is composed.</li>
        </ul>
        The points are an array of exactly two values in the format [longitude, latitude]. Here the implementation
        breaks with the
        standardized format, as multiple point formats can be used for convenience (see
        <a href="#point">Point</a> section).
    </p>
    <table>
        <thead>
            <tr>
                <td>Type</td>
                <td>Implemented</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Point</td>
                <td>
                    <span class="implemented"></span>
                </td>
            </tr>
            <tr>
                <td>Line</td>
                <td>
                    <span class="implemented"></span>
                </td>
            </tr>
            <tr>
                <td>Polygon</td>
                <td>
                    <span class="implemented"></span>
                </td>
            </tr>
            <tr>
                <td>MultiPoint</td>
                <td>
                    <span class="not-implemented"></span>
                </td>
            </tr>
            <tr>
                <td>MultiLine</td>
                <td>
                    <span class="not-implemented"></span>
                </td>
            </tr>
            <tr>
                <td>MultiPolygon</td>
                <td>
                    <span class="implemented"></span>
                </td>
            </tr>
        </tbody>
    </table>

    </ul>
    <canvas id="canv_0"></canvas>
    <script>

        // As map an image of europe is used.
        let europe = "../../../../var/examples/maps/europe/europe.jpg"
        let europeData = new MapData(MERCATOR, {
            clip: {
                min: { x: 32.863294, y: -18.58 },
                max: { x: 57.467973, y: 44.277158 }
            }
        })


        let app = window.app = new MapApp({
            debug: true,
            view: canv_0,
            focus: { x: 46.053113042094864, y: 13.150212801583365 },
            zoom: 0.25,
            width: 880,
            height: 512,
            coordsLogging: true
        })


        // The sprites of image maps should be loaded by the
        // apps resources loader.
        app.loadTextures([europe], (textures) => ready(textures), { resolutionDependent: false })

        window.readyHandler = new EventHandler("onReady")

        function ready(textures) {
            let europeMap = new ImageMap(new PIXI.Sprite(textures.get(europe)), europeData)
            app.setMap("germany", europeMap)
            app.setup().run()

            readyHandler.call()
        }
    </script>
    <h2 id="point">Point</h2>
    <p>Points represent a single point on the map. In the following all valid coordinate types are shown</p>
    <script class="doctest">
        let geoJsonPoint = [
            {
                //Madrid - only valid GeoJson format.
                "type": "Point",
                "coordinates": [-3.701517, 40.417485]
            }, {
                //London - most clean version.
                "type": "Point",
                "coordinates": {
                    "latitude": 51.508271,
                    "longitude": -0.128505
                }
            },
            {
                //Wien - short version.
                "type": "Point",
                "coordinates": {
                    "lat": 48.212156,
                    "lng": 16.377807
                }
            },
            {
                //Athens - PIXI point in form {x: latitude, y: longitude}.
                "type": "Point",
                "coordinates": {
                    "x": 37.971782,
                    "y": 23.726510
                }
            }
        ]

    </script>
    <h2>Line</h2>
    <p>The line can be used to show a path or connection between multiple points.</p>
    <script class="doctest">
        const places = {
            "Madrid": [-3.701517, 40.417485],
            "London": [-0.128505, 51.508271],
            "Wien": [16.377807, 48.212156],
            "Athens": [23.726510, 37.971782],
        }

        let geoJsonLine = {
            "type": "LineString",
            "coordinates": [
                places.Madrid,
                places.London,
                places.Wien,
                places.Athens
            ]
        }

    </script>

    <h2>Polygon</h2>
    <p>Polygons are used to represent shapes. They are an array of two pointarrays. The first represent the shape, the
        optional
        second one a hole that can be cut into the shape.</p>
    <script class="doctest">
        let geoJsonPolygon = {
            "type": "Polygon",
            "coordinates": [
                [
                    [14.220297, 53.948800],
                    [14.098276, 52.869102],
                    [14.792306, 50.835383],
                    [12.267321, 50.160485],
                    [13.864702, 48.732998],
                    [12.957140, 47.509061],
                    [10.222090, 47.331850],
                    [7.615329, 47.578565],
                    [8.240349, 48.981837],
                    [6.431923, 49.474461],
                    [6.521907, 49.810873],
                    [5.998715, 51.837875],
                    [7.012748, 52.396167],
                    [7.294660, 53.673047],
                    [8.979846, 53.896205],
                    [8.644994, 54.895603],
                    [9.917260, 54.808699],
                    [11.042638, 53.970400],
                    [13.226022, 54.471929]
                ],
                [
                    [12.364498326583373, 49.348267001730406],
                    [12.364498326583373, 48.653439624053],
                    [6.8644970015833735, 49.734852799255926,],
                    [6.929973207833399, 50.49886609496484,]
                ]
            ]
        }
    </script>
    <h2>MultiPolygon</h2>
    <p>Multipolygons are an array of polygons.</p>
    <script class="doctest">
        let geoJsonMultiPolygon = {
            "type": "MultiPolygon",
            "coordinates": [
                [
                    [
                        [2.4534564721784875, 39.602018178422234],
                        [3.2148986405775872, 39.944805466067685],
                        [3.589576532964429, 39.73370002861697],
                        [3.1967690651395344, 39.30481714119756],
                        [2.9066958581303197, 39.389861165290846],
                        [2.870436707254214, 39.55963858264072]
                    ]
                ],
                [
                    [
                        [1.4261138640210334, 39.02533795687074],
                        [1.6497119610906168, 39.12020148440332],
                        [1.7645326055317128, 39.02293427288866],
                        [1.5651072757129327, 38.877400666886004],
                        [1.3898547131448993, 38.867887468083474],
                        [1.3838115213322055, 38.972462606739654],
                        [1.456329823084502, 38.9629621453345]
                    ]
                ],
                [
                    [
                        [3.9340384662878307, 40.04714135355371],
                        [3.970297617163993, 39.93948536023678],
                        [4.109291028855864, 39.93011595102749],
                        [4.399364235865022, 39.817583017567095],
                        [4.405407427677716, 39.92543076543482],
                        [4.254327632360457, 40.06584681024191],
                        [3.9642544253512995, 40.06117092743255]
                    ]
                ]
            ]
        }
    </script>
    <h2>Applying GeoJson Objects to the Map</h2>
    <p>The GeoJson data is used to create a
        <a href="./geographics.html" target="_blank">GeoGraphics</a> object.</p>
    <script class="doctest">

        readyHandler.add(() => {

            // For this demo, we bundle all GeoJson types.
            let geographics = [].concat(geoJsonMultiPolygon, geoJsonPolygon, geoJsonLine, geoJsonPoint)

            // We need a geoLayer for the GeoGraphics to live on.
            // (Currently not working with the MapLayer itself. SO: 13-06-2018)
            let geoJsonLayer = new GeoLayer("GeoJson Layer")
            app.mapLayer.place(geoJsonLayer)

            // Add all items individually.
            geographics.forEach(geoJson => {
                const type = geoJson.type
                const geometry = geoJson.coordinates

                console.log(type, geometry)
                // Converts all points to PIXI format.
                let coordinates = GeoJson.validateAndConvert(type, geometry)
                console.log("Converted: ", type, geometry)

                // Use a Utils function to get an appropriate GeoGraphics for every type.
                let graphics = GeoUtils.fromGeoJsonToGeoGraphics(type, coordinates, {
                    //The GeoGraphics shoul
                    onDraw: GeoJson.isLineType(type) ? function () {
                        this.graphics.lineStyle(10, 0x00FFFF)
                    } : function () {


                        this.graphics.beginFill(0xFF0000, 0.8)
                        if (type == "MultiPolygon") {
                            this.graphics.drawCircle(0, 0, 200)
                        } else if (type == "Point") {
                            this.graphics.drawCircle(0, 0, 50)
                        }
                        this.graphics.beginFill(0x00FF00)
                    }
                })

                // Finally place the GeoGraphics element.
                geoJsonLayer.place(graphics)
            })

            geoJsonLayer.adapt()
        })
    </script>
</body>

</html>