display dispatches from api on map

This commit is contained in:
desmukh 2023-01-31 12:20:45 +05:00
parent 82fa063b9d
commit 8f7b53be73
2 changed files with 41 additions and 3 deletions

View File

@ -3,6 +3,4 @@ draft: false
--- ---
<h1>Lumbung of Publishers</h1> <h1>Lumbung of Publishers</h1>
<article class="map"> {{< publishers_map >}}
{{< map geoJson="data/geojsonContributors.json">}}
</article>

View File

@ -0,0 +1,40 @@
<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: '&copy; <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>