100 lines
4.5 KiB
HTML
100 lines
4.5 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 }}
|
|
]
|
|
}
|
|
|
|
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': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(),
|
|
'line-width': 4
|
|
},
|
|
});
|
|
{{end}}
|
|
|
|
// Driver departure marker
|
|
const driverDepartureEl = document.createElement('div');
|
|
driverDepartureEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center';
|
|
driverDepartureEl.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
`;
|
|
new maplibregl.Marker({element: driverDepartureEl})
|
|
.setLngLat({{ json .driver_journey.DriverDeparture }}.geometry.coordinates)
|
|
.addTo(map);
|
|
|
|
// Driver arrival marker
|
|
const driverArrivalEl = document.createElement('div');
|
|
driverArrivalEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center';
|
|
driverArrivalEl.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
`;
|
|
new maplibregl.Marker({element: driverArrivalEl})
|
|
.setLngLat({{ json .driver_journey.DriverArrival }}.geometry.coordinates)
|
|
.addTo(map);
|
|
|
|
// Passenger pickup marker
|
|
const passengerPickupEl = document.createElement('div');
|
|
passengerPickupEl.className = 'w-8 h-8 rounded-co bg-co-green border border-white shadow-md flex items-center justify-center';
|
|
passengerPickupEl.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16">
|
|
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
|
|
</svg>
|
|
`;
|
|
new maplibregl.Marker({element: passengerPickupEl})
|
|
.setLngLat({{ json .driver_journey.PassengerPickup }}.geometry.coordinates)
|
|
.addTo(map);
|
|
|
|
// Passenger drop marker
|
|
const passengerDropEl = document.createElement('div');
|
|
passengerDropEl.className = 'w-8 h-8 rounded-co bg-co-red border border-white shadow-md flex items-center justify-center';
|
|
passengerDropEl.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16">
|
|
<path fill-rule="evenodd" d="M3 2.25a.75.75 0 01.75.75v.54l1.838-.46a9.75 9.75 0 016.725.738l.108.054a8.25 8.25 0 005.58.652l3.109-.732a.75.75 0 01.917.81 47.784 47.784 0 00.005 10.337.75.75 0 01-.574.812l-3.114.733a9.75 9.75 0 01-6.594-.77l-.108-.054a8.25 8.25 0 00-5.69-.625l-2.202.55V21a.75.75 0 01-1.5 0V3A.75.75 0 013 2.25z" clip-rule="evenodd" />
|
|
</svg>
|
|
`;
|
|
new maplibregl.Marker({element: passengerDropEl})
|
|
.setLngLat({{ json .driver_journey.PassengerDrop }}.geometry.coordinates)
|
|
.addTo(map);
|
|
|
|
var bbox=turf.bbox(geojsonPoints)
|
|
|
|
map.fitBounds(bbox, { padding: 50 })
|
|
})
|
|
</script>
|
|
|
|
{{ end }}
|