Add compact search view

web/layouts/solidarity_transport/_partials/journey_map.html

@@ -17,21 +17,6 @@
       {{ 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}}
@@ -49,41 +34,66 @@
         'line-cap': 'round',
       },
       'paint': {
-        'line-color': '#243887',
-        'line-width': 3
+        'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(),
+        'line-width': 4
       },
     });
     {{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
-      },
-    });
+    // 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 }}