visualization_template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>tpov Match Visualization</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/leaflet/leaflet.css" />
    <script src="assets/leaflet/leaflet.js"></script>
    <style>
        html, body {
            margin: 0px;
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
        }
        #map {
            flex: 1;
        }
    </style>
</head>
<body>
    <noscript><p>JavaScript is required to use this website.</p></noscript>
    <div id="map"></div>
    <script>
        var polyline = L.polyline (%points);
        var map = L.map ("map").fitBounds (polyline.getBounds ());
        L.tileLayer ("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "&copy; <a href = 'https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors",
            maxZoom: 19,
        }).addTo (map);
        var markers = %markers;
        polyline.addTo (map);
        for (var i = 0; i < markers.length; i++) {
            var marker = markers [i];
            L.marker ([marker.lat, marker.lon]).addTo (map).bindPopup (marker.text);
        }
    </script>
</body>
</html>