<html>
    <head>
        <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
            integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
            crossorigin=""
        />
        <script
            src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""
        ></script>
        <script type="text/javascript" src="https://unpkg.com/leaflet.vectorgrid@1.2.0"></script>
    </head>
    <body>
        <div id="mapid" style="width: 1800px; height: 1000px; background:#aad3df"></div>
        <script>
            const mymap = L.map("mapid").setView({{map_view}});

            function getHospitals(){
                const onEachFeature = (feature, layer) => {
                    layer.bindPopup(`<b>${feature.properties.name}</b> ${feature.properties.osm_type}`);
                }
                const layer = fetch("{% url 'djangostreetmap:hospitals' %}")
                    .then(response => response.json())
                    .then(data => L.geoJSON(data, {onEachFeature:onEachFeature}))
                return layer
            }
            function getAeroways(){
                const onEachFeature = (feature, layer) => {
                    layer.bindPopup(`<b>${feature.properties.name}</b> ${feature.properties.osm_type}`);
                }
                const layer = fetch("{% url 'djangostreetmap:aeroways' %}")
                    .then(response => response.json())
                    .then(data => L.geoJSON(data, {onEachFeature:onEachFeature}))
                return layer
            }

            function getOsm(){
                const osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
                const osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';

                // Layer
                return new L.TileLayer(osmUrl, {
                    minZoom: 4,
                    maxZoom: 20,
                    attribution: osmAttrib
                });
            }

            /* Add an openlayers */

            // Data provider


            const building_opts = {
                // interactive: true,
                vectorTileLayerStyles: {
                    buildings: {weight: 0.5, color: "gray"},
                }
            }

            const road_opts = {
                // interactive: true,
                vectorTileLayerStyles: {
                    trunk: {weight: 2, color: "red"},
                    roads: {weight: 2, color: "red"},
                    secondary: function(properties, zoom){
                        const c = '#f7fabf';
                        if (zoom < 6){ return {weight: 1, color: c} };
                        if (zoom < 10){ return {weight: 3, color: c} };
                        return {weight: 5, color: c}
                    },
                    trunk_link: {weight: 2, color: "red"},
                    tertiary: function(properties, zoom){
                        const c = '#ffffff';
                        if (zoom < 6){ return {weight: 1, color: c} };
                        if (zoom < 10){ return {weight: 2, color: c} };
                        return {weight: 3, color: c}
                    },
                    secondary_link: function(properties, zoom){
                        const c = '#f7fabf';
                        if (zoom < 6){ return {weight: 1, color: c} };
                        if (zoom < 10){ return {weight: 2, color: c} };
                        return {weight: 4, color: c}
                    },
                    tertiary_link: function(properties, zoom){
                        const c = '#ffffff';
                        if (zoom < 6){ return {weight: 1, color: c} };
                        if (zoom < 10){ return {weight: 3, color: c} };
                        return {weight: 5, color: c}
                    },
                    primary: function(properties, zoom){
                        const c = '#fcd6a4';
                        if (zoom < 6){ return {weight: 1, color: c} };
                        if (zoom < 10){ return {weight: 3, color: c} };
                        return {weight: 5, color: c}
                    },
                    residential: {weight: 1, color: "ffffff"},
                    primary_link: function(properties, zoom){
                        const c = '#fcd6a4';
                        if (zoom < 6){ return {weight: 1, color: c} };
                        if (zoom < 10){ return {weight: 3, color: c} };
                        return {weight: 5, color: c}
                    },
                    track: {weight: 1, color: "white"},
                    service: {weight: 1, color: "white"},
                    unclassified: {weight: 1, color: "white"},
                    path: {weight: 0.5, color: "white"},
                }
            }

            const opts = {
                interactive: true,
                vectorTileLayerStyles: {
                    admin_boundary: {
                        weight: 2,
                        color: "#cdbcc9",
                        fillColor: "#f2efe9",
                        fillOpacity: 1,
                        fill: true
                    },
                    islands: {
                        weight: 1,
                        color: "#cdbcc9",
                        fillColor: "#f2efe9",
                        fillOpacity: 1,
                        fill: true
                    }
                }
            };
            // const islands = L.vectorGrid.protobuf("{% url 'djangostreetmap:islands' %}{z}/{x}/{y}.pbf", opts).on("mouseover", function (e) {
            //         L.popup()
            //             .setContent(e.layer.properties.name || e.layer.properties.type)
            //             .setLatLng(e.latlng)
            //             .openOn(mymap);
            //         L.DomEvent.stop(e);
            //     }).addTo(mymap);

            // const adm = L.vectorGrid
            //     .protobuf("{% url 'djangostreetmap:admin' %}{z}/{x}/{y}.pbf", opts)
            //     .on("mouseover", function (e) {
            //         L.popup()
            //             .setContent(e.layer.properties.name || e.layer.properties.type)
            //             .setLatLng(e.latlng)
            //             .openOn(mymap);
            //         L.DomEvent.stop(e);
            //     })
            //     .addTo(mymap);

            // const highways = L.vectorGrid
            //     .protobuf("{% url 'djangostreetmap:highways' %}{z}/{x}/{y}.pbf", road_opts)
            //     .on("mouseover", function (e) {
            //         L.popup()
            //             .setContent(`Name: ${e.layer.properties.name}, type: ${e.layer.properties.highway}`)
            //             .setLatLng(e.latlng)
            //             .openOn(mymap);
            //         L.DomEvent.stop(e);
            //     })
            //     .addTo(mymap);

                const buildings = L.vectorGrid
                .protobuf("{% url 'djangostreetmap:buildings' %}{z}/{x}/{y}.pbf", building_opts)
                .on("mouseover", function (e) {
                    L.popup()
                        .setContent(`Name: ${e.layer.properties.name}, type: ${e.layer.properties.highway}`)
                        .setLatLng(e.latlng)
                        .openOn(mymap);
                    L.DomEvent.stop(e);
                })
                .addTo(mymap);


                const roads = L.vectorGrid
                .protobuf("{% url 'djangostreetmap:roads' %}{z}/{x}/{y}.pbf", road_opts)
                .on("mouseover", function (e) {
                    L.popup()
                        .setContent(`Name: ${e.layer.properties.name}, type: ${e.layer.properties.osm_type}`)
                        .setLatLng(e.latlng)
                        .openOn(mymap);
                    L.DomEvent.stop(e);
                })
                .addTo(mymap);

                baseMaps = {}

                const control = L.control.layers();
                control.addTo(mymap);
                const osmLayer = getOsm();
                osmLayer.addTo(mymap);
                control.addOverlay(osmLayer, 'OpenStreetMap');
                getHospitals().then((l) => {l.addTo(mymap); control.addOverlay(l, 'hospitals')} )
                getAeroways().then((l) => {l.addTo(mymap); control.addOverlay(l, 'aeroways')} )
        </script>
    </body>
</html>
