@geops/rvf-mobility-web-component 0.1.22 → 0.1.24-beta.0

package/src/RvfSharedMobilityLayerGroup2/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RvfSharedMobilityLayerGroup2";

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -1,17 +1,21 @@
+import { GeoJSONSource } from "maplibre-gl";
 import { Feature, MapBrowserEvent } from "ol";
 import { GeoJSON } from "ol/format";
 import { unByKey } from "ol/Observable";
 import { toLonLat } from "ol/proj";
 import { useCallback, useEffect } from "preact/hooks";
 
+import { PROVIDER_LOGOS_BY_FEED_ID } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 import MobilityEvent from "../utils/MobilityEvent";
+import { fetchSharingStation } from "../utils/sharingGraphqlUtils";
 
 const geojson = new GeoJSON();
 
 function SingleClickListener() {
   const {
+    baseLayer,
     map,
     realtimeLayer,
     setStationId,
@@ -21,7 +25,23 @@ function SingleClickListener() {
     tenant,
     trainId,
   } = useMapContext();
-  const { setSelectedFeature, setSelectedFeatures } = useRvfContext();
+  const { selectedFeature, setSelectedFeature, setSelectedFeatures } =
+    useRvfContext();
+
+  // Send the selctedFEature to the parent window
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+
+    map.getTargetElement().dispatchEvent(
+      new MobilityEvent("selectedfeature", {
+        feature: selectedFeature
+          ? geojson.writeFeatureObject(selectedFeature)
+          : null,
+      }),
+    );
+  }, [map, selectedFeature]);
 
   const onPointerMove = useCallback(
     async (evt: MapBrowserEvent<PointerEvent>) => {
@@ -59,6 +79,9 @@ function SingleClickListener() {
 
   const onSingleClick = useCallback(
     async (evt: MapBrowserEvent<PointerEvent>) => {
+      if (!baseLayer.mapLibreMap) {
+        return;
+      }
       const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
         layerFilter: (l) => {
           return l === realtimeLayer;
@@ -95,26 +118,59 @@ function SingleClickListener() {
           return l.get("isQueryable");
         },
       }) as Feature[];
-      evt.map.getTargetElement().dispatchEvent(
-        new MobilityEvent("singleclick", {
-          ...evt,
-          features: geojson.writeFeaturesObject(features),
-          lonlat: toLonLat(evt.coordinate),
-        }),
-      );
-      // feature.get("form_factor"); //free float
-      // feature.get("num_vehicles_available"); // wfs livedata
-      // feature.get("provider_name"); // station sharing
-
-      if (newStationId || newTrainId || !features.length) {
-        setSelectedFeature(null);
-        setSelectedFeatures([]);
-      } else {
-        setSelectedFeatures(features);
-        setSelectedFeature(features[0]);
-      }
+
+      // Append more infos about the features
+      const addMoreData = async (features) => {
+        for (const feature of features) {
+          const clusterId = feature.get("cluster_id");
+          if (clusterId) {
+            const vtFeat = feature.get("vectorTileFeature");
+            const sourceId = vtFeat.layer.source;
+            const leaves =
+              (await (
+                baseLayer.mapLibreMap.getSource(sourceId) as GeoJSONSource
+              )?.getClusterLeaves(clusterId, 1000, 0)) || [];
+
+            feature.set(
+              "features",
+              leaves.map((l) => {
+                return geojson.readFeature(l);
+              }),
+            );
+          }
+
+          // Sharing station
+          const sharingStationId = selectedFeature?.get("station_id");
+          if (sharingStationId) {
+            const sharingStationInfo =
+              await fetchSharingStation(sharingStationId);
+            selectedFeature.setProperties(sharingStationInfo);
+            selectedFeature.set(
+              "provider_logo",
+              PROVIDER_LOGOS_BY_FEED_ID[selectedFeature?.get("feed_id")],
+            );
+          }
+        }
+        evt.map.getTargetElement().dispatchEvent(
+          new MobilityEvent("singleclick", {
+            ...evt,
+            features: geojson.writeFeaturesObject(features),
+            lonlat: toLonLat(evt.coordinate),
+          }),
+        );
+
+        if (newStationId || newTrainId || !features.length) {
+          setSelectedFeature(null);
+          setSelectedFeatures([]);
+        } else {
+          setSelectedFeatures(features);
+          setSelectedFeature(features[0]);
+        }
+      };
+      addMoreData(features);
     },
     [
+      baseLayer?.mapLibreMap,
       stationId,
       trainId,
       realtimeLayer,
@@ -122,6 +178,7 @@ function SingleClickListener() {
       tenant,
       setStationId,
       setTrainId,
+      selectedFeature,
       setSelectedFeature,
       setSelectedFeatures,
     ],

package/src/index.tsx

@@ -13,6 +13,7 @@ register(
     "extent",
     "maxextent",
     "geolocation",
+    "details",
     "layers",
     "layertree",
     "mapsurl",
@@ -23,7 +24,7 @@ register(
     "notificationbeforelayerid",
     "print",
     "realtime",
-    "realtimeUrl",
+    "realtimeurl",
     "search",
     "share",
     "tenant",

package/src/utils/constants.ts

@@ -1,4 +1,13 @@
-import { transformExtent } from "ol/proj";
+import { fromLonLat, toLonLat, transformExtent } from "ol/proj";
+
+import callBike from "../logos/callabike_logo.png";
+import flinkster from "../logos/flinkster_logo.png";
+import grueneFlotteLogo from "../logos/gruene_flotte_logo.png";
+import lastenVeloLogo from "../logos/lasten_velo_freiburg.png";
+import freloLogo from "../logos/logo_frelo_web_rgb.png";
+import naturEnergieLogo from "../logos/natur_energie_logo.png";
+import yoioLogo from "../logos/yoio_logo.png";
+import zeusLogo from "../logos/zeus_logo.png";
 
 export const RVF_EXTENT_4326 = [7.5, 47.7, 8.45, 48.4];
 
@@ -7,7 +16,12 @@ export const RVF_EXTENT_3857 = transformExtent(
   "EPSG:4326",
   "EPSG:3857",
 );
+console.log(fromLonLat([7.844388, 47.991351]));
 
+// @ts-expect-error - testsdsd sd
+window.fromLonLat = fromLonLat;
+// @ts-expect-error - testsdsd sd
+window.toLonLat = toLonLat;
 export const LAYER_PROP_IS_EXPORTING = "isExporting";
 
 export const RVF_LAYERS_TITLES = {
@@ -27,7 +41,14 @@ export const RVF_LAYERS_TITLES = {
 
 export const RVF_LAYERS_NAMES = {
   auto: "auto",
+  bikeFrelo: "frelo",
+  bikeOthers: "bikeothers",
   cargobike: "cargobike",
+  cargobikeFrelo: "cargobikefrelo",
+  cargobikeOthers: "cargobikeothers",
+  carGrf: "grueneflotte",
+  carNatur: "naturenergie",
+  carOthers: "carothers",
   echtzeit: "echtzeit",
   eroller: "e-roller",
   fahrrad: "fahrrad",
@@ -91,3 +112,46 @@ export const PROVIDER_BY_FEED_ID = {
   // "carvelo",
   // "CarSharing"
 };
+
+export const BIKE_FORM_FACTOR = "bicycle";
+export const CAR_FORM_FACTOR = "car";
+export const CARGOBIKE_FORM_FACTOR = "cargo_bicycle";
+export const SCOOTER_FORM_FACTOR = "scooter";
+
+// Station system ids
+// "pickebike_basel",
+// "dott_basel",
+// "gruene-flotte_freiburg",
+// "voi_ch",
+// "nextbike_df",
+// "carvelo2go_ch",
+// "naturenergie_sharing",
+// "lastenvelo_fr",
+// "donkey_neuchatel",
+// "flinkster_carsharing"
+export const GRUNFLOTTE_FEED_ID = "gruene-flotte_freiburg";
+export const NATURENERGIE_FEED_ID = "naturenergie_sharing";
+export const CAR_OTHERS_FEED_IDS = ["flinkster_carsharing"];
+
+export const FRELO_FEED_ID = "nextbike_df";
+export const BIKE_OTHERS_FEED_IDS = [
+  "callabike_ice", // don't exist in graphql
+  "pickebike_basel",
+  "donkey_neuchatel",
+];
+
+export const CARGOBIKE_FRELO_ID = "nextbike_df";
+export const CARGOBIKE_OTHERS_FEED_IDS = ["lastenvelo_fr", "carvelo2go_ch"];
+
+export const SCOOTER_OTHERS_FEED_IDS = ["voi_ch"];
+
+export const PROVIDER_LOGOS_BY_FEED_ID = {
+  callabike_ice: callBike,
+  flinkster_carsharing: flinkster,
+  "gruene-flotte_freiburg": grueneFlotteLogo,
+  lastenvelo_fr: lastenVeloLogo,
+  naturenergie_sharing: naturEnergieLogo,
+  nextbike_df: freloLogo,
+  yoio_freiburg: yoioLogo,
+  zeus_freiburg: zeusLogo,
+};

package/src/utils/createFreeFloatMobilityLayer.ts

@@ -57,7 +57,7 @@ function createFreeFloatMobilityLayer(
         "MobiData-BW:" +
         name +
         "&" +
-        "outputFormat=application/json&srsname=EPSG:3857&" +
+        "outputFormat=application/json" +
         "bbox=" +
         extent.join(",") +
         ",EPSG:3857";
@@ -72,7 +72,10 @@ function createFreeFloatMobilityLayer(
         if (xhr.status == 200) {
           const features = source
             .getFormat()
-            .readFeatures(xhr.responseText)
+            .readFeatures(xhr.responseText, {
+              dataProjection: "EPSG:4326",
+              featureProjection: "EPSG:3857",
+            })
             ?.filter((feature) => {
               if (formFactor) {
                 return feature.get("form_factor") === formFactor;

package/src/utils/createMobiDataBwWfsLayer.ts

@@ -78,11 +78,14 @@ function createMobiDataBwWfsLayer(
   name: string,
   color: string,
   layerOptions: Options = {
-    minZoom: 18,
+    minZoom: 0,
   },
 ): VectorLayer<Vector<Feature<Point>>> {
   const source = new Vector({
-    format: new GeoJSON(),
+    format: new GeoJSON({
+      dataProjection: "EPSG:4326",
+      featureProjection: "EPSG:3857",
+    }),
     strategy: bboxStrategy,
     url: function (extent) {
       return (
@@ -94,7 +97,7 @@ function createMobiDataBwWfsLayer(
         "MobiData-BW:" +
         name +
         "&" +
-        "outputFormat=application/json&srsname=EPSG:3857&" +
+        "outputFormat=application/json&" +
         "bbox=" +
         extent.join(",") +
         ",EPSG:3857"

package/src/utils/sharingGraphqlUtils.ts

@@ -0,0 +1,313 @@
+import { FeatureCollection, Point } from "geojson";
+import { gql, GraphQLClient } from "graphql-request";
+import { Extent } from "ol/extent";
+
+import { RVF_EXTENT_4326 } from "./constants";
+
+const GQL_URL = "https://api.mobidata-bw.de/sharing/graphql";
+
+export interface SharingStation {
+  id: string;
+  lat: number;
+  lon: number;
+  name: {
+    translation: {
+      language: string;
+      value: string;
+    };
+  };
+  numVehiclesAvailable: number;
+  system: {
+    id: string;
+    name: {
+      translation: {
+        language: string;
+        value: string;
+      };
+    };
+    operator: {
+      id: string;
+      name: {
+        translation: {
+          language: string;
+          value: string;
+        };
+      };
+    };
+    shortName: {
+      translation: {
+        language: string;
+        value: string;
+      };
+    };
+  };
+}
+
+const queryStation = gql`
+  query station($id: String!) {
+    station(id: $id) {
+      name {
+        translation {
+          language
+          value
+        }
+      }
+      shortName {
+        translation {
+          language
+          value
+        }
+      }
+      lat
+      lon
+      region {
+        id
+      }
+      rentalUris {
+        android
+        ios
+        web
+      }
+      isVirtualStation
+      rentalMethods
+      parkingHoop
+      parkingType
+      contactPhone
+      address
+      rentalMethods
+      capacity
+      vehicleTypesAvailable {
+        count
+        vehicleType {
+          id
+          formFactor
+          riderCapacity
+          cargoVolumeCapacity
+          cargoLoadCapacity
+          propulsionType
+          ecoLabels {
+            countryCode
+            ecoSticker
+          }
+          maxRangeMeters
+          name {
+            translation {
+              language
+              value
+            }
+          }
+          description {
+            translation {
+              language
+              value
+            }
+          }
+          vehicleAccessories
+          gCO2km
+          vehicleImage
+          make
+          model
+          color
+          wheelCount
+          maxPermittedSpeed
+          ratedPower
+          defaultReserveTime
+          returnConstraint
+          vehicleAssets {
+            iconUrl
+            iconUrlDark
+            iconLastModified
+          }
+          defaultReserveTime
+          defaultPricingPlan {
+            id
+            url
+            currency
+            isTaxable
+            description {
+              translation {
+                language
+                value
+              }
+            }
+            perKmPricing {
+              start
+              rate
+              interval
+              end
+            }
+            perMinPricing {
+              start
+              rate
+              interval
+              end
+            }
+            surgePricing
+          }
+        }
+        count
+      }
+      vehicleDocksCapacity {
+        vehicleTypes {
+          id
+        }
+        count
+      }
+      numVehiclesAvailable
+      numDocksDisabled
+      numVehiclesDisabled
+      numDocksAvailable
+      isInstalled
+      isRenting
+      isReturning
+      pricingPlans {
+        id
+        url
+        currency
+        isTaxable
+        description {
+          translation {
+            language
+            value
+          }
+        }
+        perKmPricing {
+          start
+          rate
+          interval
+          end
+        }
+        perMinPricing {
+          start
+          rate
+          interval
+          end
+        }
+        surgePricing
+      }
+    }
+  }
+`;
+const queryStations = gql`
+  query stations(
+    $ids: [String!]
+    $minimumLatitude: Float
+    $minimumLongitude: Float
+    $maximumLatitude: Float
+    $maximumLongitude: Float
+    $systems: [System!]
+    $operators: [Operator!]
+    $availableFormFactors: [FormFactor!]
+  ) {
+    stations(
+      ids: $ids
+      minimumLatitude: $minimumLatitude
+      minimumLongitude: $minimumLongitude
+      maximumLatitude: $maximumLatitude
+      maximumLongitude: $maximumLongitude
+      operators: $operators
+      availableFormFactors: $availableFormFactors
+    ) {
+      lon
+      id
+      lat
+      name {
+        translation {
+          language
+          value
+        }
+      }
+      numVehiclesAvailable
+      system {
+        id
+        name {
+          translation {
+            language
+            value
+          }
+        }
+        shortName {
+          translation {
+            language
+            value
+          }
+        }
+        operator {
+          id
+          name {
+            translation {
+              language
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const fetchSharingStation = async (id: string) => {
+  const client = new GraphQLClient(GQL_URL, {
+    method: "GET",
+  });
+  const { station }: { station: unknown } = await client.request(queryStation, {
+    __operation: "station",
+    id: id,
+  });
+  return station;
+};
+
+export const fetchSharingStations = async (
+  ids: null | string[],
+  extent: Extent = RVF_EXTENT_4326,
+  operators: null | string[] = null,
+  abortController: AbortController,
+) => {
+  const client = new GraphQLClient(
+    "https://api.mobidata-bw.de/sharing/graphql",
+    {
+      method: "GET",
+      signal: abortController.signal,
+    },
+  );
+  const { stations }: { stations: SharingStation[] } = await client.request(
+    queryStations,
+    {
+      // availableFormFactors: ["BICYCLE"],
+      // id: "NBK:Station:33269707",
+      ids: ids,
+      maximumLatitude: extent?.[3],
+      maximumLongitude: extent?.[2],
+      minimumLatitude: extent?.[1],
+      minimumLongitude: extent?.[0],
+      operators: operators, //["BK:Operator:nextbike"],
+    },
+  );
+  const featureCollection: FeatureCollection<Point, SharingStation> = {
+    features: stations.map((station: SharingStation) => {
+      console.log("station", station);
+      return {
+        geometry: {
+          coordinates: [station.lon, station.lat],
+          type: "Point",
+        },
+        properties: {
+          ...station,
+          num_vehicles_available: station.numVehiclesAvailable,
+          provider_name: station.system.name.translation[0].value.replace(
+            "Freiburg",
+            "",
+          ),
+          station_id: station.id,
+        },
+        type: "Feature",
+      };
+    }),
+    type: "FeatureCollection",
+  };
+  return featureCollection;
+};
+
+export default {
+  fetchSharingStations,
+};