90 lines
2.1 KiB
HTML
90 lines
2.1 KiB
HTML
{{ define "journey_map" }}
|
|
<div id="map" class="w-full h-full"></div>
|
|
<script>
|
|
let protocol = new pmtiles.Protocol();
|
|
maplibregl.addProtocol("pmtiles",protocol.tile);
|
|
var map = new maplibregl.Map({
|
|
container: 'map', // container id
|
|
style: "/public/maps/protomaps-light/style.json",
|
|
});
|
|
|
|
const geojsonPoints = {
|
|
"type": "FeatureCollection",
|
|
"features": [
|
|
{{ json .driver_journey.DriverDeparture }},
|
|
{{ json .driver_journey.PassengerPickup }},
|
|
{{ json .driver_journey.PassengerDrop }},
|
|
{{ json .driver_journey.DriverArrival }}
|
|
]
|
|
}
|
|
const driverGeojsonPoints = {
|
|
"type": "FeatureCollection",
|
|
"features": [
|
|
{{ json .driver_journey.DriverDeparture }},
|
|
{{ json .driver_journey.DriverArrival }}
|
|
]
|
|
}
|
|
const passengerGeojsonPoints = {
|
|
"type": "FeatureCollection",
|
|
"features": [
|
|
{{ json .driver_journey.PassengerPickup }},
|
|
{{ json .driver_journey.PassengerDrop }},
|
|
]
|
|
}
|
|
|
|
|
|
map.on('load', async () => {
|
|
{{if .driver_journey.JourneyPolyline}}
|
|
var linestring = polyline.toGeoJSON('{{.driver_journey.JourneyPolyline}}');
|
|
map.addSource('trip', {
|
|
type: "geojson",
|
|
data: linestring
|
|
})
|
|
map.addLayer({
|
|
'id': 'trip',
|
|
'type': 'line',
|
|
'source': 'trip',
|
|
'layout': {
|
|
'line-join': 'round',
|
|
'line-cap': 'round',
|
|
},
|
|
'paint': {
|
|
'line-color': '#243887',
|
|
'line-width': 3
|
|
},
|
|
});
|
|
{{end}}
|
|
|
|
map.addSource('driver_points', {
|
|
type: "geojson",
|
|
data: driverGeojsonPoints
|
|
})
|
|
map.addLayer({
|
|
'id': 'driver_points',
|
|
'type': 'circle',
|
|
'source': 'driver_points',
|
|
'paint': {
|
|
'circle-color': '#000'
|
|
},
|
|
});
|
|
map.addSource('passenger_points', {
|
|
type: "geojson",
|
|
data: passengerGeojsonPoints
|
|
})
|
|
map.addLayer({
|
|
'id': 'passenger_points',
|
|
'type': 'circle',
|
|
'source': 'passenger_points',
|
|
'paint': {
|
|
'circle-color': '#243887',
|
|
'circle-radius': 8
|
|
},
|
|
});
|
|
var bbox=turf.bbox(geojsonPoints)
|
|
|
|
map.fitBounds(bbox, { padding: 50 })
|
|
})
|
|
</script>
|
|
|
|
{{ end }}
|