@geops/rvf-mobility-web-component 0.1.44 → 0.1.45

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -12,7 +12,7 @@
     "jspdf": "^2.5.2",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^4.7.1",
-    "mobility-toolbox-js": "3.3.0-beta.32",
+    "mobility-toolbox-js": "3.3.1",
     "ol": "^10.3.1",
     "preact": "^10.25.4",
     "preact-custom-element": "^4.3.0",

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -155,7 +155,7 @@ const realtimeLayerProps = {
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
   // baselayer = "review-geops-tgma-085vyz.de.rvf",
-  baselayer = "de.rvf_moco",
+  baselayer = "de.rvf",
   center = null,
   details = "true",
   embed = "false",

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -3,6 +3,7 @@ import type { Options } from "ol/layer/Group";
 import { FeatureCollection, Point } from "geojson";
 import { GeoJSONSource } from "maplibre-gl";
 import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { Extent } from "ol/extent";
 import { Group } from "ol/layer";
 import { unByKey } from "ol/Observable";
 import { transformExtent } from "ol/proj";
@@ -19,6 +20,7 @@ import {
   CAR_FORM_FACTOR,
   CARGOBIKE_FORM_FACTOR,
   LAYER_PROP_IS_EXPORTING,
+  RVF_EXTENT_4326,
   RVF_LAYERS_NAMES,
   RVF_LAYERS_TITLES,
   SCOOTER_FORM_FACTOR,
@@ -44,18 +46,17 @@ export type GroupOptions = Options & Record<string, unknown>;
 
 const fetchStations = async (
   typeName: string,
-  feedIds: string[],
   abortController: AbortController,
+  extent4326: Extent = RVF_EXTENT_4326,
 ) => {
   const stations = (await fetchSharingWFS(
     typeName,
     abortController,
+    extent4326,
   )) as FeatureCollection<Point, SharingStationWFS>;
 
   const featureCollection = {
-    features: stations.features.filter((feature) => {
-      return feedIds ? feedIds.includes(feature.properties.feed_id) : true;
-    }),
+    features: stations.features,
     type: "FeatureCollection",
   };
 
@@ -110,8 +111,8 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       // Fill stations data
       const stations = await fetchStations(
         WFS_STATIONS_TYPE,
-        null,
         abortController,
+        extent,
       );
       const bikeStationsData: FeatureCollection<Point, SharingStationWFS> = {
         features: [],

package/src/utils/createFreeFloatMobilityLayer.ts

@@ -1,152 +0,0 @@
-import { Feature, getUid } from "ol";
-import { GeoJSON } from "ol/format";
-import { Point } from "ol/geom";
-import VectorLayer, { Options } from "ol/layer/Vector";
-import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
-import { Cluster, Vector } from "ol/source";
-import { Circle, Fill, Stroke, Style, Text } from "ol/style";
-
-import { LAYER_PROP_IS_EXPORTING } from "./constants";
-import { iconStyleByFormFactor } from "./createMobiDataBwWfsLayer";
-
-export const getCircleStyle = (color: string) => {
-  return new Style({
-    image: new Circle({
-      declutterMode: "declutter",
-      displacement: [-12, 12],
-      fill: new Fill({
-        color: "white",
-      }),
-      radius: 9,
-      stroke: new Stroke({
-        color: color,
-        width: 1,
-      }),
-    }),
-    text: new Text({
-      declutterMode: "declutter",
-      fill: new Fill({
-        color: color,
-      }),
-      font: "bolder 10px arial",
-      offsetX: -12,
-      offsetY: -11,
-    }),
-  });
-};
-
-function createFreeFloatMobilityLayer(
-  name: string,
-  color: string,
-  formFactor: string,
-  layerOptions: Options = {
-    minZoom: 17.99,
-  },
-): VectorLayer<Vector<Feature<Point>>> {
-  // Exemple how to get a specific form factor
-  //api.mobidata-bw.de/geoserver/MobiData-BW/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=MobiData-BW%3Asharing_vehicles&CQL_FILTER=form_factor%20%3D%20%27scooter%27&maxFeatures=20000&outputFormat=csv
-  const source = new Vector({
-    format: new GeoJSON(),
-    loader: function (extent, resolution, projection, success, failure) {
-      const url =
-        "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
-        name +
-        "/ows" +
-        "?service=WFS&" +
-        "version=1.1.0&request=GetFeature&typename=" +
-        "MobiData-BW:" +
-        name +
-        "&" +
-        "outputFormat=application/json" +
-        "bbox=" +
-        extent.join(",") +
-        ",EPSG:3857";
-      const xhr = new XMLHttpRequest();
-      xhr.open("GET", url);
-      const onError = function () {
-        source.removeLoadedExtent(extent);
-        failure();
-      };
-      xhr.onerror = onError;
-      xhr.onload = function () {
-        if (xhr.status == 200) {
-          const features = source
-            .getFormat()
-            .readFeatures(xhr.responseText, {
-              dataProjection: "EPSG:4326",
-              featureProjection: "EPSG:3857",
-            })
-            ?.filter((feature) => {
-              if (formFactor) {
-                return feature.get("form_factor") === formFactor;
-              }
-              return true;
-            });
-
-          features?.forEach((feature) => {
-            // The WFS returns everytime a different id for the same vehicle, so we set the vehicle_id as id.
-            // and remove the previous feature with the same id.
-            const vehicleId = feature.get("vehicle_id");
-            if (vehicleId) {
-              feature.setId(vehicleId);
-              const featuresToRemove = source.getFeatures().filter((feat) => {
-                return feat.getId() === feature.getId();
-              });
-              source.removeFeatures(featuresToRemove);
-            }
-          });
-          source.addFeatures(features);
-          success(features);
-        } else {
-          onError();
-        }
-      };
-      xhr.send();
-    },
-    strategy: bboxStrategy,
-  });
-
-  const style = getCircleStyle(color);
-
-  const clusterSource = new Cluster({
-    distance: 40,
-    source: source,
-  });
-
-  const styleFunction = (feature) => {
-    if (layer.get(LAYER_PROP_IS_EXPORTING)) {
-      return null;
-    }
-    const circleStyle = style.clone();
-
-    const featuresCount = feature.get("features").length;
-    circleStyle.getText().setText(featuresCount);
-
-    const formFactor =
-      feature.get("features")?.[0].get?.("form_factor") || "scooter";
-
-    const styles = [iconStyleByFormFactor[formFactor], circleStyle];
-
-    styles.forEach((style) => {
-      style.setZIndex(parseInt(getUid(feature), 10));
-    });
-
-    return styles;
-  };
-
-  const layer = new VectorLayer({
-    // @ts-expect-error - custom properties
-    isQueryable: true,
-    source: clusterSource,
-    style: styleFunction,
-    ...layerOptions,
-  });
-
-  clusterSource.on("addfeature", function (event) {
-    event.feature?.setStyle(styleFunction);
-  });
-
-  return layer;
-}
-
-export default createFreeFloatMobilityLayer;

package/src/utils/createMobiDataBwWfsLayer.ts

@@ -1,155 +0,0 @@
-import { Feature, getUid } from "ol";
-import { GeoJSON } from "ol/format";
-import { Point } from "ol/geom";
-import VectorLayer, { Options } from "ol/layer/Vector";
-import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
-import { Vector } from "ol/source";
-import { Circle, Fill, Icon, Stroke, Style, Text } from "ol/style";
-
-// @ts-expect-error -  load svg as data url
-import bicycle from "../icons/Bike/rvf_shared_bike.svg";
-// @ts-expect-error -  load svg as data url
-import car from "../icons/Car/rvf_shared_car.svg";
-// @ts-expect-error -  load svg as data url
-import cargo_bicycle from "../icons/CargoBike/rvf_shared_cargo_bike.svg";
-// @ts-expect-error -  load svg as data url
-import scooter from "../icons/Scooter/rvf_shared_scooter.svg";
-import { LAYER_PROP_IS_EXPORTING, PROVIDER_BY_FEED_ID } from "./constants";
-
-const iconByFormFactor = {
-  bicycle,
-  car,
-  cargo_bicycle,
-  scooter,
-};
-
-export const iconStyleByFormFactor = {};
-Object.entries(iconByFormFactor).forEach(([key, value]) => {
-  iconStyleByFormFactor[key] = new Style({
-    image: new Icon({
-      src: value,
-    }),
-  });
-});
-
-export const getCircleStyle = (color: string) => {
-  return new Style({
-    image: new Circle({
-      displacement: [12, 12],
-      fill: new Fill({
-        color: "white",
-      }),
-      radius: 9,
-      stroke: new Stroke({
-        color: color,
-        width: 1,
-      }),
-    }),
-    text: new Text({
-      fill: new Fill({
-        color: color,
-      }),
-      font: "bolder 10px arial",
-      offsetX: 12,
-      offsetY: -11,
-    }),
-  });
-};
-
-const getCompanyNameTextStyle = (feedId: string) => {
-  const offsetY =
-    feedId === "naturenergie_sharing" || feedId === "gruene_flotte_freiburg"
-      ? 25
-      : 20;
-  return new Style({
-    text: new Text({
-      declutterMode: "declutter",
-      fill: new Fill({ color: "rgba(6, 76, 10, 1)" }),
-      font: "bold 12px/1.1 source-sans-pro",
-      offsetY,
-      stroke: new Stroke({ color: "white", width: 4 }),
-      text: PROVIDER_BY_FEED_ID[feedId] || feedId,
-      // textBaseline: "middle",
-    }),
-  });
-};
-
-function createMobiDataBwWfsLayer(
-  name: string,
-  color: string,
-  layerOptions: Options = {
-    minZoom: 0,
-  },
-): VectorLayer<Vector<Feature<Point>>> {
-  const source = new Vector({
-    format: new GeoJSON({
-      dataProjection: "EPSG:4326",
-      featureProjection: "EPSG:3857",
-    }),
-    strategy: bboxStrategy,
-    url: function (extent) {
-      return (
-        "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
-        name +
-        "/ows" +
-        "?service=WFS&" +
-        "version=1.1.0&request=GetFeature&typename=" +
-        "MobiData-BW:" +
-        name +
-        "&" +
-        "outputFormat=application/json&" +
-        "bbox=" +
-        extent.join(",") +
-        ",EPSG:3857"
-      );
-    },
-  });
-
-  const style = getCircleStyle(color);
-
-  const layer = new VectorLayer({
-    // @ts-expect-error - custom properties
-    isQueryable: true,
-    // declutter: true,
-    source: source,
-    ...layerOptions,
-  });
-
-  const styleFunction = (feature: Feature) => {
-    if (layer.get(LAYER_PROP_IS_EXPORTING)) {
-      return null;
-    }
-    const circleStyle = style.clone();
-
-    const numVehiclesAvailable = feature
-      .get("num_vehicles_available")
-      ?.toString();
-    circleStyle.getText().setText(numVehiclesAvailable);
-
-    const formFactor = (feature.getId() as string)
-      .split(".")[0]
-      .replace("sharing_stations_", "");
-
-    const feedId = feature.get("feed_id").replace("-", "_"); // to handle id's like gruene-flotte_freiburg
-
-    const styles = [
-      iconStyleByFormFactor[formFactor],
-      getCompanyNameTextStyle(feedId),
-      circleStyle,
-    ];
-
-    styles.forEach((style) => {
-      style.setZIndex(parseInt(getUid(feature), 10));
-    });
-
-    return styles;
-  };
-
-  source.on("addfeature", function (event) {
-    const feature = event.feature;
-    feature.setStyle(styleFunction);
-  });
-  return layer;
-}
-
-export default createMobiDataBwWfsLayer;