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

package/src/icons/DownOpen/DownOpen.tsx

@@ -0,0 +1,24 @@
+function DownOpen({ ...props }) {
+  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="M15.7389427,5.27697525 C16.129467,5.66749954 16.129467,6.30066452 15.7389427,6.69118881 L10.414,12.015082 L15.7389427,17.3406471 C16.0994267,17.7011311 16.1271562,18.2683621 15.8221313,18.6606533 L15.7389427,18.7548607 C15.3484184,19.145385 14.7152534,19.145385 14.3247292,18.7548607 L8.29289322,12.7230247 C7.90236893,12.3325005 7.90236893,11.6993355 8.29289322,11.3088112 L14.3247292,5.27697525 C14.7152534,4.88645096 15.3484184,4.88645096 15.7389427,5.27697525 Z"
+          fillRule="nonzero"
+          id="Combined-Shape-Copy"
+          transform="translate(12.0159, 12.0159) rotate(270) translate(-12.0159, -12.0159)"
+        ></path>
+      </g>
+    </svg>
+  );
+}
+
+export default DownOpen;

package/src/icons/DownOpen/down-open.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/down-open</title>
+    <g id="iconfont/down-open" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.7389427,5.27697525 C16.129467,5.66749954 16.129467,6.30066452 15.7389427,6.69118881 L10.414,12.015082 L15.7389427,17.3406471 C16.0994267,17.7011311 16.1271562,18.2683621 15.8221313,18.6606533 L15.7389427,18.7548607 C15.3484184,19.145385 14.7152534,19.145385 14.3247292,18.7548607 L8.29289322,12.7230247 C7.90236893,12.3325005 7.90236893,11.6993355 8.29289322,11.3088112 L14.3247292,5.27697525 C14.7152534,4.88645096 15.3484184,4.88645096 15.7389427,5.27697525 Z" id="Combined-Shape-Copy" fill="#000000" fill-rule="nonzero" transform="translate(12.0159, 12.0159) rotate(270) translate(-12.0159, -12.0159)"></path>
+    </g>
+</svg>

package/src/icons/DownOpen/index.tsx

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

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/icons/Ok/ok-grey.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" strokeviewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/ok</title>
+    <g id="iconfont/ok" stroke="#7C7C7C" fill="#7C7C7C" stroke-width="1">
+        <path d="M8.99793431,17.9985348 L8.96211481,17.9959585 C8.73926265,17.9759185 8.52175215,17.8813416 8.3500159,17.71195 L2.79624371,12.2104415 C2.40387772,11.8217676 2.40088466,11.1886097 2.78955853,10.7962437 C3.17823239,10.4038777 3.8113903,10.4008847 4.20375629,10.7895585 L9.04399993,15.5834862 L19.2409309,5.24625614 C19.6287619,4.85305703 20.2619119,4.84870533 20.6551111,5.23653636 C21.0483102,5.62436739 21.0526619,6.25751741 20.6648308,6.65071652 L9.76419606,17.7022302 C9.70090516,17.7663971 9.63108102,17.8202084 9.55683265,17.8636496 C9.5174093,17.8867215 9.47662371,17.9069178 9.43490359,17.9241713 C9.38857789,17.9433279 9.34109351,17.9588594 9.29289059,17.9707599 C9.24768974,17.9819175 9.20193892,17.9898714 9.15591761,17.9946414 C9.10378262,18.000016 9.05184796,18.0013348 9.00007711,17.998649 Z"></path>
+    </g>
+</svg>

package/src/icons/Ok/ok.svg

@@ -0,0 +1,4 @@
+<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g stroke="currentColor" fill="currentColor" stroke-width="1">
+        <path d="M8.99793431,17.9985348 L8.96211481,17.9959585 C8.73926265,17.9759185 8.52175215,17.8813416 8.3500159,17.71195 L2.79624371,12.2104415 C2.40387772,11.8217676 2.40088466,11.1886097 2.78955853,10.7962437 C3.17823239,10.4038777 3.8113903,10.4008847 4.20375629,10.7895585 L9.04399993,15.5834862 L19.2409309,5.24625614 C19.6287619,4.85305703 20.2619119,4.84870533 20.6551111,5.23653636 C21.0483102,5.62436739 21.0526619,6.25751741 20.6648308,6.65071652 L9.76419606,17.7022302 C9.70090516,17.7663971 9.63108102,17.8202084 9.55683265,17.8636496 C9.5174093,17.8867215 9.47662371,17.9069178 9.43490359,17.9241713 C9.38857789,17.9433279 9.34109351,17.9588594 9.29289059,17.9707599 C9.24768974,17.9819175 9.20193892,17.9898714 9.15591761,17.9946414 C9.10378262,18.000016 9.05184796,18.0013348 9.00007711,17.998649 Z"></path>
+    </g></svg>

package/src/icons/Scooter/scooter.svg

@@ -0,0 +1,10 @@
+<?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>verkehrstraeger/verkehrstraeger-scooter-2px</title>
+    <g id="verkehrstraeger/verkehrstraeger-scooter-2px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-5" transform="translate(0.924691, 2.550483)" fill="#FFFFFF">
+            <path d="M22.1163,17.8613853 L21.3073,14.8423853 L20.5203,11.9043853 C20.3773,11.3713853 19.8293,11.0543853 19.2953,11.1973853 C18.7623,11.3403853 18.4453,11.8893853 18.5883,12.4223853 L19.8933,17.2923853 L20.1843,18.3793853 C20.3273,18.9123853 20.8753,19.2293853 21.4093,19.0863853 C21.9423,18.9433853 22.2593,18.3943853 22.1163,17.8613853" id="Fill-1"></path>
+            <path d="M5.955,17.1213853 C5.544,17.4163853 5.044,17.5953853 4.5,17.5953853 C3.956,17.5953853 3.456,17.4163853 3.045,17.1213853 C2.876,16.9993853 2.727,16.8543853 2.593,16.6953853 C2.228,16.2603853 2,15.7073853 2,15.0953853 C2,14.4833853 2.228,13.9303853 2.593,13.4963853 C2.71,13.3573853 2.839,13.2323853 2.982,13.1213853 C3.404,12.7963853 3.926,12.5953853 4.5,12.5953853 C5.074,12.5953853 5.596,12.7963853 6.018,13.1213853 C6.357,13.3823853 6.634,13.7213853 6.803,14.1213853 L4.593,14.1213853 C4.041,14.1213853 3.593,14.5693853 3.593,15.1213853 C3.593,15.6733853 4.041,16.1213853 4.593,16.1213853 L6.775,16.1213853 C6.593,16.5233853 6.309,16.8663853 5.955,17.1213853 M19.072,7.83538529 C19.201,7.61338529 19.244,7.34238529 19.173,7.07538529 L18.858,5.90138529 L18.544,4.72838529 L17.989,2.65738529 L20.472,1.99238529 L20.57,1.96638529 C21.104,1.82338529 21.42,1.27438529 21.277,0.741385292 C21.135,0.207385292 20.586,-0.108614708 20.053,0.0343852923 L19.954,0.0603852923 L13.057,1.90838529 L12.325,2.10438529 C11.792,2.24738529 11.475,2.79638529 11.618,3.32938529 C11.756,3.84438529 12.273,4.14738529 12.788,4.04038529 C12.807,4.03638529 12.825,4.04138529 12.843,4.03638529 L13.575,3.84038529 L16.058,3.17538529 L16.094,3.31338529 L16.926,6.41938529 L17.144,7.22938529 L15.326,10.3773853 L13.742,13.1213853 L13.164,14.1213853 L8.888,14.1213853 C8.81,13.7683853 8.681,13.4373853 8.526,13.1213853 C8.383,12.8323853 8.21,12.5633853 8.012,12.3133853 C7.187,11.2743853 5.929,10.5953853 4.5,10.5953853 C2.015,10.5953853 0,12.6103853 0,15.0953853 C0,17.5803853 2.015,19.5953853 4.5,19.5953853 C6.252,19.5953853 7.754,18.5833853 8.498,17.1213853 C8.658,16.8053853 8.789,16.4743853 8.872,16.1213853 L10.457,16.1213853 L13.495,16.1213853 C13.895,16.1213853 14.426,15.9353853 14.634,15.5763853 L15.383,14.2783853 L15.825,13.5123853 L17.741,10.1943853 L17.942,9.84638529 L19.029,7.96438529 C19.052,7.92338529 19.055,7.87738529 19.072,7.83538529" id="Fill-3"></path>
+        </g>
+    </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: [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 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;

package/src/utils/createSharedMobilityLayer.ts

@@ -0,0 +1,165 @@
+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, Icon, Stroke, Style, Text } from "ol/style";
+
+// @ts-expect-error -  load svg as data url
+import bicycle from "../icons/Bicycle/verkehrstraeger-rad-2px-white.svg";
+// @ts-expect-error -  load svg as data url
+import car from "../icons/Car/verkehrstraeger-auto-2px-white.svg";
+// @ts-expect-error -  load svg as data url
+import cargoBicycle from "../icons/CargoBicycle/verkehrstraeger-lastenrad-2px-white.svg";
+// @ts-expect-error -  load svg as data url
+import scooter from "../icons/Scooter/scooter.svg";
+
+const iconByFormFactor = {
+  bicycle,
+  car,
+  cargo_bicycle: cargoBicycle,
+  scooter,
+};
+
+function createSharedMobilityLayer(
+  name: string,
+  color: string,
+  layerOptions: Options = {
+    minZoom: 17.99,
+  },
+): VectorLayer<Vector<Feature<Point>>> {
+  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&srsname=EPSG:3857&" +
+        "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);
+          if (features) {
+            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 = 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: 17,
+      }),
+    });
+  });
+
+  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 clusterSource = new Cluster({
+    distance: 40,
+    source: source,
+  });
+
+  const styleFunction = (feature) => {
+    const clone = style.clone();
+
+    clone.getText().setText(feature.get("features").length);
+    clone.setZIndex(parseInt(getUid(feature), 10));
+
+    const formFactor =
+      feature.get("features")?.[0].get?.("form_factor") || "scooter";
+
+    return [clone, backgroundStyle, iconStyleByFormFactor[formFactor]];
+  };
+
+  const layer = new VectorLayer({
+    // @ts-expect-error - custom properties
+    isQueryable: true,
+    name,
+    source: clusterSource,
+    style: styleFunction,
+    ...layerOptions,
+  });
+
+  clusterSource.on("addfeature", function (event) {
+    event.feature?.setStyle(styleFunction);
+  });
+
+  return layer;
+}
+
+export default createSharedMobilityLayer;