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

package/src/RvfZoomButtons/RvfZoomButtons.tsx

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

package/src/RvfZoomButtons/index.tsx

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

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/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/Geolocation/Geolocation.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from "preact/compat";
+
+function Geolocation(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="currentColor"
+      focusable="false"
+      height="1.5em"
+      stroke="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      width="1.5em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z" />
+    </svg>
+  );
+}
+
+export default Geolocation;

package/src/icons/Geolocation/index.tsx

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

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/Minus/Minus.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from "preact/compat";
+
+function Minus(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="M19,10.9999 C19.5522847,10.9999 20,11.4476153 20,11.9999 C20,12.5521847 19.5522847,12.9999 19,12.9999 L5,12.9999 C4.44771525,12.9999 4,12.5521847 4,11.9999 C4,11.4476153 4.44771525,10.9999 5,10.9999 L19,10.9999 Z" />
+    </svg>
+  );
+}
+
+export default Minus;

package/src/icons/Minus/index.tsx

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

package/src/icons/Minus/minus.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/minus</title>
+    <g id="iconfont/minus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19,10.9999 C19.5522847,10.9999 20,11.4476153 20,11.9999 C20,12.5521847 19.5522847,12.9999 19,12.9999 L5,12.9999 C4.44771525,12.9999 4,12.5521847 4,11.9999 C4,11.4476153 4.44771525,10.9999 5,10.9999 L19,10.9999 Z" id="Line-6" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/icons/Plus/Plus.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from "preact/compat";
+
+function Plus(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="M12,4 C12.5522847,4 13,4.44771525 13,5 L13,11 L19,11 C19.5128358,11 19.9355072,11.3860402 19.9932723,11.8833789 L20,12 C20,12.5522847 19.5522847,13 19,13 L13,13 L13,19 C13,19.5128358 12.6139598,19.9355072 12.1166211,19.9932723 L12,20 C11.4477153,20 11,19.5522847 11,19 L11,13 L5,13 C4.48716416,13 4.06449284,12.6139598 4.00672773,12.1166211 L4,12 C4,11.4477153 4.44771525,11 5,11 L11,11 L11,5 C11,4.48716416 11.3860402,4.06449284 11.8833789,4.00672773 Z" />
+    </svg>
+  );
+}
+
+export default Plus;

package/src/icons/Plus/index.tsx

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

package/src/icons/Plus/plus.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/plus</title>
+    <g id="iconfont/plus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12,4 C12.5522847,4 13,4.44771525 13,5 L13,11 L19,11 C19.5128358,11 19.9355072,11.3860402 19.9932723,11.8833789 L20,12 C20,12.5522847 19.5522847,13 19,13 L13,13 L13,19 C13,19.5128358 12.6139598,19.9355072 12.1166211,19.9932723 L12,20 C11.4477153,20 11,19.5522847 11,19 L11,13 L5,13 C4.48716416,13 4.06449284,12.6139598 4.00672773,12.1166211 L4,12 C4,11.4477153 4.44771525,11 5,11 L11,11 L11,5 C11,4.48716416 11.3860402,4.06449284 11.8833789,4.00672773 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/index.tsx

@@ -10,6 +10,8 @@ register(
     "apikey",
     "baselayer",
     "center",
+    "extent",
+    "maxextent",
     "geolocation",
     "mapsurl",
     "mots",

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",
+);