adriano.fyi/layouts/custom/current_location.html
2020-08-01 19:13:13 -06:00

38 lines
1.6 KiB
HTML

{{ define "main" }}
{{ $current_location := getJSON "https://adriano.fyi/current_location" }}
{{ $geocode_url := printf "http://mycorp.adriano.fyi:4000/v1/reverse?point.lon=%f&point.lat=%f&layers=coarse&size=1" $current_location.lon $current_location.lat }}
{{ $dataJ := getJSON $geocode_url }}
{{ $place := index $dataJ.features 0 }}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style>
#mapid { height: 480px; }
</style>
<div class="container" role="main">
<h2>{{ $place.properties.label }}</h2>
<div id="mapid"></div>
<script type="text/javascript">
var lat = {{ $current_location.lat }};
var lon = {{ $current_location.lon }};
var map = L.map('mapid').setView([lat, lon], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
// show the scale bar on the lower left corner
L.control.scale().addTo(map);
// show a marker on the map
L.marker({lon: lon, lat: lat}).bindPopup('Come say hi').addTo(map);
</script>
</div>
</div>
{{ end }}