<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="css/leaflet.css">
        <link rel="stylesheet" href="css/qgis2web.css">
        <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        </style>
        <title></title>
    </head>
    <body>
        <div id="map" style="z-index:1;">
        </div>
        <script src="js/qgis2web_expressions.js"></script>
        <script src="js/leaflet.js"></script>
        <script src="js/leaflet.rotatedMarker.js"></script>
        <script src="js/leaflet.pattern.js"></script>
        <script src="js/leaflet-hash.js"></script>
        <script src="js/Autolinker.min.js"></script>
        <script src="js/rbush.min.js"></script>
        <script src="js/labelgun.min.js"></script>
        <script src="js/labels.js"></script>
        <script src="data/walking_directory_1.js"></script>
        <script>
        var map = L.map('map', {
            zoomControl:true, maxZoom:28, minZoom:1
        }).fitBounds([[51.54991018457816,-5.638779627787206],[52.179328877864066,-4.002357974331203]]);
        var hash = new L.Hash(map);
        map.attributionControl.addAttribution('<a href="https://www.openstreetmap.org" target="_blank">© OpenStreetMap contributors</a>');
        var bounds_group = new L.featureGroup([]);
        function setBounds() {
        }
        var overlay_OpenStreetMap_0 = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            opacity: 1.0
        });
        overlay_OpenStreetMap_0.addTo(map);
        map.addLayer(overlay_OpenStreetMap_0);
        function pop_walking_directory_1(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['html'] !== null ? Autolinker.link(String(feature.properties['html'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_walking_directory_1_0() {
            return {
                pane: 'pane_walking_directory_1',
        rotationAngle: 0.0,
        rotationOrigin: 'center center',
        icon: L.icon({
            iconUrl: 'markers/drawing.svg',
            iconSize: [76.0, 76.0]
        }),
            }
        }
        map.createPane('pane_walking_directory_1');
        map.getPane('pane_walking_directory_1').style.zIndex = 401;
        map.getPane('pane_walking_directory_1').style['mix-blend-mode'] = 'normal';
        var layer_walking_directory_1 = new L.geoJson(json_walking_directory_1, {
            attribution: '<a href=""></a>',
            pane: 'pane_walking_directory_1',
            onEachFeature: pop_walking_directory_1,
            pointToLayer: function (feature, latlng) {
                var context = {
                    feature: feature,
                    variables: {}
                };
                return L.marker(latlng, style_walking_directory_1_0(feature));
            },
        });
        bounds_group.addLayer(layer_walking_directory_1);
        map.addLayer(layer_walking_directory_1);
        setBounds();
        </script>
        </div>
                <div style="position: fixed; left: 100px; top: 20px; background-color: white; opacity:0.6; padding:0px;z-index:2;">
                <h1>Walking Group Directory</h1>
                <h2>&nbsp &nbsp &nbsp Let’s Walk Pembrokeshire</h2>
        </div>
    </body>
</html>