solidarity carpool

web/layouts/solidarity_transport/_partials/journey_preview.html

@@ -25,7 +25,6 @@
                                 <dt class="text-sm font-medium text-gray-500">Destination conducteur</dt>
             <dd class="mt-1 text-sm text-gray-900">{{.driver_journey.DriverArrival.Properties.label}}</dd>
                             </div>
-                            <div class="sm:col-span-1">
                                 <dt class="text-sm font-medium text-gray-500">Kilomètres passager</dt>
                                 <dd class="mt-1 text-sm text-gray-900">{{.driver_journey.PassengerDistance}} km</dd>
                             </div>
@@ -54,35 +53,88 @@
                     <div>
         <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: {
-      version: 8,
-      glyphs:'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf',
-      sprite: "https://protomaps.github.io/basemaps-assets/sprites/v4/light",
-      sources: {
-        "protomaps": {
-            type: "vector",
-            url: "pmtiles://https://coopgo-gis-data.s3.fr-par.scw.cloud/vector-tiles/pmtiles/europe-latest.pmtiles",
-            //       ^-- Remember to prefix the URL with pmtiles://
-            attribution: '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>'
-        },
-        "points": {
-          type: "geojson",
-          data: {
-            "type": "FeatureCollection",
-            "features": [
-              {{ json .driver_journey.DriverDeparture }},
-              {{ json .driver_journey.PassengerPickup }},
-              {{ json .driver_journey.PassengerDrop }},
-              {{ json .driver_journey.DriverArrival }}
-            ]
-          }
-        }
-      },
-      layers: basemaps.layers("protomaps",basemaps.namedFlavor("light"),{lang:"en"})
-    }
+    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: 30 })
+  })
 </script>
                     </div>
       </div>