parcoursmob-default-theme/web/layouts/organized_carpool/_partials/booking_map.html

181 lines
5.7 KiB
HTML

{{ define "organized_carpool_map" }}
<div id="map" class="w-full h-full min-h-96"></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": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [{{ .booking.PassengerPickupLng }}, {{ .booking.PassengerPickupLat }}]
},
"properties": {
"label": "{{ .booking.PassengerPickupAddress }}",
"type": "pickup"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [{{ .booking.PassengerDropLng }}, {{ .booking.PassengerDropLat }}]
},
"properties": {
"label": "{{ .booking.PassengerDropAddress }}",
"type": "drop"
}
}
]
}
map.on('load', async () => {
// Add route polyline if available
// Add driver route if available
{{if .booking.DriverRoute}}
console.log("DriverRoute found");
try {
const driverRoute = JSON.parse(`{{ .booking.DriverRoute.Serialized }}`);
console.log("Parsed driverRoute:", driverRoute);
console.log("DriverRoute type:", driverRoute.type);
console.log("DriverRoute features:", driverRoute.features);
console.log("DriverRoute features count:", driverRoute.features ? driverRoute.features.length : 0);
console.log("DriverRoute keys:", Object.keys(driverRoute));
if (driverRoute.features && driverRoute.features.length > 0) {
console.log("First feature:", driverRoute.features[0]);
console.log("LineString features:", driverRoute.features.filter(f => f.geometry && f.geometry.type === 'LineString'));
} else {
console.log("No features found, checking alternative structure");
console.log("All driverRoute properties:", driverRoute);
}
map.addSource('driver_route', {
type: "geojson",
data: driverRoute
});
map.addLayer({
'id': 'driver_route',
'type': 'line',
'source': 'driver_route',
'filter': ['==', ['geometry-type'], 'LineString'], // Only show LineString geometries
'layout': {
'line-join': 'round',
'line-cap': 'round',
},
'paint': {
'line-color': '#243887', // Blue - main application color
'line-width': 3
},
});
console.log("Driver route layer added successfully");
} catch (error) {
console.error("Error adding driver route:", error);
}
{{else}}
console.log("No DriverRoute available");
{{end}}
// Add passenger route if available
{{if .booking.PassengerRoute}}
console.log("PassengerRoute found");
try {
const passengerRoute = JSON.parse(`{{ .booking.PassengerRoute.Serialized }}`);
console.log("Parsed passengerRoute:", passengerRoute);
console.log("PassengerRoute type:", passengerRoute.type);
console.log("PassengerRoute features count:", passengerRoute.features ? passengerRoute.features.length : 0);
map.addSource('passenger_route', {
type: "geojson",
data: passengerRoute
});
map.addLayer({
'id': 'passenger_route',
'type': 'line',
'source': 'passenger_route',
'filter': ['==', ['geometry-type'], 'LineString'], // Only show LineString geometries
'layout': {
'line-join': 'round',
'line-cap': 'round',
},
'paint': {
'line-color': '#243887', // Blue - main application color
'line-width': 3
},
});
console.log("Passenger route layer added successfully");
} catch (error) {
console.error("Error adding passenger route:", error);
}
{{else}}
console.log("No PassengerRoute available");
{{end}}
map.addSource('carpool_points', {
type: "geojson",
data: geojsonPoints
})
// Add pickup point
map.addLayer({
'id': 'pickup_point',
'type': 'circle',
'source': 'carpool_points',
'filter': ['==', ['get', 'type'], 'pickup'],
'paint': {
'circle-color': '#243887', // Blue - main application color
'circle-radius': 8,
'circle-stroke-color': '#fff',
'circle-stroke-width': 2
},
});
// Add drop point
map.addLayer({
'id': 'drop_point',
'type': 'circle',
'source': 'carpool_points',
'filter': ['==', ['get', 'type'], 'drop'],
'paint': {
'circle-color': '#243887', // Blue - main application color
'circle-radius': 8,
'circle-stroke-color': '#fff',
'circle-stroke-width': 2
},
});
// Add popup on click
map.on('click', 'pickup_point', (e) => {
new maplibregl.Popup()
.setLngLat(e.lngLat)
.setHTML(`<strong>Point de départ</strong><br>${e.features[0].properties.label}`)
.addTo(map);
});
map.on('click', 'drop_point', (e) => {
new maplibregl.Popup()
.setLngLat(e.lngLat)
.setHTML(`<strong>Destination</strong><br>${e.features[0].properties.label}`)
.addTo(map);
});
// Change cursor on hover
map.on('mouseenter', 'pickup_point', () => map.getCanvas().style.cursor = 'pointer');
map.on('mouseleave', 'pickup_point', () => map.getCanvas().style.cursor = '');
map.on('mouseenter', 'drop_point', () => map.getCanvas().style.cursor = 'pointer');
map.on('mouseleave', 'drop_point', () => map.getCanvas().style.cursor = '');
var bbox = turf.bbox(geojsonPoints)
map.fitBounds(bbox, { padding: 50 })
})
</script>
{{ end }}