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

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/getFeatureInformationTitle.ts

@@ -0,0 +1,37 @@
+import { Feature } from "ol";
+
+import {
+  RVF_LAYERS_TITLES,
+  TITLE_BY_CATEGORY,
+  TITLE_BY_FEED_ID,
+} from "./constants";
+
+const defaultTitle = "Informations";
+
+const getFeatureInformationTitle = (feature: Feature) => {
+  const features = feature.get("features");
+  const selectedFeature = features?.[0] || feature;
+  const {
+    category,
+    feed_id: feedId,
+    long_name: longName,
+    tickets,
+  } = selectedFeature.getProperties();
+
+  if (category) {
+    return TITLE_BY_CATEGORY[category] || defaultTitle;
+  }
+  if (feedId) {
+    return TITLE_BY_FEED_ID[feedId] || defaultTitle;
+  }
+
+  if (longName) {
+    return RVF_LAYERS_TITLES.liniennetz;
+  }
+  if (tickets) {
+    return RVF_LAYERS_TITLES.verkaufsstellen;
+  }
+  return defaultTitle;
+};
+
+export default getFeatureInformationTitle;

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,23 @@
+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 (
+    iosLink &&
+    (navigator.userAgent.includes("iPhone") ||
+      navigator.userAgent.includes("iPad") ||
+      navigator.userAgent.includes("iPod"))
+  ) {
+    return iosLink;
+  }
+
+  if (androidLink && navigator.userAgent.includes("Android")) {
+    return androidLink;
+  }
+
+  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;