<!DOCTYPE html>
<html>
<head>
    <title>$title</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
          integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
          crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
            integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
            crossorigin=""></script>
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css'
          rel='stylesheet'/>
    <style>
        body {
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }

        #map {
            width: 75%;
            height: 700px;
            float: left;
            border: 1px dotted black;
            padding: 10px;
        }

        #legend {
            width: 20%;
            padding-left: 1em;
            float: left;
            margin-bottom: 1em;
        }

        table.legend {
            border: 1px dotted black;
            border-radius: 10px;
            padding: 10px;
        }

        hr {
            color: #666;
        }

        .leaflet-tooltip {
            padding: 1px 3px 1px 3px;
            opacity: 70% !important;
        }

        $css
    </style>
</head>
<body>
<h1>$title</h1>
<div id='map'></div>
<div id="legend">
    $legend
</div>
<script type="text/javascript">
    var geojson = $geojson;
    var options = $options;
    var layers = [L.tileLayer($tile_url, $tile_options)];
    var layer_groups = {};
    var markers = [];

    function onEachFeature(feature, layer) {
        var values = feature.properties.values.split(' / ');
        var html = "<h3>" + feature.properties.name + "</h3><dl>";
        html += '<p>' + feature.properties.values + '</p>';
        layer.bindPopup(html);
        layer.bindTooltip(feature.properties.tooltip, {className: feature.properties.tooltip_class});
        markers.push(layer);
        if (options.with_layers) {
            for (let i = 0; i < values.length; i++) {
                if (layer_groups.hasOwnProperty(values[i])) {
                    layer_groups[values[i]].addLayer(layer);
                } else {
                    layer_groups[values[i]] = L.layerGroup([layer]);
                    layers.push(layer_groups[values[i]]);
                }
            }
        } else if (options.with_layers_for_combinations) {
            values = feature.properties.values;
            if (layer_groups.hasOwnProperty(values)) {
                layer_groups[values].addLayer(layer);
            } else {
                layer_groups[values] = L.layerGroup([layer]);
                layers.push(layer_groups[values]);
            }
        }
    }

    L.geoJSON([geojson], {
        onEachFeature: onEachFeature,
        pointToLayer: function (feature, latlng) {
            return L.marker(
                latlng,
                {
                    icon: L.icon({
                        iconUrl: feature.properties.icon,
                        iconSize: [feature.properties.markersize, feature.properties.markersize]
                    })
                })
        }
    });

    map = L.map('map', {layers: layers, fullscreenControl: true}).setView([5, 160], 2);
    if (options.with_layers || options.with_layers_for_combinations) {
        L.control.layers({}, layer_groups, {collapsed: false, sortLayers: true}).addTo(map);
    } else {
        L.layerGroup(markers).addTo(map);
    }
    var group = new L.featureGroup(markers);
    map.fitBounds(group.getBounds());

    if (options.language_labels) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].openTooltip();
        }
    }
</script>
</body>
</html>
