27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
{% extends "content.html" %}
|
|
|
|
{% block content %}
|
|
<p class="mb-2">Pictures I took around the world</p>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
|
|
|
<div id="map" class="w-full h-halfscreen"></div>
|
|
|
|
<script>
|
|
let map = L.map('map').setView([0, 0], 1);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
</script>
|
|
|
|
{% for wallpaper in wallpapers %}
|
|
<script>
|
|
var marker = L.marker({{ wallpaper.location.gps }}).addTo(map);
|
|
marker.bindPopup(`<a target="_blank" href="{{ wallpaper.file }}">{{ wallpaper.location.precise }}</a><br>{{ wallpaper.location.broad }}<br><b>{{ wallpaper.date }}</b>`);
|
|
</script>
|
|
{% endfor %}
|
|
{% endblock %}
|