parcoursmob-default-theme/web/layouts/solidarity_transport/_partials/journey_map.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 }}