@geops/rvf-mobility-web-component 0.1.15 → 0.1.16

package/src/utils/constants.ts

@@ -9,3 +9,33 @@ export const RVF_EXTENT_3857 = transformExtent(
 );
 
 export const LAYER_PROP_IS_EXPORTING = "isExporting";
+
+export const RVF_LAYERS_NAMES = {
+  auto: "auto",
+  cargobike: "cargobike",
+  echtzeit: "echtzeit",
+  eroller: "e-roller",
+  fahrrad: "fahrrad",
+  haltestellen: "haltestellen",
+  liniennetz: "liniennetz",
+  mitfahrpunkte: "mitfahrpunkte",
+  pois: "pois",
+  sharedMobility: "shared mobility",
+  tarifzonen: "tarifzonen",
+  verkaufsstellen: "verkaufsstellen",
+};
+
+export const API_REQUEST_FEATURE_TYPE = {
+  freeFloat: {
+    bike: "sharing_vehicles",
+    car: "sharing_vehicles",
+    cargoBike: "sharing_vehicles",
+    scooter: "sharing_vehicles",
+  },
+  stations: {
+    bike: "sharing_stations_bicycle",
+    car: "sharing_stations_car",
+    cargoBike: "sharing_stations_cargo_bicycle",
+    scooter: "sharing_stations_scooters_standing",
+  },
+};

package/src/utils/{createSharedMobilityLayer.ts → createFreeFloatMobilityLayer.ts}

@@ -4,26 +4,38 @@ 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, Icon, Stroke, Style, Text } from "ol/style";
+import { Circle, Fill, 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 cargoBicycle 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 } from "./constants";
+import { iconStyleByFormFactor } from "./createMobiDataBwWfsLayer";
 
-const iconByFormFactor = {
-  bicycle,
-  car,
-  cargo_bicycle: cargoBicycle,
-  scooter,
+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 createSharedMobilityLayer(
+function createFreeFloatMobilityLayer(
   name: string,
   color: string,
   formFactor: string,
@@ -31,6 +43,8 @@ function createSharedMobilityLayer(
     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) {
@@ -88,54 +102,7 @@ function createSharedMobilityLayer(
     strategy: bboxStrategy,
   });
 
-  const style = new Style({
-    image: new Circle({
-      declutterMode: "declutter",
-      displacement: [-12, 10],
-      fill: new Fill({
-        color: "white",
-      }),
-      radius: 10,
-      stroke: new Stroke({
-        color: color,
-        width: 2,
-      }),
-    }),
-    text: new Text({
-      declutterMode: "declutter",
-      fill: new Fill({
-        color: color,
-      }),
-      font: "bold 12px inherit",
-      offsetX: -12,
-      offsetY: -10,
-    }),
-  });
-
-  const iconStyleByFormFactor = {};
-  Object.entries(iconByFormFactor).forEach(([key, value]) => {
-    iconStyleByFormFactor[key] = new Style({
-      image: new Icon({
-        src: value || iconByFormFactor["scooter"],
-        width: 25,
-      }),
-    });
-  });
-
-  // const backgroundStyle = new Style({
-  //   image: new Circle({
-  //     declutterMode: "declutter",
-  //     displacement: [0, 0],
-  //     fill: new Fill({
-  //       color: "#00973c",
-  //     }),
-  //     radius: 12,
-  //   }),
-  //   stroke: new Stroke({
-  //     color: "white",
-  //     width: 2,
-  //   }),
-  // });
+  const style = getCircleStyle(color);
 
   const clusterSource = new Cluster({
     distance: 40,
@@ -146,21 +113,26 @@ function createSharedMobilityLayer(
     if (layer.get(LAYER_PROP_IS_EXPORTING)) {
       return null;
     }
-    const clone = style.clone();
+    const circleStyle = style.clone();
 
-    clone.getText().setText(feature.get("features").length);
-    clone.setZIndex(parseInt(getUid(feature), 10));
+    const featuresCount = feature.get("features").length;
+    circleStyle.getText().setText(featuresCount);
 
     const formFactor =
       feature.get("features")?.[0].get?.("form_factor") || "scooter";
 
-    return [clone, iconStyleByFormFactor[formFactor]];
+    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,
-    name,
     source: clusterSource,
     style: styleFunction,
     ...layerOptions,
@@ -173,4 +145,4 @@ function createSharedMobilityLayer(
   return layer;
 }
 
-export default createSharedMobilityLayer;
+export default createFreeFloatMobilityLayer;

package/src/utils/createMobiDataBwWfsLayer.ts

@@ -4,15 +4,98 @@ 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, Stroke, Style, Text } from "ol/style";
+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 } 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: companyTextByFeedId[feedId] || feedId,
+      // textBaseline: "middle",
+    }),
+  });
+};
+
+const companyTextByFeedId = {
+  callabike_ice: "Call a Bike",
+  flinkster_carsharing: "Flinkster",
+  gruene_flotte_freiburg: "Die Grüne\nFlotte",
+  lastenvelo_fr: "LastenVelo",
+  naturenergie_sharing: "naturenergie\nsharing",
+  nextbike_df: "Frelo",
+  // "nextbike",
+  // "EinfachMobil",
+  // "Donkey Republic"
+  // "PubliBike",
+  // "Voi",
+  // "Velospot",
+  // "carvelo",
+  // "CarSharing"
+};
+
 function createMobiDataBwWfsLayer(
   name: string,
   color: string,
   layerOptions: Options = {
-    minZoom: 17.99,
+    minZoom: 18,
   },
 ): VectorLayer<Vector<Feature<Point>>> {
   const source = new Vector({
@@ -36,86 +119,44 @@ function createMobiDataBwWfsLayer(
     },
   });
 
-  const style = new Style({
-    image: new Circle({
-      declutterMode: "declutter",
-      displacement: [11, 12],
-      fill: new Fill({
-        color: "white",
-      }),
-      radius: 10,
-      stroke: new Stroke({
-        color: color,
-        width: 2,
-      }),
-    }),
-    text: new Text({
-      declutterMode: "declutter",
-      fill: new Fill({
-        color: color,
-      }),
-      font: "bold 12px inherit",
-      offsetX: 11,
-      offsetY: -12,
-      // stroke: new Stroke({ color: "black", width: 1 }),
-      // text: ["to-string", ["get", "num_vehicles_available"]],
-    }),
-  });
+  const style = getCircleStyle(color);
 
   const layer = new VectorLayer({
     // @ts-expect-error - custom properties
     isQueryable: true,
-    name,
     // declutter: true,
     source: source,
     ...layerOptions,
-    // style: (feature) => {
-    //   console.log("feature", feature);
-    //   style
-    //     .getText()
-    //     .setText(feature.get("num_vehicles_available").toString());
-    //   return style;
-    // },
-
-    // style: {
-    //   "circle-fill-color": "white",
-    //   "circle-radius": 15,
-    //   "circle-stroke-color": color,
-    //   "circle-stroke-width": 2,
-    //   // "fill-color": "rgba(100,100,100,0.25)",
-    //   // "stroke-color": "white",
-    //   // "stroke-width": 0.75,
-    //   // "text-background-fill-color": "black",
-    //   "text-fill-color": color,
-    //   "text-font": "bold 12px sans-serif",
-    //   "text-stroke-color": color,
-    //   "text-value": ["to-string", ["get", "num_vehicles_available"]],
-    // },
   });
 
   const styleFunction = (feature: Feature) => {
     if (layer.get(LAYER_PROP_IS_EXPORTING)) {
       return null;
     }
-    const clone = style.clone();
+    const circleStyle = style.clone();
 
-    clone.getText().setText(feature.get("num_vehicles_available")?.toString());
-    const isFreeFloat = !feature.get("num_vehicles_available")?.toString();
-    if (isFreeFloat) {
-      (clone.getImage() as Circle).setRadius(6);
-    }
-    clone.setZIndex(parseInt(getUid(feature), 10));
-    return [
-      clone,
-      // new Style({
-      //   text: new Text({
-      //     fill: new Fill({ color: color }),
-      //     offsetY: 15,
-      //     stroke: new Stroke({ color: "white", width: 2 }),
-      //     text: feature.get("form_factor") || name,
-      //   }),
-      // }),
+    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) {

package/src/utils/exportPdf.ts

@@ -554,9 +554,7 @@ async function exportPdf(
   const size = sizePt.map((n) => {
     return (n * 96) / 72;
   });
-  const extent = useMaxExtent
-    ? RVF_EXTENT_3857
-    : map.getView().calculateExtent();
+  const extent = useMaxExtent ? RVF_EXTENT_3857 : null; //map.getView().calculateExtent();
 
   // Save current pixel ratio
   const actualPixelRatio = window.devicePixelRatio;
@@ -602,7 +600,6 @@ async function exportPdf(
   const mapToExport = await createMapToExport(map, layers, extent, size, {
     pixelRatio: pixelRatio,
   });
-
   Object.defineProperty(window, "devicePixelRatio", {
     get() {
       return actualPixelRatio;

package/src/utils/getLayersAsFlatArray.ts

@@ -0,0 +1,22 @@
+import { Group } from "ol/layer";
+import BaseLayer from "ol/layer/Base";
+
+const getLayersAsFlatArray = (
+  layersOrLayer: BaseLayer | BaseLayer[],
+): BaseLayer[] => {
+  let layers = layersOrLayer;
+  if (!Array.isArray(layers)) {
+    layers = [layersOrLayer as BaseLayer];
+  }
+  let flatLayers: BaseLayer[] = [];
+  layers.forEach((layer: BaseLayer) => {
+    flatLayers.push(layer);
+    // Handle children property and ol.layer.Group
+    const children =
+      layer.get("children") || (layer as Group).getLayers?.()?.getArray();
+    flatLayers = flatLayers.concat(getLayersAsFlatArray(children || []));
+  });
+  return flatLayers;
+};
+
+export default getLayersAsFlatArray;

package/src/utils/getLinkByDevice.ts

@@ -0,0 +1,28 @@
+import { Feature } from "ol";
+
+function getLinkByDevice(feature: Feature): string {
+  const iosLink = feature.get("rental_uris_ios");
+  const androidLink = feature.get("rental_uris_android");
+  const webLink = feature.get("rental_uris_web");
+  if (
+    navigator.userAgent.includes("iPhone") ||
+    navigator.userAgent.includes("iPad") ||
+    navigator.userAgent.includes("iPod")
+  ) {
+    if (iosLink) {
+      return iosLink;
+    } else {
+      return webLink;
+    }
+  } else if (navigator.userAgent.includes("Android")) {
+    if (androidLink) {
+      return androidLink;
+    } else {
+      return webLink;
+    }
+  }
+
+  return webLink;
+}
+
+export default getLinkByDevice;

package/src/utils/getPermalinkParameters.ts

@@ -0,0 +1,27 @@
+import { Map } from "ol";
+
+import getLayersAsFlatArray from "./getLayersAsFlatArray";
+
+// This function return URL parameters representing a map.
+const getPermalinkParameters = (
+  map: Map,
+  urlParams: URLSearchParams = new URLSearchParams(),
+): URLSearchParams => {
+  const z = map.getView().getZoom();
+  const [x, y] = map.getView().getCenter();
+  const layers = getLayersAsFlatArray(map.getLayers().getArray())
+    .filter((layer) => {
+      return layer.get("name") && layer.getVisible();
+    })
+    .map((layer) => {
+      return layer.get("name");
+    });
+
+  urlParams.set("layers", layers.join(","));
+  urlParams.set("x", x.toFixed(2));
+  urlParams.set("y", y.toFixed(2));
+  urlParams.set("z", z.toFixed(1));
+  return urlParams;
+};
+
+export default getPermalinkParameters;

package/src/utils/hooks/useInitialLayersVisiblity.tsx

@@ -0,0 +1,28 @@
+import { Map } from "ol";
+import { unByKey } from "ol/Observable";
+import { useEffect } from "preact/hooks";
+
+import applyInitialLayerVisibility from "../applyInitialLayerVisibility";
+import getLayersAsFlatArray from "../getLayersAsFlatArray";
+
+const useInitialLayersVisiblity = (map: Map, layers: string) => {
+  // Apply initial visibility of layers from layers attribute
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    getLayersAsFlatArray(map.getLayers().getArray()).forEach((layer) => {
+      applyInitialLayerVisibility(layers, layer);
+    });
+
+    const key = map.getLayers().on("add", (event) => {
+      applyInitialLayerVisibility(layers, event.element);
+    });
+    return () => {
+      unByKey(key);
+    };
+  }, [map, layers]);
+  return null;
+};
+
+export default useInitialLayersVisiblity;

package/src/utils/hooks/useMapContext.tsx

@@ -21,6 +21,7 @@ export type MapContextType = {
   baseLayer: MaplibreLayer;
   isFollowing: boolean;
   isTracking: boolean;
+  layers: string;
   map: Map;
   realtimeLayer: RealtimeLayer;
   setBaseLayer: (baseLayer: MaplibreLayer) => void;
@@ -44,6 +45,7 @@ export const MapContext = createContext<MapContextType>({
   baseLayer: null,
   isFollowing: false,
   isTracking: false,
+  layers: null,
   map: null,
   realtimeLayer: null,
   setBaseLayer: (baseLayer?: MaplibreLayer) => {},

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -1,26 +1,59 @@
+import debounce from "lodash.debounce";
 import { Map } from "ol";
+import { EventsKey } from "ol/events";
 import { unByKey } from "ol/Observable";
 import { useEffect } from "preact/hooks";
 
+import getLayersAsFlatArray from "../getLayersAsFlatArray";
+import getPermalinkParameters from "../getPermalinkParameters";
+
+/**
+ * This hook only update parameters in the url, it does not apply the url parameters.
+ */
+
 const useUpdatePermalink = (map: Map, permalink: boolean) => {
   useEffect(() => {
-    let listener;
+    let moveEndKey: EventsKey;
+    let loadEndKey: EventsKey;
+    let changeVisibleKeys: EventsKey[];
+
     if (map && permalink) {
-      listener = map.on("moveend", () => {
-        const urlParams = new URLSearchParams(window.location.search);
-        const newX = map.getView().getCenter()[0].toFixed(2);
-        const newY = map.getView().getCenter()[1].toFixed(2);
-        const newZ = map.getView().getZoom().toFixed(1);
-        urlParams.set("x", newX);
-        urlParams.set("y", newY);
-        urlParams.set("z", newZ);
-        window.history.replaceState(null, null, `?${urlParams.toString()}`);
+      updatePermalinkDebounced(map);
+
+      // Update x,y,z in URL on moveend
+      moveEndKey = map?.on("moveend", (evt) => {
+        updatePermalinkDebounced(evt.map);
+      });
+
+      // Update layers in URL on change:visible event
+      loadEndKey = map.once("loadend", (evt) => {
+        updatePermalinkDebounced(evt.map);
+        changeVisibleKeys = getLayersAsFlatArray(
+          evt.map.getLayers().getArray(),
+        ).map((layer) => {
+          return layer.on("change:visible", () => {
+            updatePermalinkDebounced(evt.map);
+          });
+        });
       });
     }
+
     return () => {
-      unByKey(listener);
+      unByKey(moveEndKey);
+      unByKey(loadEndKey);
+      unByKey(changeVisibleKeys);
     };
   }, [map, permalink]);
   return null;
 };
+
+const updatePermalink = (map: Map) => {
+  const currentUrlParams = new URLSearchParams(window.location.search);
+  const urlParams = getPermalinkParameters(map, currentUrlParams);
+  urlParams.set("permalink", "true");
+  window.history.replaceState(null, null, `?${urlParams.toString()}`);
+};
+
+const updatePermalinkDebounced = debounce(updatePermalink, 1000);
+
 export default useUpdatePermalink;