$ start_time = "2024-04-12T16:58:14Z"
$ end_time = "2024-04-13T02:02:59Z"
$ image_data = [
$     {
$         "name": 'Flora',
$         "latlng": [34.2040027777778, -118.126038888889],
$         "photoURL": '/media/NGz6.jpg'
$     },
$     {
$         "name": 'Panoramic View',
$         "latlng": [34.2189916666667, -118.120330555556],
$         "photoURL": '/media/vLqR.jpg'
$     },
$ ]

<div id="map"></div>
<link rel=stylesheet href=https://unpkg.com/leaflet/dist/leaflet.css>
<style>#map { height: 40em; }</style>
<script src=https://unpkg.com/leaflet/dist/leaflet.js></script>
<script>
let hikemap = L.map('map').setView([34.215, -118.115], 14)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(hikemap)

$for location in web.tx.db.select("locations", where=f'json_extract(locations.location, "$.properties.timestamp") > "{start_time}" and json_extract(locations.location, "$.properties.timestamp") < "{end_time}"'):
    L.geoJSON($:web.dump(location["location"])).addTo(hikemap)

let imageMarkers = $:web.dump(image_data)
imageMarkers.forEach(marker =>
    L.marker(
        marker.latlng,
        {icon: L.icon({
            iconUrl: marker.photoURL,
            iconSize: [50, 50],
            iconAnchor: [25, 50]})})
    .bindPopup(`<img src="$${marker.photoURL}" alt="$${marker.name}"
                style="max-width: 200px; max-height: 200px;">`)
    .addTo(hikemap)
)
</script>