Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues8 Pull requests Projects Releases Packages Wiki Activity Actions

basic map results + improved fetching from piped

Browse source
This commit is contained in:
partisan 2024-04-15 22:34:50 +02:00
parent 1efca320c8
commit 6c9ec56327
9 changed files with 239 additions and 20 deletions
templates
map.html

62
templates/map.html Normal file
View file

@ -0,0 +1,62 @@
<!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>