change sms

web/layouts/solidarity_transport/_partials/journey_preview.html

@@ -52,92 +52,9 @@
                         </dl>
                     </div>
   <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: "/public/maps/protomaps-light/style.json",
-  });
+      {{ template "journey_map" . }}
 
-  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: 100 })
-  })
-</script>
-                    </div>
+  </div>
       </div>
     </div>
   <div class="py-4 grid grid-cols-1 gap-6 sm:grid-cols-2">