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

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;

package/src/utils/exportPdf.ts

@@ -26,7 +26,7 @@ let multilineCopyright = false;
 const copyrightY = 0;
 
 // Ensure the font size fita with the image width.
-const decreaseFontSize = (destContext, maxWidth, copyright, scale) => {
+const decreaseFontSize = (destContext, maxWidth, copyright, scale = 1) => {
   const minFontSize = 8;
   let sizeMatch;
   let fontSize;
@@ -158,7 +158,6 @@ const drawText = (
     textBaseline?: CanvasTextBaseline;
   },
 ) => {
-  const scale = 1;
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
@@ -174,7 +173,7 @@ const drawText = (
 
   ctx.fillStyle = fillStyle;
   ctx.font = font;
-  ctx.font = decreaseFontSize(ctx, canvas.width, text, scale);
+  ctx.font = decreaseFontSize(ctx, canvas.width, text);
   ctx.textAlign = textAlign;
   ctx.textBaseline = textBaseline;
 
@@ -462,15 +461,6 @@ const createMapToExport = async (
   const mapSize = size || map.getSize();
   const extentToFit = extent;
 
-  // We apply preserveDrawingBuffer=true to be able to export the canvas.
-  // layers.forEach((layer) => {
-  //   // @ts-expect-error - mapLibreMap is private
-  //   if (layer?.mapLibreMap as MaplibreGlMap) {
-  //     const opts = layer.get("mapLibreOptions");
-  //     opts.preserveDrawingBuffer = true;
-  //   }
-  // });
-
   // We create a temporary map.
   const div = document.createElement("div");
   div.style.width = `${mapSize[0]}px`;
@@ -490,6 +480,7 @@ const createMapToExport = async (
       projection: map.getView().getProjection(),
       zoom: map.getView().getZoom(),
       ...viewOptions,
+      // extent: extentToFit,
     }),
     ...mapOptions,
   });
@@ -514,15 +505,6 @@ const createMapToExport = async (
     });
   });
 
-  // We apply preserveDrawingBuffer=true to be able to export the canvas.
-  // layers.forEach((layer) => {
-  //   // @ts-expect-error - mapLibreMap is private
-  //   if (layer?.mapLibreMap as MaplibreGlMap) {
-  //     const opts = layer.get("mapLibreOptions");
-  //     opts.preserveDrawingBuffer = false;
-  //   }
-  // });
-
   return await promise;
 };
 
@@ -563,7 +545,10 @@ async function exportPdf(
     usePlaceholder = true,
   } = mapExportOptions;
   const format = formatOptions?.format || "A4";
-  const size = sizesByFormat72Dpi[format as string] || (format as number[]);
+  const sizePt = sizesByFormat72Dpi[format as string] || (format as number[]);
+  const size = sizePt.map((n) => {
+    return (n * 96) / 72;
+  });
   const extent = useMaxExtent
     ? RVF_EXTENT_3857
     : map.getView().calculateExtent();
@@ -640,26 +625,21 @@ async function exportPdf(
   if (useCopyright) {
     drawCopyright(copyrightText, canvas, {
       ...(mapExportOptions?.copyrightOptions || {}),
-      maxWidth: canvas.width / 2,
-      scale: pixelRatio,
+      font: (pixelRatio * 12).toString() + "px Arial",
     });
   }
 
   // Transform to PDF
   if (/^A[0-9]{1,2}/.test(format as string) || format?.length === 2) {
     try {
-      const size300Dpi = size.map((n) => {
-        return (n * 300) / 72;
-      });
       const doc = new jsPDF({
         orientation: "landscape",
         unit: "pt",
         ...formatOptions,
-        format: size300Dpi,
       });
 
       // Add canvas to PDF
-      doc.addImage(canvas, "JPEG", 0, 0, size300Dpi[0], size300Dpi[1]);
+      doc.addImage(canvas, "JPEG", 0, 0, sizePt[0], sizePt[1]);
 
       // Download the pdf
       doc.save(`rvf-${new Date().toISOString().slice(0, 10)}.pdf`);

package/tailwind.config.mjs

@@ -39,6 +39,14 @@ export default {
         ultradarkgray: "#2D2D2C", // another grey with no name
         ultralightgrey: "#F5F5F5", // ultralight grey
       },
+      height: {
+        innerControl: "12px",
+        inputControl: "20px",
+      },
+      margin: {
+        "4px": "4px",
+        "7px": "7px",
+      },
       maxHeight: {
         button: "40px",
       },
@@ -48,6 +56,17 @@ export default {
       padding: {
         1.75: "7px",
       },
+      screens: {
+        large: "993px",
+        medium: "577px",
+      },
+      width: {
+        check: "6px",
+        innerControl: "12px",
+        inputControl: "20px",
+        largeMenu: "350px",
+        mediumMenu: "300px",
+      },
     },
     fontFamily: {
       sans: [
@@ -66,43 +85,5 @@ export default {
       sm: getClamp(13, 15), // small
       xl: getClamp(24, 31), // h3
     },
-    extend: {
-      colors: {
-        darkgray: "#464646", // dark grey
-        grey: "#7C7C7C", // grey
-        lightgrey: "#D0D0D0", // light grey
-        red: "#E3000B", // rvf rot
-        ultradarkgray: "#2D2D2C", // another grey with no name
-        ultralightgrey: "#F5F5F5", // ultralight grey
-      },
-      width: {
-        'largeMenu': '350px',
-        'mediumMenu': '300px',
-        'inputControl': '20px',
-        'check': '6px',
-        'innerControl': '12px',
-      },
-      height: {
-        'inputControl': '20px',
-        'innerControl': '12px',
-      },
-      maxWidth: {
-        'button': '40px'
-      },
-      maxHeight: {
-        'button': '40px'
-      },
-      padding: {
-        '1.75': '7px'
-      },
-      margin: {
-        '4px': '4px',
-        '7px': '7px'
-      },
-      screens: {
-        'medium': '577px',
-        'large': '993px'
-      }
-    }
   },
 };

package/src/LayerTree/TreeItem/TreeItem.tsx

@@ -1,145 +0,0 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import BaseLayer from "ol/layer/Base";
-import { SVGProps, useContext, useEffect, useState } from "preact/compat";
-
-import { LayersTreeDispatchContext } from "../layersTreeContext";
-import TreeItemContainer from "../TreeItemContainer";
-
-export enum SelectionType {
-  CHECKBOX = "checkbox",
-  RADIO = "radio",
-}
-
-export type TreeItemProps = {
-  childItems: TreeItemProps[];
-  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
-  id: string;
-  isCollapsedOnControlClick?: boolean;
-  isControlChecked?: boolean;
-  layer?: BaseLayer;
-  onIconClick?: () => void;
-  selectionType: SelectionType;
-  title: string;
-} & JSX.HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
-
-function TreeItem({
-  childItems,
-  Icon,
-  isCollapsedOnControlClick,
-  isControlChecked,
-  layer,
-  onIconClick,
-  selectionType,
-  title,
-}: TreeItemProps) {
-  const [isContainerVisible, setIsContainerVisible] = useState(true);
-  const dispatch = useContext(LayersTreeDispatchContext);
-
-  useEffect(() => {
-    if (isCollapsedOnControlClick) {
-      setIsContainerVisible(isControlChecked);
-    }
-  }, [isControlChecked, isCollapsedOnControlClick]);
-
-  const handleItemClick = () => {
-    setIsContainerVisible(!isContainerVisible);
-
-    if (isCollapsedOnControlClick && !isContainerVisible) {
-      if (selectionType === SelectionType.RADIO) {
-        dispatch({
-          payload: {
-            ...this["props"],
-            isControlChecked: true,
-          },
-          type: "SELECT_RADIO_ITEM",
-        });
-      }
-    }
-  };
-
-  const handleSelectionChange = (event) => {
-    console.log("TREE LAYER", layer);
-
-    if (selectionType === SelectionType.RADIO) {
-      dispatch({
-        payload: {
-          ...this["props"],
-          isControlChecked: event.target.checked,
-        },
-        type: "SELECT_RADIO_ITEM",
-      });
-    } else {
-      dispatch({
-        payload: {
-          ...this["props"],
-          isControlChecked: event.target.checked,
-        },
-        type: "SELECT_ITEM",
-      });
-    }
-  };
-
-  const arrowShowedClass = childItems.length > 0 ? "block" : "hidden";
-  const changeArrowClass = isContainerVisible
-    ? "border-l border-t"
-    : "border-b border-r";
-  const radioButtonClass =
-    "appearance-none w-inputControl h-inputControl border-2 border-grey rounded-full mr-2 peer";
-  const checkboxClass =
-    "appearance-none w-inputControl h-inputControl border-2 border-grey rounded mr-2 peer";
-
-  const innerCircle = (
-    <span className="pointer-events-none absolute ml-4px h-innerControl w-innerControl rounded-full peer-checked:bg-red" />
-  );
-  const checkSign = (
-    <span className="pointer-events-none absolute mb-px ml-7px hidden h-innerControl w-check rotate-45 border-b-2 border-r-2 border-grey peer-checked:block" />
-  );
-
-  const renderedLayers = childItems.map((item, idx) => {
-    return <TreeItem key={idx} {...item} />;
-  });
-
-  return (
-    <div className="flex flex-col pl-6">
-      <div className="flex h-8 cursor-pointer items-center">
-        <div className="relative flex items-center">
-          <input
-            checked={isControlChecked}
-            className={
-              selectionType === SelectionType.RADIO
-                ? radioButtonClass
-                : checkboxClass
-            }
-            onChange={handleSelectionChange}
-            type={selectionType}
-          />
-          {selectionType === SelectionType.RADIO ? innerCircle : checkSign}
-        </div>
-        <div
-          onClick={handleItemClick}
-          onKeyDown={handleItemClick}
-          role="button"
-          tabIndex={0}
-        >
-          <div className="flex items-center">
-            {title}
-            <div
-              className={`mb-0.5 ml-2 size-1.5 rotate-45 border-grey ${arrowShowedClass} ${changeArrowClass}`}
-            ></div>
-          </div>
-        </div>
-        <span>{Icon ? <Icon onClick={onIconClick} /> : null}</span>
-      </div>
-      <TreeItemContainer
-        className={isContainerVisible ? "block" : "hidden"}
-        selectionType={childItems[0]?.selectionType}
-      >
-        {renderedLayers}
-      </TreeItemContainer>
-    </div>
-  );
-}
-
-export default TreeItem;

package/src/LayerTree/TreeItemContainer/TreeItemContainer.tsx

@@ -1,16 +0,0 @@
-import { type JSX, type PreactDOMAttributes } from "preact";
-
-import { SelectionType } from "../TreeItem/TreeItem";
-
-export type TreeItemContainerProps = {
-  selectionType: SelectionType;
-} & JSX.HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
-
-function TreeItemContainer({ children, className }: TreeItemContainerProps) {
-  const classes = `flex flex-col ${className || ""}`;
-
-  return <div className={classes}>{children}</div>;
-}
-
-export default TreeItemContainer;

package/src/LayerTree/TreeItemContainer/index.tsx

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

package/src/LayerTree/index.tsx

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

package/src/TopicMenu/TopicMenu.tsx

@@ -1,143 +0,0 @@
-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

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