181 lines
5.7 KiB
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 }}
|