40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
|
||
|
|
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
|
||
|
|
|
||
|
|
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
|
||
|
|
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
|
||
|
|
|
||
|
|
<div id="map"></div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#map {
|
||
|
|
width: 100%;
|
||
|
|
padding-bottom: 70%;
|
||
|
|
margin-bottom: 80px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var map = L.map('map').setView([51.505, -0.09], 3);
|
||
|
|
window.addEventListener('load', (event) => {
|
||
|
|
map.invalidateSize();
|
||
|
|
});
|
||
|
|
|
||
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
maxZoom: 19,
|
||
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
|
||
|
|
{{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}}
|
||
|
|
{{ range .docs }}
|
||
|
|
var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }});
|
||
|
|
var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
|
||
|
|
|
||
|
|
var startMarker = L.marker(start).addTo(map);
|
||
|
|
var endMarker = L.marker(end).addTo(map);
|
||
|
|
var route = L.polyline([start, end], {color: 'red'}).addTo(map);
|
||
|
|
|
||
|
|
{{ end }}
|
||
|
|
{{ end }}
|
||
|
|
</script>
|