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

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -1,12 +1,8 @@
 import { Map } from "ol";
 import { unByKey } from "ol/Observable";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 
 const useUpdatePermalink = (map: Map, permalink: boolean) => {
-  const [x, setX] = useState<string>(null);
-  const [y, setY] = useState<string>(null);
-  const [z, setZ] = useState<string>(null);
-
   useEffect(() => {
     let listener;
     if (map && permalink) {
@@ -15,11 +11,8 @@ const useUpdatePermalink = (map: Map, permalink: boolean) => {
         const newX = map.getView().getCenter()[0].toFixed(2);
         const newY = map.getView().getCenter()[1].toFixed(2);
         const newZ = map.getView().getZoom().toFixed(1);
-        setX(newX);
         urlParams.set("x", newX);
-        setY(newY);
         urlParams.set("y", newY);
-        setZ(newZ);
         urlParams.set("z", newZ);
         window.history.replaceState(null, null, `?${urlParams.toString()}`);
       });
@@ -28,6 +21,6 @@ const useUpdatePermalink = (map: Map, permalink: boolean) => {
       unByKey(listener);
     };
   }, [map, permalink]);
-  return { x, y, z };
+  return null;
 };
 export default useUpdatePermalink;

package/tailwind.config.mjs

@@ -28,6 +28,27 @@ const getClamp = (min, max) => {
 export default {
   plugins: [containerQueries],
   theme: {
+    extend: {
+      colors: {
+        darkgray: "#464646", // dark grey
+        darkred: "#AF050D", // rvf drk red (ex: button primary hover)
+        grey: "#7C7C7C", // grey
+        lightgrey: "#D0D0D0", // light grey
+        lightred: "#FF5961", //rvf light red (ex:active button)
+        red: "#E3000B", // rvf rot
+        ultradarkgray: "#2D2D2C", // another grey with no name
+        ultralightgrey: "#F5F5F5", // ultralight grey
+      },
+      maxHeight: {
+        button: "40px",
+      },
+      maxWidth: {
+        button: "40px",
+      },
+      padding: {
+        1.75: "7px",
+      },
+    },
     fontFamily: {
       sans: [
         "'Source Sans Pro'",
@@ -40,6 +61,7 @@ export default {
       "2xl": getClamp(29, 39), // h2
       "3xl": getClamp(35, 48), // h1
       base: getClamp(16, 20), // p
+      button: getClamp(14, 18), // button
       lg: getClamp(19, 25), // H4
       sm: getClamp(13, 15), // small
       xl: getClamp(24, 31), // h3
@@ -53,6 +75,17 @@ export default {
         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'
       },
@@ -61,6 +94,14 @@ export default {
       },
       padding: {
         '1.75': '7px'
+      },
+      margin: {
+        '4px': '4px',
+        '7px': '7px'
+      },
+      screens: {
+        'medium': '577px',
+        'large': '993px'
       }
     }
   },

package/src/RvfSharedMobilityLayer/RvfSharedMobilityLayer.tsx

@@ -1,147 +0,0 @@
-import { getUid } from "ol";
-import { GeoJSON } from "ol/format";
-import VectorLayer from "ol/layer/Vector";
-import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
-import { Vector } from "ol/source";
-import { Circle, Fill, Stroke, Style, Text } from "ol/style";
-import { useEffect, useMemo } from "preact/hooks";
-
-import useMapContext from "../utils/hooks/useMapContext";
-
-export default function RvfSharedMobilityLayer({
-  color,
-  minZoom = 16.999,
-  name,
-  url,
-}: {
-  color: string;
-  minZoom?: number;
-  name: string;
-  url: string;
-}) {
-  const { map } = useMapContext();
-
-  const layer = useMemo(() => {
-    if (!name || !url) {
-      return null;
-    }
-    const source = new Vector({
-      format: new GeoJSON(),
-      strategy: bboxStrategy,
-      url: function (extent) {
-        return (
-          url +
-          "?service=WFS&" +
-          "version=1.1.0&request=GetFeature&typename=" +
-          name +
-          "&" +
-          "outputFormat=application/json&srsname=EPSG:3857&" +
-          "bbox=" +
-          extent.join(",") +
-          ",EPSG:3857"
-        );
-      },
-    });
-    const style = new Style({
-      image: new Circle({
-        declutterMode: "declutter",
-        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",
-        // 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;
-    };
-    const layer = new VectorLayer({
-      // declutter: true,
-      minZoom: minZoom,
-      source: source,
-      // 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;
-  }, [color, minZoom, name, url]);
-
-  // Reload features every minutes
-  useEffect(() => {
-    const interval = window.setInterval(() => {
-      // @ts-expect-error - private property
-      layer.getSource().loadedExtentsRtree_.clear();
-      // vectorSource.clear(true);
-      layer.getSource().changed();
-    }, 60000);
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [layer]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-    map.on("moveend", () => {
-      console.log("ZOOM", map.getView().getZoom());
-    });
-
-    // map.addLayer(layer);
-    layer.setMap(map);
-
-    return () => {
-      // map.removeLayer(layer);
-      layer.setMap(null);
-    };
-  });
-
-  return null;
-}

package/src/RvfSharedMobilityLayer/index.tsx

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