@geops/rvf-mobility-web-component 0.1.10 → 0.1.11

package/src/TopicMenu/TopicMenu.tsx

@@ -0,0 +1,143 @@
+import { Map } from "ol";
+import { Group } from "ol/layer";
+
+import LayerTree from "../LayerTree";
+import { SelectionType } from "../LayerTree/TreeItem/TreeItem";
+
+function TopicMenu({ map }: { map: Map }) {
+  const layers = map
+    .getLayers()
+    .getArray()
+    .filter((layer) => {
+      return !layer.get("isNotInLayerTree");
+    })
+    .map((layer) => {
+      return {
+        childItems:
+          (layer as Group)
+            ?.getLayers?.()
+            .getArray()
+            .map((subLayer) => {
+              return {
+                childItems: [],
+                id: (Math.random() + 1).toString(36).substring(7),
+                isControlChecked: subLayer.getVisible(),
+                layer: subLayer,
+                selectionType: SelectionType.CHECKBOX,
+                title: subLayer.get("title"),
+              };
+            }) || [],
+        id: (Math.random() + 1).toString(36).substring(7),
+        isControlChecked: layer.getVisible(),
+        layer,
+        selectionType: SelectionType.CHECKBOX,
+        title: layer.get("title"),
+      };
+    });
+
+  // const readyLayers = [
+  //   {
+  //     childItems: layers.map((layer) => {
+  //       return {
+  //         ...layer,
+  //         id: (Math.random() + 1).toString(36).substring(7),
+  //       };
+  //     }),
+  //     id: (Math.random() + 1).toString(36).substring(7),
+  //     isCollapsedOnControlClick: true,
+  //     isControlChecked: true,
+  //     selectionType: SelectionType.RADIO,
+  //     title: "Topic 1",
+  //   },
+  // {
+  //   childItems: layers.map((layer) => {
+  //     return {
+  //       ...layer,
+  //       id: (Math.random() + 1).toString(36).substring(7),
+  //     };
+  //   }),
+  //   id: (Math.random() + 1).toString(36).substring(7),
+  //   isCollapsedOnControlClick: true,
+  //   selectionType: SelectionType.RADIO,
+  //   title: "Topic 2",
+  // },
+  // {
+  //   childItems: layers.map((layer) => {
+  //     return {
+  //       ...layer,
+  //       id: (Math.random() + 1).toString(36).substring(7),
+  //       isControlChecked: false,
+  //       selectionType: SelectionType.RADIO,
+  //     };
+  //   }),
+  //   id: (Math.random() + 1).toString(36).substring(7),
+  //   isCollapsedOnControlClick: true,
+  //   selectionType: SelectionType.RADIO,
+  //   title: "Topic 3",
+  // },
+  // ];
+
+  // readyLayers[0].childItems[0].childItems = layers.map((layer, idx) => {
+  //   return {
+  //     ...layer,
+  //     id: (Math.random() + 1).toString(36).substring(7),
+  //     isControlChecked: idx === 0,
+  //     selectionType: SelectionType.RADIO,
+  //   };
+  // });
+
+  // readyLayers[1].childItems[0].childItems = layers.map((layer, idx) => {
+  //   return {
+  //     ...layer,
+  //     id: (Math.random() + 1).toString(36).substring(7),
+  //     isControlChecked: idx === 0,
+  //     selectionType: SelectionType.RADIO,
+  //   };
+  // });
+
+  // readyLayers[0].childItems[1].childItems = layers.map((layer) => {
+  //   return {
+  //     ...layer,
+  //     id: (Math.random() + 1).toString(36).substring(7),
+  //     selectionType: SelectionType.CHECKBOX,
+  //   };
+  // });
+
+  // readyLayers[0].childItems[1].childItems[0].childItems = layers.map(
+  //   (layer) => {
+  //     return {
+  //       ...layer,
+  //       id: (Math.random() + 1).toString(36).substring(7),
+  //       selectionType: SelectionType.CHECKBOX,
+  //     };
+  //   },
+  // );
+
+  // readyLayers[2].childItems[0].childItems = layers.map((layer) => {
+  //   return {
+  //     ...layer,
+  //     id: (Math.random() + 1).toString(36).substring(7),
+  //     isControlChecked: false,
+  //     selectionType: SelectionType.RADIO,
+  //   };
+  // });
+
+  // readyLayers[2].childItems[1].childItems = layers.map((layer) => {
+  //   return {
+  //     ...layer,
+  //     id: (Math.random() + 1).toString(36).substring(7),
+  //     isControlChecked: false,
+  //     selectionType: SelectionType.RADIO,
+  //   };
+  // });
+
+  // console.log("READY LAYERS", readyLayers);
+
+  return (
+    <div className="max-h-80 overflow-scroll bg-white medium:w-largeMenu large:w-mediumMenu">
+      <LayerTree layers={layers} />
+    </div>
+  );
+}
+
+export default TopicMenu;

package/src/TopicMenu/index.tsx

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

package/src/icons/Cancel/Cancel.tsx

@@ -0,0 +1,21 @@
+function Cancel({ ...props }) {
+  return (
+    <svg
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g>
+        <path
+          d="M5.29289322,5.29289322 C5.68341751,4.90236893 6.31658249,4.90236893 6.70710678,5.29289322 L12,10.585 L17.2928932,5.29289322 C17.6533772,4.93240926 18.2206082,4.90467972 18.6128994,5.20970461 L18.7071068,5.29289322 C19.0976311,5.68341751 19.0976311,6.31658249 18.7071068,6.70710678 L13.415,12 L18.7071068,17.2928932 C19.0675907,17.6533772 19.0953203,18.2206082 18.7902954,18.6128994 L18.7071068,18.7071068 C18.3165825,19.0976311 17.6834175,19.0976311 17.2928932,18.7071068 L12,13.415 L6.70710678,18.7071068 C6.34662282,19.0675907 5.77939176,19.0953203 5.38710056,18.7902954 L5.29289322,18.7071068 C4.90236893,18.3165825 4.90236893,17.6834175 5.29289322,17.2928932 L10.585,12 L5.29289322,6.70710678 C4.93240926,6.34662282 4.90467972,5.77939176 5.20970461,5.38710056 Z"
+          fill="currentColor"
+        ></path>
+      </g>
+    </svg>
+  );
+}
+
+export default Cancel;

package/src/icons/Cancel/cancel.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/cancel</title>
+    <g id="iconfont/cancel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M5.29289322,5.29289322 C5.68341751,4.90236893 6.31658249,4.90236893 6.70710678,5.29289322 L12,10.585 L17.2928932,5.29289322 C17.6533772,4.93240926 18.2206082,4.90467972 18.6128994,5.20970461 L18.7071068,5.29289322 C19.0976311,5.68341751 19.0976311,6.31658249 18.7071068,6.70710678 L13.415,12 L18.7071068,17.2928932 C19.0675907,17.6533772 19.0953203,18.2206082 18.7902954,18.6128994 L18.7071068,18.7071068 C18.3165825,19.0976311 17.6834175,19.0976311 17.2928932,18.7071068 L12,13.415 L6.70710678,18.7071068 C6.34662282,19.0675907 5.77939176,19.0953203 5.38710056,18.7902954 L5.29289322,18.7071068 C4.90236893,18.3165825 4.90236893,17.6834175 5.29289322,17.2928932 L10.585,12 L5.29289322,6.70710678 C4.93240926,6.34662282 4.90467972,5.77939176 5.20970461,5.38710056 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/icons/Cancel/index.tsx

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

package/src/icons/Download/Download.tsx

@@ -0,0 +1,20 @@
+function Download({ ...props }) {
+  return (
+    <svg
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g>
+        <path
+          d="M21,16 C21.5522847,16 22,16.4477153 22,17 L22,20 C22,21.6568542 20.6568542,23 19,23 L5,23 C3.34314575,23 2,21.6568542 2,20 L2,17 C2,16.4477153 2.44771525,16 3,16 C3.55228475,16 4,16.4477153 4,17 L4,20 C4,20.5522847 4.44771525,21 5,21 L19,21 C19.5522847,21 20,20.5522847 20,20 L20,17 C20,16.4477153 20.4477153,16 21,16 Z M12,1 C12.5522847,1 13,1.44771525 13,2 L13,13.585 L15.2928932,11.2928932 C15.6533772,10.9324093 16.2206082,10.9046797 16.6128994,11.2097046 L16.7071068,11.2928932 C17.0976311,11.6834175 17.0976311,12.3165825 16.7071068,12.7071068 L12.7071068,16.7071068 C12.6786405,16.7355731 12.6484659,16.7623312 12.6167501,16.787214 C12.6098424,16.7927155 12.602603,16.7982466 12.5953066,16.8036654 C12.5711307,16.8215099 12.546275,16.8382813 12.5206602,16.8539326 C12.5086131,16.8613931 12.4963944,16.8685012 12.4840621,16.8753288 C12.4642939,16.8862061 12.4438914,16.8966234 12.4230991,16.9063462 C12.4060985,16.914321 12.3887956,16.9218036 12.371336,16.9287745 C12.3515792,16.9366843 12.3317977,16.9438775 12.3117364,16.9504533 C12.2968513,16.9552713 12.2814633,16.9599023 12.265993,16.9641549 C12.2444365,16.9701664 12.2227461,16.9753602 12.2007941,16.9798348 C12.1833753,16.9832978 12.165949,16.9863719 12.1484669,16.9889822 C12.1003621,16.9962388 12.0506203,17 12,17 L12.0852242,16.996384 C12.0679231,16.997855 12.050591,16.9988772 12.0332468,16.9994506 L12,17 C11.9888734,17 11.9777892,16.9998183 11.9667503,16.9994576 C11.9497336,16.9989053 11.9317345,16.9978436 11.9137692,16.9962979 C11.892114,16.9944666 11.8714753,16.9920328 11.8510388,16.9889807 C11.834051,16.9863719 11.8166247,16.9832978 11.7992742,16.9797599 C11.7772539,16.9753602 11.7555635,16.9701664 11.7341604,16.964279 C11.7185367,16.9599023 11.7031487,16.9552713 11.6878575,16.9502619 C11.6682023,16.9438775 11.6484208,16.9366843 11.6289415,16.928896 C11.6112044,16.9218036 11.5939015,16.914321 11.5767785,16.9063266 C11.5561086,16.8966234 11.5357061,16.8862061 11.515723,16.8751242 C11.5036056,16.8685012 11.4913869,16.8613931 11.4792912,16.8540045 C11.453725,16.8382813 11.4288693,16.8215099 11.4048407,16.8036865 C11.3656744,16.774687 11.3282873,16.7425008 11.2928932,16.7071068 L11.3832499,16.787214 C11.3515341,16.7623312 11.3213595,16.7355731 11.2928932,16.7071068 L7.29289322,12.7071068 C6.90236893,12.3165825 6.90236893,11.6834175 7.29289322,11.2928932 C7.68341751,10.9023689 8.31658249,10.9023689 8.70710678,11.2928932 L11,13.585 L11,2 C11,1.48716416 11.3860402,1.06449284 11.8833789,1.00672773 Z"
+          fill="currentColor"
+        ></path>
+      </g>
+    </svg>
+  );
+}
+
+export default Download;

package/src/icons/Download/download.svg

@@ -0,0 +1,15 @@
+<svg
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+      >
+        <path
+          d="M21,16 C21.5522847,16 22,16.4477153 22,17 L22,20 C22,21.6568542 20.6568542,23 19,23 L5,23 C3.34314575,23 2,21.6568542 2,20 L2,17 C2,16.4477153 2.44771525,16 3,16 C3.55228475,16 4,16.4477153 4,17 L4,20 C4,20.5522847 4.44771525,21 5,21 L19,21 C19.5522847,21 20,20.5522847 20,20 L20,17 C20,16.4477153 20.4477153,16 21,16 Z M12,1 C12.5522847,1 13,1.44771525 13,2 L13,13.585 L15.2928932,11.2928932 C15.6533772,10.9324093 16.2206082,10.9046797 16.6128994,11.2097046 L16.7071068,11.2928932 C17.0976311,11.6834175 17.0976311,12.3165825 16.7071068,12.7071068 L12.7071068,16.7071068 C12.6786405,16.7355731 12.6484659,16.7623312 12.6167501,16.787214 C12.6098424,16.7927155 12.602603,16.7982466 12.5953066,16.8036654 C12.5711307,16.8215099 12.546275,16.8382813 12.5206602,16.8539326 C12.5086131,16.8613931 12.4963944,16.8685012 12.4840621,16.8753288 C12.4642939,16.8862061 12.4438914,16.8966234 12.4230991,16.9063462 C12.4060985,16.914321 12.3887956,16.9218036 12.371336,16.9287745 C12.3515792,16.9366843 12.3317977,16.9438775 12.3117364,16.9504533 C12.2968513,16.9552713 12.2814633,16.9599023 12.265993,16.9641549 C12.2444365,16.9701664 12.2227461,16.9753602 12.2007941,16.9798348 C12.1833753,16.9832978 12.165949,16.9863719 12.1484669,16.9889822 C12.1003621,16.9962388 12.0506203,17 12,17 L12.0852242,16.996384 C12.0679231,16.997855 12.050591,16.9988772 12.0332468,16.9994506 L12,17 C11.9888734,17 11.9777892,16.9998183 11.9667503,16.9994576 C11.9497336,16.9989053 11.9317345,16.9978436 11.9137692,16.9962979 C11.892114,16.9944666 11.8714753,16.9920328 11.8510388,16.9889807 C11.834051,16.9863719 11.8166247,16.9832978 11.7992742,16.9797599 C11.7772539,16.9753602 11.7555635,16.9701664 11.7341604,16.964279 C11.7185367,16.9599023 11.7031487,16.9552713 11.6878575,16.9502619 C11.6682023,16.9438775 11.6484208,16.9366843 11.6289415,16.928896 C11.6112044,16.9218036 11.5939015,16.914321 11.5767785,16.9063266 C11.5561086,16.8966234 11.5357061,16.8862061 11.515723,16.8751242 C11.5036056,16.8685012 11.4913869,16.8613931 11.4792912,16.8540045 C11.453725,16.8382813 11.4288693,16.8215099 11.4048407,16.8036865 C11.3656744,16.774687 11.3282873,16.7425008 11.2928932,16.7071068 L11.3832499,16.787214 C11.3515341,16.7623312 11.3213595,16.7355731 11.2928932,16.7071068 L7.29289322,12.7071068 C6.90236893,12.3165825 6.90236893,11.6834175 7.29289322,11.2928932 C7.68341751,10.9023689 8.31658249,10.9023689 8.70710678,11.2928932 L11,13.585 L11,2 C11,1.48716416 11.3860402,1.06449284 11.8833789,1.00672773 Z"
+          fill="currentColor"
+        ></path>
+      </g>
+    </svg>

package/src/icons/Download/index.tsx

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

package/src/icons/Elevator/Elevator.tsx

@@ -2,9 +2,9 @@ function Elevator({ ...props }) {
   return (
     <svg
       fill="currentColor"
-      width="24px"
       height="24px"
       viewBox="0 0 24 24"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

package/src/icons/Menu/Menu.tsx

@@ -0,0 +1,32 @@
+import { SVGProps } from "preact/compat";
+
+function Menu(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="currentColor"
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g>
+        <path
+          d="M3,7 L21,7 C21.552,7 22,6.552 22,6 C22,5.448 21.552,5 21,5 L3,5 C2.448,5 2,5.448 2,6 C2,6.552 2.448,7 3,7"
+          fill="currentColor"
+        ></path>
+        <path
+          d="M3,19 L21,19 C21.552,19 22,18.552 22,18 C22,17.448 21.552,17 21,17 L3,17 C2.448,17 2,17.448 2,18 C2,18.552 2.448,19 3,19"
+          fill="currentColor"
+        ></path>
+        <path
+          d="M3,13 L21,13 C21.552,13 22,12.552 22,12 C22,11.448 21.552,11 21,11 L3,11 C2.448,11 2,11.448 2,12 C2,12.552 2.448,13 3,13"
+          fill="currentColor"
+        ></path>
+      </g>
+    </svg>
+  );
+}
+
+export default Menu;

package/src/icons/Menu/index.tsx

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

package/src/icons/Menu/menu.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/menue</title>
+    <g id="iconfont/menue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M3,7 L21,7 C21.552,7 22,6.552 22,6 C22,5.448 21.552,5 21,5 L3,5 C2.448,5 2,5.448 2,6 C2,6.552 2.448,7 3,7" id="Fill-1" fill="#000000"></path>
+        <path d="M3,19 L21,19 C21.552,19 22,18.552 22,18 C22,17.448 21.552,17 21,17 L3,17 C2.448,17 2,17.448 2,18 C2,18.552 2.448,19 3,19" id="Fill-3" fill="#000000"></path>
+        <path d="M3,13 L21,13 C21.552,13 22,12.552 22,12 C22,11.448 21.552,11 21,11 L3,11 C2.448,11 2,11.448 2,12 C2,12.552 2.448,13 3,13" id="Fill-5" fill="#000000"></path>
+    </g>
+</svg>

package/src/utils/constants.ts

@@ -0,0 +1,9 @@
+import { transformExtent } from "ol/proj";
+
+export const RVF_EXTENT_4326 = [7.5, 47.7, 8.45, 48.4];
+
+export const RVF_EXTENT_3857 = transformExtent(
+  RVF_EXTENT_4326,
+  "EPSG:4326",
+  "EPSG:3857",
+);

package/src/utils/createMobiDataBwWfsLayer.ts

@@ -0,0 +1,120 @@
+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, Stroke, Style, Text } from "ol/style";
+
+function createMobiDataBwWfsLayer(
+  name: string,
+  color: string,
+  layerOptions: Options = {
+    minZoom: 17.99,
+  },
+): VectorLayer<Vector<Feature<Point>>> {
+  const source = new Vector({
+    format: new GeoJSON(),
+    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&srsname=EPSG:3857&" +
+        "bbox=" +
+        extent.join(",") +
+        ",EPSG:3857"
+      );
+    },
+  });
+  const style = new Style({
+    image: new Circle({
+      declutterMode: "declutter",
+      displacement: [10, 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: 10,
+      offsetY: -10,
+      // stroke: new Stroke({ color: "black", width: 1 }),
+      // text: ["to-string", ["get", "num_vehicles_available"]],
+    }),
+  });
+
+  const styleFunction = (feature) => {
+    const clone = 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 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"]],
+    // },
+  });
+
+  source.on("addfeature", function (event) {
+    const feature = event.feature;
+    feature.setStyle(styleFunction);
+  });
+  return layer;
+}
+
+export default createMobiDataBwWfsLayer;