<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ .Query }} - Ocásek</title> <link rel="stylesheet" href="/static/css/style.css"> <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" /> <style> body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; } #map { height: 100%; width: 100%; } .no-decoration { padding: 1px; border-radius: 5px; left: 20px; } /* Reposition the Leaflet control container */ .leaflet-top.leaflet-left { top: 70px; /* Adjust this value based on your logo's height */ left: 10px; } </style> </head> <body> <form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off"> <h1 class="logomobile"><a class="no-decoration" href="./">Ocásek</a></h1> <div class="wrapper-results"> <input type="text" name="q" value="{{ .Query }}" id="search-input" placeholder="Type to search..." /> <button id="search-wrapper-ico" class="material-icons-round" name="t" value="map">search</button> <input type="submit" class="hide" name="t" value="map" /> </div> </form> <div id="map"></div> <script> var map = L.map('map').setView([50.0755, 14.4378], 13); // Default to Prague, Czech Republic L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); // Use the passed coordinates to update the map var latitude = {{ .Latitude }}; var longitude = {{ .Longitude }}; function updateMap(latitude, longitude) { map.setView([latitude, longitude], 13); // Set view to new coordinates } updateMap(latitude, longitude); // Update the map view to the new location </script> </body> </html>