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

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -0,0 +1,146 @@
+import { Feature, MapBrowserEvent } from "ol";
+import { GeoJSON } from "ol/format";
+import { unByKey } from "ol/Observable";
+import { toLonLat } from "ol/proj";
+import { useCallback, useEffect } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+import MobilityEvent from "../utils/MobilityEvent";
+
+const geojson = new GeoJSON();
+
+function SingleClickListener() {
+  const {
+    map,
+    realtimeLayer,
+    setStationId,
+    setTrainId,
+    stationId,
+    stationsLayer,
+    tenant,
+    trainId,
+  } = useMapContext();
+  const { setSelectedFeature, setSelectedFeatures } = useRvfContext();
+
+  const onPointerMove = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === realtimeLayer;
+        },
+      });
+      realtimeLayer?.highlight(realtimeFeature as Feature);
+
+      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === stationsLayer;
+        },
+      });
+
+      const [stationFeature] = stationsFeatures.filter((feat) => {
+        return feat.get("tralis_network")?.includes(tenant);
+      });
+
+      // Send all the features under the cursor
+      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l.get("isQueryable");
+        },
+      }) as Feature[];
+
+      evt.map.getTargetElement().style.cursor =
+        realtimeFeature || stationFeature || features?.length
+          ? "pointer"
+          : "default";
+    },
+    [realtimeLayer, stationsLayer, tenant],
+  );
+
+  const onSingleClick = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === realtimeLayer;
+        },
+      });
+
+      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === stationsLayer;
+        },
+      });
+      const [stationFeature] = stationsFeatures.filter((feat) => {
+        return feat.get("tralis_network")?.includes(tenant);
+      });
+
+      const newStationId = stationFeature?.get("uid");
+
+      const newTrainId = realtimeFeature?.get("train_id");
+
+      if (newStationId && stationId !== newStationId) {
+        setStationId(newStationId);
+        setTrainId(null);
+      } else if (newTrainId && newTrainId !== trainId) {
+        setTrainId(realtimeFeature.get("train_id"));
+        setStationId(null);
+      } else {
+        setTrainId(null);
+        setStationId(null);
+      }
+
+      // Send all the features under the cursor
+      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l.get("isQueryable");
+        },
+      }) as Feature[];
+      evt.map.getTargetElement().dispatchEvent(
+        new MobilityEvent("singleclick", {
+          ...evt,
+          features: geojson.writeFeaturesObject(features),
+          lonlat: toLonLat(evt.coordinate),
+        }),
+      );
+      // feature.get("form_factor"); //free float
+      // feature.get("num_vehicles_available"); // wfs livedata
+      // feature.get("provider_name"); // station sharing
+
+      if (newStationId || newTrainId || !features.length) {
+        setSelectedFeature(null);
+        setSelectedFeatures([]);
+      } else {
+        setSelectedFeatures(features);
+        setSelectedFeature(features[0]);
+      }
+    },
+    [
+      stationId,
+      trainId,
+      realtimeLayer,
+      stationsLayer,
+      tenant,
+      setStationId,
+      setTrainId,
+      setSelectedFeature,
+      setSelectedFeatures,
+    ],
+  );
+
+  useEffect(() => {
+    const key = map?.on("singleclick", onSingleClick);
+    return () => {
+      unByKey(key);
+    };
+  }, [map, onSingleClick]);
+
+  useEffect(() => {
+    const key = map?.on("pointermove", onPointerMove);
+    return () => {
+      unByKey(key);
+    };
+  }, [map, onPointerMove]);
+
+  return null;
+}
+export default SingleClickListener;

package/src/RvfSingleClickListener/index.tsx

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

package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx

@@ -0,0 +1,41 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfTarifZonenLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      layersFilter: ({ metadata, source, "source-layer": sourceLayer }) => {
+        return (
+          metadata?.["rvf.filter"] === "tarifzonen" ||
+          (source === "rvf" && sourceLayer === "tarifzonen")
+        );
+      },
+      maplibreLayer: baseLayer,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfTarifZonenLayer);

package/src/RvfTarifZonenLayer/index.tsx

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

package/src/RvfTopics/RvfTopics.tsx

@@ -0,0 +1,47 @@
+import { Group } from "ol/layer";
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+
+import RvfLayerTree from "../RvfLayerTree";
+import { SelectionType } from "../RvfLayerTree/TreeItem/TreeItem";
+import useMapContext from "../utils/hooks/useMapContext";
+
+export type RvfTopicsProps = {} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfTopics(props: RvfTopicsProps) {
+  const { map } = useMapContext();
+  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"),
+      };
+    });
+
+  return <RvfLayerTree layers={layers} {...props} />;
+}
+
+export default memo(RvfTopics);

package/src/RvfTopics/index.tsx

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

package/src/RvfZoomButtons/RvfZoomButtons.tsx

@@ -1,9 +1,10 @@
+import { unByKey } from "ol/Observable";
 import { memo } from "preact/compat";
-import { useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 
 import Minus from "../icons/Minus";
 import Plus from "../icons/Plus";
-import RvfButton from "../RvfButton";
+import RvfIconButton from "../RvfIconButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
 function RvfZoomButtons() {
@@ -11,50 +12,56 @@ function RvfZoomButtons() {
   const [isZoomInDisabled, setIsZoomInDisabled] = useState(false);
   const [isZoomOutDisabled, setIsZoomOutDisabled] = useState(false);
 
-  const handleZoomIn = () => {
-    const view = map.getView();
-    const zoom = view.getZoom();
-    const maxzoom = view.getMaxZoom();
-    const minzoom = view.getMinZoom();
-
-    if (maxzoom && zoom === Number(maxzoom)) {
-      setIsZoomInDisabled(true);
+  const handleZoomIn = useCallback(() => {
+    if (!map?.getView()) {
       return;
     }
-
+    const view = map.getView();
+    const zoom = view.getZoom();
     view.setZoom(zoom + 1);
+  }, [map]);
 
-    if (!minzoom || view.getZoom() > Number(minzoom)) {
-      setIsZoomOutDisabled(false);
+  const handleZoomOut = useCallback(() => {
+    if (!map?.getView()) {
+      return;
     }
-  };
-
-  const handleZoomOut = () => {
     const view = map.getView();
     const zoom = view.getZoom();
-    const maxzoom = view.getMaxZoom();
-    const minzoom = view.getMinZoom();
+    view.setZoom(zoom - 1);
+  }, [map]);
 
-    if (minzoom && zoom === Number(minzoom)) {
-      setIsZoomOutDisabled(true);
-      return;
-    }
+  useEffect(() => {
+    const key = map?.on("moveend", () => {
+      const view = map.getView();
+      const zoom = view.getZoom();
+      const maxzoom = view.getMaxZoom();
+      const minzoom = view.getMinZoom();
 
-    view.setZoom(zoom - 1);
+      if (maxzoom && zoom === Number(maxzoom)) {
+        setIsZoomInDisabled(true);
+      } else {
+        setIsZoomInDisabled(false);
+      }
 
-    if (!maxzoom || view.getZoom() < Number(maxzoom)) {
-      setIsZoomInDisabled(false);
-    }
-  };
+      if (minzoom && zoom === Number(minzoom)) {
+        setIsZoomOutDisabled(true);
+      } else {
+        setIsZoomOutDisabled(false);
+      }
+    });
+    return () => {
+      unByKey(key);
+    };
+  }, [map]);
 
   return (
     <>
-      <RvfButton
+      <RvfIconButton
         disabled={isZoomInDisabled}
         Icon={Plus}
         onClick={handleZoomIn}
       />
-      <RvfButton
+      <RvfIconButton
         disabled={isZoomOutDisabled}
         Icon={Minus}
         onClick={handleZoomOut}

package/src/Search/Search.tsx

@@ -1,3 +1,6 @@
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
 import StopsSearch from "../StopsSearch";
 import centerOnStation from "../utils/centerOnStation";
 import useMapContext from "../utils/hooks/useMapContext";
@@ -5,14 +8,13 @@ import useMapContext from "../utils/hooks/useMapContext";
 function Search() {
   const { apikey, map, stopsurl } = useMapContext();
 
-  return (
-    <StopsSearch
-      apikey={apikey}
-      onselect={(selected) => {
-        return centerOnStation(selected, map);
-      }}
-      url={stopsurl}
-    />
+  const onSelect = useCallback(
+    (selected) => {
+      return centerOnStation(selected, map);
+    },
+    [map],
   );
+
+  return <StopsSearch apikey={apikey} onselect={onSelect} url={stopsurl} />;
 }
-export default Search;
+export default memo(Search);

package/src/SingleClickListener/index.tsx

@@ -1 +1 @@
-export { default } from "./SingleClickListener";
+export { default } from "../RvfSingleClickListener";

package/src/StationsLayer/StationsLayer.tsx

@@ -31,7 +31,6 @@ function StationsLayer(props: MaplibreStyleLayerOptions) {
 
     return () => {
       map.removeLayer(layer);
-      layer.detachFromMap();
     };
   }, [map, setStationsLayer, layer]);
 

package/src/StopsSearch/StopsSearch.tsx

@@ -18,7 +18,7 @@ import tailwind from "../style.css";
 import i18n from "../utils/i18n";
 import MobilityEvent from "../utils/MobilityEvent";
 
-export type SearchProps = {
+export type MobilityStopsSearchProps = {
   apikey: string;
   bbox?: string;
   countrycode?: string;
@@ -58,13 +58,45 @@ function StopsSearch({
   prefagencies,
   reflocation,
   url = "https://api.geops.io/stops/v1/",
-}: SearchProps) {
+}: MobilityStopsSearchProps) {
   const { t } = i18n;
   const [query, setQuery] = useState("");
   const [selectedStation, setSelectedStation] = useState<StationFeature>();
   const [results, setResults] = useState<StopsResponse["features"]>(undefined);
   const myRef = useRef<HTMLDivElement>();
 
+  useEffect(() => {
+    myRef.current?.dispatchEvent(
+      new MobilityEvent<MobilityStopsSearchProps>("mwc:attribute", {
+        apikey,
+        bbox,
+        countrycode,
+        event,
+        field,
+        limit,
+        mots,
+        onselect,
+        params,
+        prefagencies,
+        reflocation,
+        url,
+      }),
+    );
+  }, [
+    apikey,
+    bbox,
+    countrycode,
+    event,
+    field,
+    limit,
+    mots,
+    onselect,
+    params,
+    prefagencies,
+    reflocation,
+    url,
+  ]);
+
   const api: StopsAPI = useMemo(() => {
     return new StopsAPI({ apiKey: apikey, url: url });
   }, [apikey, url]);
@@ -78,9 +110,9 @@ function StopsSearch({
           bubbles: true,
         },
       );
-      if (myRef.current) {
-        myRef.current.dispatchEvent(customEvt);
-      }
+
+      myRef.current?.dispatchEvent(customEvt);
+
       if (onselect && typeof onselect === "function") {
         onselect(station);
       }
@@ -208,7 +240,7 @@ function StopsSearch({
         </div>
       </div>
 
-      <div className="mt-[-4px] flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
+      <div className="-mt-4px flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
         {results && results.length === 0 && (
           <div
             className={

package/src/icons/ArrowDown/ArrowDown.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from "preact/compat";
+
+function ArrowDown(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}
+    >
+      <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"
+        transform="translate(12.0159, 12.0159) rotate(270) translate(-12.0159, -12.0159)"
+      ></path>
+    </svg>
+  );
+}
+
+export default ArrowDown;

package/src/icons/ArrowDown/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/ArrowDown/index.tsx

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

package/src/icons/ArrowUp/ArrowUp.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from "preact/compat";
+
+function ArrowUp(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}
+    >
+      <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"
+        transform="translate(12.0159, 12.0159) rotate(450) translate(-12.0159, -12.0159)"
+      ></path>
+    </svg>
+  );
+}
+
+export default ArrowUp;

package/src/icons/ArrowUp/index.tsx

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

package/src/icons/ArrowUp/up-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/up-open</title>
+    <g id="iconfont/up-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(450) translate(-12.0159, -12.0159)"></path>
+    </g>
+</svg>

package/src/icons/Bicycle/verkehrstraeger-rad-2px-white.svg

@@ -0,0 +1,19 @@
+<?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-rad-2px</title>
+    <defs>
+        <polygon id="path-1" points="0 0 22.9996 0 22.9996 15.0753189 0 15.0753189"></polygon>
+    </defs>
+    <g id="verkehrstraeger/verkehrstraeger-rad-2px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-6" transform="translate(0.500200, 6.004653)">
+            <path d="M6.4996,5.57581889 L7.5946,5.57581889 L8.4996,5.57581889 C9.0516,5.57581889 9.4996,5.12781889 9.4996,4.57581889 C9.4996,4.02381889 9.0516,3.57581889 8.4996,3.57581889 L6.4996,3.57581889 C6.4806,3.57581889 6.4646,3.58581889 6.4466,3.58681889 C5.9206,3.61581889 5.4996,4.04281889 5.4996,4.57581889 C5.4996,5.12781889 5.9476,5.57581889 6.4996,5.57581889" id="Fill-1" fill="#ffffff"></path>
+            <g id="Group-5">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Clip-4"></g>
+                <path d="M19.36,12.9143189 C19.091,13.0133189 18.803,13.0753189 18.5,13.0753189 C17.864,13.0753189 17.29,12.8313189 16.849,12.4403189 C16.332,11.9823189 16,11.3213189 16,10.5753189 C16,10.0033189 16.199,9.48231889 16.523,9.06131889 L17.62,10.9623189 C17.819,11.3063189 18.191,11.4793189 18.562,11.4513189 C18.707,11.4413189 18.852,11.4063189 18.986,11.3283189 C19.121,11.2513189 19.223,11.1433189 19.305,11.0233189 C19.515,10.7153189 19.551,10.3063189 19.352,9.96231889 L18.276,8.09831889 C18.351,8.09131889 18.423,8.07531889 18.5,8.07531889 C19.033,8.07531889 19.524,8.24531889 19.93,8.52931889 C20.575,8.98231889 21,9.72831889 21,10.5753189 C21,11.3543189 20.636,12.0413189 20.078,12.4993189 L19.36,12.9143189 Z M7,10.5753189 C7,11.9563189 5.88,13.0753189 4.5,13.0753189 C3.119,13.0753189 2,11.9563189 2,10.5753189 C2,9.19531889 3.119,8.07531889 4.5,8.07531889 C5.067,8.07531889 5.585,8.27231889 6.004,8.59131889 L3.866,9.82531889 C3.387,10.1023189 3.223,10.7133189 3.5,11.1923189 C3.776,11.6703189 4.387,11.8343189 4.866,11.5583189 L6.976,10.3393189 C6.983,10.4183189 7,10.4953189 7,10.5753189 L7,10.5753189 Z M18.514,6.07731889 C18.509,6.07731889 18.505,6.07531889 18.5,6.07531889 C18.054,6.07531889 17.633,6.16031889 17.227,6.28131889 L15.807,3.82131889 L14.845,2.15531889 L15.551,1.96631889 C15.727,1.91931889 15.866,1.81831889 15.986,1.69831889 C16.231,1.45431889 16.354,1.10031889 16.258,0.741318889 C16.115,0.208318889 15.567,-0.108681111 15.034,0.0343188886 L15.027,0.0363188886 L13.102,0.552318889 C12.615,0.682318889 12.317,1.15731889 12.376,1.64331889 C12.381,1.68831889 12.398,1.78231889 12.399,1.78531889 C12.419,1.89431889 12.448,2.00331889 12.506,2.10531889 L13.689,4.15431889 L12.93,4.59231889 L10.5,5.99531889 L9.495,6.57531889 L8.503,7.14831889 L7.809,7.54931889 C7.444,7.14931889 7.008,6.82331889 6.521,6.57531889 C5.911,6.26631889 5.23,6.07531889 4.5,6.07531889 C2.626,6.07531889 1.023,7.22131889 0.345,8.84931889 C0.124,9.38131889 0,9.96331889 0,10.5753189 C0,12.8573189 1.704,14.7223189 3.906,15.0163189 C4.102,15.0423189 4.296,15.0753189 4.5,15.0753189 C6.985,15.0753189 9,13.0613189 9,10.5753189 C9,10.1263189 8.914,9.70131889 8.791,9.29131889 L9.503,8.88031889 L14.689,5.88631889 L15.482,7.25831889 C14.577,8.08131889 14,9.25631889 14,10.5753189 C14,11.6813189 14.414,12.6813189 15.076,13.4643189 C15.464,13.9243189 15.938,14.3023189 16.48,14.5773189 C17.09,14.8853189 17.769,15.0753189 18.5,15.0753189 C20.899,15.0753189 22.841,13.1933189 22.974,10.8273189 C22.979,10.7423189 23,10.6623189 23,10.5753189 C23,8.09531889 20.992,6.08531889 18.514,6.07731889 L18.514,6.07731889 Z" id="Fill-3" fill="#ffffff" mask="url(#mask-2)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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/Car/verkehrstraeger-auto-2px-white.svg

@@ -0,0 +1,14 @@
+<?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-auto-2px</title>
+    <g id="verkehrstraeger/verkehrstraeger-auto-2px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-13" transform="translate(1.000000, 5.009165)" fill="#ffffff">
+            <path d="M17,10 C17.552,10 18,10.448 18,11 C18,11.552 17.552,12 17,12 C16.448,12 16,11.552 16,11 C16,10.448 16.448,10 17,10" id="Fill-1"></path>
+            <path d="M17,12 C17.552,12 18,11.552 18,11 C18,10.448 17.552,10 17,10 C16.448,10 16,10.448 16,11 C16,11.552 16.448,12 17,12" id="Fill-3"></path>
+            <path d="M5,12 C4.448,12 4,11.552 4,11 C4,10.448 4.448,10 5,10 C5.552,10 6,10.448 6,11 C6,11.552 5.552,12 5,12" id="Fill-5"></path>
+            <path d="M5,10 C4.448,10 4,10.448 4,11 C4,11.552 4.448,12 5,12 C5.552,12 6,11.552 6,11 C6,10.448 5.552,10 5,10" id="Fill-7"></path>
+            <path d="M15,12.9959 L15,12.9999 L15.061,12.9999 C15.054,12.9999 15.048,12.9959 15.041,12.9959 L15,12.9959 Z" id="Fill-9"></path>
+            <path d="M19,9 L19,13 L19,14 C19,14.552 18.552,15 18,15 L16.041,15 L16.041,13.996 C16.041,13.451 15.603,13.011 15.061,13 L15,13 L15,12.996 L7.048,12.996 C6.496,12.996 6.048,13.444 6.048,13.996 L6.048,15 L4,15 C3.448,15 3,14.552 3,14 L3,13 L3,9 L3.435,8 L3.852,7.044 L5,7.618 L5.342,7.789 L5.511,7.864 C5.742,7.954 5.988,8 6.236,8 L15.764,8 L15.95,7.991 C16.196,7.968 16.436,7.9 16.658,7.789 L17,7.618 L18.169,7.034 L18.577,8 L19,9 Z M5,4.406 L5.786,2.601 C5.945,2.236 6.305,2 6.703,2 L15.378,2 C15.78,2 16.142,2.24 16.299,2.611 L17,4.269 L17.388,5.188 L17,5.382 L15.764,6 L6.236,6 L5,5.382 L4.651,5.208 L5,4.406 Z M21,5 L19.48,5 L19.058,4 L18.141,1.832 C17.672,0.721 16.583,0 15.378,0 L6.703,0 C5.509,0 4.429,0.708 3.953,1.802 L2.996,4 L2.56,5 L1,5 C0.448,5 0,5.448 0,6 C0,6.552 0.448,7 1,7 L1.689,7 L1.254,8 L1.166,8.202 C1.057,8.453 1,8.725 1,9 L1,14 C1,15.657 2.343,17 4,17 L6.048,17 L6.197,16.995 C7.232,16.918 8.048,16.054 8.047,14.995 L14.04,14.995 C14.041,16.105 14.936,17 16.041,17 L18,17 C19.657,17 21,15.657 21,14 L21,9 C21,8.732 20.946,8.468 20.842,8.221 L20.749,8 L20.326,7 L21,7 C21.552,7 22,6.552 22,6 C22,5.448 21.552,5 21,5 L21,5 Z" id="Fill-11"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/CargoBicycle/verkehrstraeger-lastenrad-2px-white.svg

@@ -0,0 +1,27 @@
+<?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-lastenrad-2px</title>
+    <defs>
+        <polygon id="path-1" points="0 0 22.85 0 22.85 15.162 0 15.162"></polygon>
+        <polygon id="path-3" points="-3.55271368e-15 0 6.9995 0 6.9995 7 -3.55271368e-15 7"></polygon>
+    </defs>
+    <g id="verkehrstraeger/verkehrstraeger-lastenrad-2px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-9" transform="translate(0.575000, 5.834005)">
+            <path d="M2.3505,5.5747 L4.1625,5.5747 L4.3505,5.5747 C4.8465,5.5747 5.2405,5.2067 5.3185,4.7327 C5.3275,4.6797 5.3505,4.6307 5.3505,4.5747 C5.3505,4.2537 5.1895,3.9817 4.9545,3.7987 C4.7955,3.6747 4.6055,3.5917 4.3895,3.5827 C4.3765,3.5817 4.3645,3.5747 4.3505,3.5747 L3.6265,3.5747 L2.3505,3.5747 C1.7985,3.5747 1.3505,4.0227 1.3505,4.5747 C1.3505,4.6387 1.3755,4.6937 1.3865,4.7547 C1.4745,5.2177 1.8625,5.5747 2.3505,5.5747" id="Fill-1" fill="#ffffff"></path>
+            <g id="Group-5">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Clip-4"></g>
+                <path d="M11.0967,7.8542 L10.2177,4.5742 L9.9497,3.5742 L14.2027,3.5742 L18.2647,3.5742 L20.5897,3.5742 L20.3217,4.5742 L20.0887,5.4452 L17.5837,6.1162 L15.0647,6.7912 L11.0967,7.8542 Z M6.0477,12.6112 C5.6207,12.9512 5.0877,13.1622 4.4997,13.1622 C3.8807,13.1622 3.3207,12.9282 2.8847,12.5552 C2.3477,12.0962 1.9997,11.4232 1.9997,10.6622 C1.9997,10.3682 2.0597,10.0892 2.1537,9.8272 C2.4977,8.8592 3.4137,8.1622 4.4997,8.1622 C4.6247,8.1622 4.7447,8.1812 4.8657,8.1992 C5.5017,8.2932 6.0537,8.6242 6.4397,9.1022 L5.1967,9.4352 L4.5367,9.6122 C4.0037,9.7552 3.6867,10.3032 3.8297,10.8362 C3.9727,11.3702 4.5207,11.6872 5.0547,11.5442 L5.7147,11.3672 L6.9627,11.0322 C6.8667,11.6722 6.5317,12.2262 6.0477,12.6112 L6.0477,12.6112 Z M18.3477,7.9822 L21.0857,7.2482 C21.1857,7.2212 21.2707,7.1682 21.3537,7.1152 C21.3827,7.1012 21.4107,7.0902 21.4377,7.0732 C21.4407,7.0712 21.4427,7.0682 21.4457,7.0672 C21.6497,6.9372 21.8117,6.7392 21.8797,6.4872 L22.3917,4.5742 L22.6017,3.7942 L22.7987,3.0582 C22.8277,2.9482 22.8267,2.8382 22.8187,2.7312 C22.8277,2.6782 22.8507,2.6302 22.8507,2.5742 C22.8507,2.0812 22.4857,1.6892 22.0157,1.6082 C21.9597,1.5982 21.9087,1.5742 21.8507,1.5742 L18.8007,1.5742 L13.6667,1.5742 L13.2537,1.5742 L10.8047,1.5742 L9.4137,1.5742 L9.1907,0.7402 C9.1737,0.6782 9.1357,0.6302 9.1087,0.5742 C8.9597,0.2672 8.6807,0.0512 8.3497,0.0092 C8.2197,-0.0088 8.0847,-0.0028 7.9507,0.0332 L6.0187,0.5512 C5.4857,0.6942 5.1687,1.2422 5.3117,1.7762 C5.4547,2.3092 6.0027,2.6262 6.5367,2.4832 L7.3507,2.2652 L7.5167,2.2202 L7.7397,3.0522 L7.9977,4.0152 L8.1477,4.5742 L9.1647,8.3722 L8.4567,8.5612 C7.9907,7.6862 7.2577,6.9802 6.3507,6.5692 C5.7847,6.3132 5.1617,6.1622 4.4997,6.1622 C4.4397,6.1622 4.3837,6.1772 4.3247,6.1802 C3.7247,6.2032 3.1567,6.3392 2.6397,6.5742 C2.2137,6.7692 1.8287,7.0302 1.4867,7.3402 C0.5797,8.1642 -0.0003,9.3402 -0.0003,10.6622 C-0.0003,12.8232 1.5247,14.6242 3.5547,15.0592 C3.8607,15.1242 4.1757,15.1622 4.4997,15.1622 C5.2577,15.1622 5.9607,14.9572 6.5877,14.6262 C8.0157,13.8712 8.9997,12.3892 8.9997,10.6622 C8.9997,10.6032 8.9847,10.5492 8.9827,10.4912 L9.6827,10.3042 L10.1057,11.8832 C10.2487,12.4172 10.7967,12.7332 11.3307,12.5902 C11.8637,12.4472 12.1807,11.8992 12.0377,11.3662 L11.6147,9.7862 L15.5827,8.7232 L18.3477,7.9822 Z" id="Fill-3" fill="#ffffff" mask="url(#mask-2)"></path>
+            </g>
+            <g id="Group-8" transform="translate(15.850500, 8.074700)">
+                <mask id="mask-4" fill="white">
+                    <use xlink:href="#path-3"></use>
+                </mask>
+                <g id="Clip-7"></g>
+                <path d="M3.5,2 C4.328,2 5,2.672 5,3.5 C5,4.328 4.328,5 3.5,5 C2.672,5 2,4.328 2,3.5 C2,2.672 2.672,2 3.5,2 M5.641,0.75 C5.048,0.287 4.311,0 3.5,0 C3.336,0 3.18,0.026 3.022,0.048 C1.695,0.231 0.615,1.15 0.198,2.386 C0.079,2.738 -3.55271368e-15,3.108 -3.55271368e-15,3.5 C-3.55271368e-15,3.907 0.083,4.291 0.21,4.654 C0.39,5.165 0.673,5.625 1.051,5.996 C1.682,6.616 2.546,7 3.5,7 C5.105,7 6.443,5.914 6.856,4.441 C6.94,4.14 7,3.828 7,3.5 C7,2.378 6.463,1.39 5.641,0.75" id="Fill-6" fill="#ffffff" mask="url(#mask-4)"></path>
+            </g>
+        </g>
+    </g>
+</svg>