build(deps): migration à geopf-ext-ol (#502)

assets/@types/ol.ts

@@ -1,10 +1,3 @@
-import { Geometry } from "ol/geom";
-import TileLayer from "ol/layer/Tile";
-import VectorLayer from "ol/layer/Vector";
-import VectorTileLayer from "ol/layer/VectorTile";
-import TileWMS from "ol/source/TileWMS";
-import VectorSource from "ol/source/Vector";
-
 export interface Capabilities {
     ServiceIdentification: ServiceIdentification;
     ServiceProvider: ServiceProvider;
@@ -119,5 +112,3 @@ export interface TileMatrixEntity {
     MatrixWidth: number;
     MatrixHeight: number;
 }
-
-export type LayerTypes = VectorLayer<VectorSource<Geometry>> | VectorTileLayer | TileLayer<TileWMS>;

assets/components/Utils/ExtentMap.tsx

@@ -1,8 +1,9 @@
-import LayerSwitcher from "geoportal-extensions-openlayers/src/OpenLayers/Controls/LayerSwitcher";
-import SearchEngine from "geoportal-extensions-openlayers/src/OpenLayers/Controls/SearchEngine";
-import { View } from "ol";
+import LayerSwitcher from "geopf-extensions-openlayers/src/packages/Controls/LayerSwitcher/LayerSwitcher";
+import SearchEngine from "geopf-extensions-openlayers/src/packages/Controls/SearchEngine/SearchEngine";
+import GeoportalZoom from "geopf-extensions-openlayers/src/packages/Controls/Zoom/GeoportalZoom";
+import { Feature, View } from "ol";
 import Map from "ol/Map";
-import { Attribution, ScaleLine, defaults as defaultControls } from "ol/control";
+import { ScaleLine } from "ol/control";
 import GeoJSON from "ol/format/GeoJSON";
 import { defaults as defaultInteractions } from "ol/interaction";
 import TileLayer from "ol/layer/Tile";
@@ -18,9 +19,10 @@ import useCapabilities from "../../hooks/useCapabilities";
 
 import "ol/ol.css";
 
-import "geoportal-extensions-openlayers/dist/GpPluginOpenLayers.css";
+import "geopf-extensions-openlayers/css/Dsfr.css";
+
+import "../../sass/components/geopf-ext-ol-custom.scss";
 import "../../sass/components/map-view.scss";
-import "../../sass/components/ol.scss";
 
 type ExtentMapProps = {
     extents?: EntrepotGeometry | EntrepotGeometry[];
@@ -47,7 +49,7 @@ const ExtentMap: FC<ExtentMapProps> = ({ extents }) => {
             .flat();
 
         const extentSource = new VectorSource({
-            features: extentFeatures,
+            features: extentFeatures as Feature[], // NOTE : un peu dégeu mais j'ai pas trouvé mieux comme solution qui marche
         });
 
         return new VectorLayer({
@@ -88,20 +90,25 @@ const ExtentMap: FC<ExtentMapProps> = ({ extents }) => {
                     },
                 },
             ],
+            options: {
+                position: "top-right",
+                collapsed: true,
+                panel: true,
+                counter: true,
+            },
         });
 
-        const controls = defaultControls();
-        controls.push(new Attribution({ collapsible: true, collapsed: true }));
-        controls.push(layerSwitcher);
-        controls.push(
+        const controls = [
+            layerSwitcher,
             new SearchEngine({
                 collapsed: false,
                 displayAdvancedSearch: false,
                 apiKey: "essentiels",
                 zoomTo: "auto",
-            })
-        );
-        controls.push(new ScaleLine());
+            }),
+            new ScaleLine(),
+            new GeoportalZoom({ position: "top-left" }),
+        ];
 
         mapRef.current = new Map({
             target: mapTargetRef.current as HTMLElement,
@@ -114,7 +121,10 @@ const ExtentMap: FC<ExtentMapProps> = ({ extents }) => {
                 zoom: olDefaults.zoom,
             }),
         });
-        mapRef.current.getView().fit(extentLayer.getSource().getExtent());
+        const extentLayerSource = extentLayer.getSource();
+        if (extentLayerSource) {
+            mapRef.current.getView().fit(extentLayerSource.getExtent());
+        }
 
         return () => mapRef.current?.setTarget(undefined);
     }, [bgLayer, extentLayer]);

assets/components/Utils/RMap.tsx

@@ -1,9 +1,10 @@
-import GetFeatureInfo from "geoportal-extensions-openlayers/src/OpenLayers/Controls/GetFeatureInfo";
-import LayerSwitcher from "geoportal-extensions-openlayers/src/OpenLayers/Controls/LayerSwitcher";
-import SearchEngine from "geoportal-extensions-openlayers/src/OpenLayers/Controls/SearchEngine";
+import GetFeatureInfo from "geopf-extensions-openlayers/src/packages/Controls/GetFeatureInfo/GetFeatureInfo";
+import LayerSwitcher from "geopf-extensions-openlayers/src/packages/Controls/LayerSwitcher/LayerSwitcher";
+import SearchEngine from "geopf-extensions-openlayers/src/packages/Controls/SearchEngine/SearchEngine";
+import GeoportalZoom from "geopf-extensions-openlayers/src/packages/Controls/Zoom/GeoportalZoom";
 import Map from "ol/Map";
 import View from "ol/View";
-import { defaults as defaultControls } from "ol/control";
+import { ScaleLine } from "ol/control";
 import Attribution from "ol/control/Attribution";
 import { createOrUpdate } from "ol/extent";
 import { defaults as defaultInteractions } from "ol/interaction";
@@ -21,10 +22,9 @@ import StyleHelper from "../../modules/Style/StyleHelper";
 
 import "ol/ol.css";
 
-import "geoportal-extensions-openlayers/dist/GpPluginOpenLayers.css";
-
-import "../../sass/components/ol.scss";
+import "geopf-extensions-openlayers/css/Dsfr.css";
 
+import "../../sass/components/geopf-ext-ol-custom.scss";
 import "../../sass/components/map-view.scss";
 
 export interface MapInitial {
@@ -111,17 +111,25 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
     useEffect(() => {
         // Creation de la carte
         if (!mapRef.current) {
-            const controls = defaultControls();
-            controls.push(new Attribution({ collapsible: true, collapsed: true }));
-            controls.push(new LayerSwitcher());
-            controls.push(
+            const controls = [
+                new GeoportalZoom({ position: "top-left" }),
+                new Attribution({ collapsible: true, collapsed: true }),
+                new LayerSwitcher({
+                    options: {
+                        position: "top-right",
+                        collapsed: true,
+                        panel: true,
+                        counter: true,
+                    },
+                }),
+                new ScaleLine(),
                 new SearchEngine({
                     collapsed: false,
                     displayAdvancedSearch: false,
                     apiKey: "essentiels",
                     zoomTo: "auto",
-                })
-            );
+                }),
+            ];
 
             if (gfinfo) {
                 controls.push(
@@ -130,6 +138,7 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
                             active: true,
                             hidden: true,
                         },
+                        position: "bottom-right",
                     })
                 );
             }
@@ -172,7 +181,8 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
                     gfiLayers.push({ obj: layer });
                 }
             });
-            getControl("GetFeatureInfo")?.setLayers(gfiLayers);
+            // NOTE : il me semble que ce n'est plus nécessaire et plus possible sur geopf-ext-ol, à vérifier
+            // getControl("GetFeatureInfo")?.setLayers(gfiLayers);
 
             // On zoom sur l'extent de la couche au premier rendu
             if (extent) {

assets/components/Utils/ZoomRange.tsx

@@ -1,6 +1,5 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import Map from "ol/Map";
-import { MapOptions } from "ol/PluggableMap";
+import Map, { type MapOptions } from "ol/Map";
 import View, { ViewOptions } from "ol/View";
 import { ScaleLine } from "ol/control";
 import BaseLayer from "ol/layer/Base";
@@ -13,8 +12,6 @@ import olDefaults from "../../data/ol-defaults.json";
 import useCapabilities from "../../hooks/useCapabilities";
 import RangeSlider from "./RangeSlider";
 
-import "ol/ol.css";
-
 import "../../sass/components/zoom-range.scss";
 
 type ZoomRangeProps = {

assets/entrepot/pages/service/tms/sample/RCSampleMap.tsx

@@ -1,21 +1,24 @@
-import { FC, useEffect, useRef } from "react";
+import { fr } from "@codegouvfr/react-dsfr";
+import SearchEngine from "geopf-extensions-openlayers/src/packages/Controls/SearchEngine/SearchEngine";
+import GeoportalZoom from "geopf-extensions-openlayers/src/packages/Controls/Zoom/GeoportalZoom";
 import View from "ol/View";
-import { fromLonLat } from "ol/proj";
-import MouseWheelZoom from "ol/interaction/MouseWheelZoom";
-import { defaults as defaultControls } from "ol/control";
 import ScaleLine from "ol/control/ScaleLine";
-import SearchEngine from "geoportal-extensions-openlayers/src/OpenLayers/Controls/SearchEngine";
 import DragPan from "ol/interaction/DragPan";
-import useCapabilities from "../../../../../hooks/useCapabilities";
-import SampleMap from "./SampleMap";
+import MouseWheelZoom from "ol/interaction/MouseWheelZoom";
+import { fromLonLat } from "ol/proj";
+import { FC, useEffect, useRef } from "react";
 import { UseFormReturn } from "react-hook-form";
-import { fr } from "@codegouvfr/react-dsfr";
+
+import useCapabilities from "../../../../../hooks/useCapabilities";
 import Translator from "../../../../../modules/Translator";
+import SampleMap from "./SampleMap";
 
 import "ol/ol.css";
-import "geoportal-extensions-openlayers/dist/GpPluginOpenLayers.css";
+
+import "geopf-extensions-openlayers/css/Dsfr.css";
+
+import "../../../../../sass/components/geopf-ext-ol-custom.scss";
 import "../../../../../sass/components/map-view.scss";
-import "../../../../../sass/components/ol.scss";
 
 type RCSampleMapProps = {
     form: UseFormReturn;
@@ -35,21 +38,17 @@ const RCSampleMap: FC<RCSampleMapProps> = ({ form, center, bottomZoomLevel, onCh
         // Creation de la carte
         if (!mapRef.current) {
             // Controles par defaut
-            const controls = defaultControls({
-                attribution: false,
-                rotate: false,
-                zoom: true,
-            });
-            controls.push(new ScaleLine());
-            controls.push(
+            const controls = [
+                new GeoportalZoom({ position: "top-left" }),
+                new ScaleLine(),
                 new SearchEngine({
                     collapsed: false,
                     displayAdvancedSearch: false,
                     displayMarker: false,
                     apiKey: "essentiels",
                     zoomTo: "auto",
-                })
-            );
+                }),
+            ];
 
             mapRef.current = new SampleMap({
                 view: new View({

assets/modules/Style/StyleHelper.ts

@@ -2,6 +2,7 @@ import MapboxStyleParser from "geostyler-mapbox-parser";
 import OpenLayersParser from "geostyler-openlayers-parser";
 import QGISStyleParser from "geostyler-qgis-parser";
 import SldStyleParser from "geostyler-sld-parser";
+import { Feature } from "ol";
 import { Geometry } from "ol/geom";
 import BaseLayer from "ol/layer/Base";
 import VectorLayer from "ol/layer/Vector";
@@ -59,7 +60,7 @@ class StyleHelper {
         }
     }
 
-    static async #getOlStyle(layer: VectorLayer<VectorSource<Geometry>> | VectorTileLayer, currentStyle: CartesStyle, nameMandatory = true) {
+    static async #getOlStyle(layer: VectorLayer<VectorSource<Feature<Geometry>>> | VectorTileLayer, currentStyle: CartesStyle, nameMandatory = true) {
         let styleUrl;
         if (nameMandatory) {
             // Le nom est obligatoire pour les flux WFS

assets/modules/WebServices/BaseService.ts

@@ -1,5 +1,6 @@
 import { Service } from "../../@types/app";
-import { LayerTypes } from "../../@types/ol";
+// import BaseLayer from "ol/layer/Base";
+import Layer from "ol/layer/Layer";
 abstract class BaseService {
     readonly service: Service;
 
@@ -16,7 +17,7 @@ abstract class BaseService {
     }
 
     abstract getLayerNames(): string[];
-    abstract getLayers(): Promise<LayerTypes[]>;
+    abstract getLayers(): Promise<Layer[]>;
 }
 
 export default BaseService;

assets/modules/WebServices/WFSService.ts

@@ -1,14 +1,16 @@
 import { XMLParser } from "fast-xml-parser";
+import { Feature } from "ol";
+import GeoJSON from "ol/format/GeoJSON";
 import { Geometry } from "ol/geom";
-import { transformExtent } from "ol/proj";
+import VectorLayer from "ol/layer/Vector";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
-import GeoJSON from "ol/format/GeoJSON";
+import { transformExtent } from "ol/proj";
 import VectorSource from "ol/source/Vector";
-import VectorLayer from "ol/layer/Vector";
+
 import { Service } from "../../@types/app";
-import BaseService from "./BaseService";
-import { getRequestInfo } from "../../utils";
 import olDefaults from "../../data/ol-defaults.json";
+import { getRequestInfo } from "../../utils";
+import BaseService from "./BaseService";
 
 type LayerInfo = {
     Abstract: string;
@@ -58,7 +60,7 @@ class WFSService extends BaseService {
     }
 
     async getLayers() {
-        const layers: VectorLayer<VectorSource<Geometry>>[] = [];
+        const layers: VectorLayer<VectorSource<Feature<Geometry>>>[] = [];
 
         for (const descUrl of this.service.urls) {
             const requestInfo = getRequestInfo(descUrl.url);
@@ -74,7 +76,7 @@ class WFSService extends BaseService {
         return layers;
     }
 
-    #getLayer(info: LayerInfo): VectorLayer<VectorSource<Geometry>> {
+    #getLayer(info: LayerInfo): VectorLayer<VectorSource<Feature<Geometry>>> {
         const format = this.#format;
 
         const vectorSource = new VectorSource({
@@ -93,7 +95,7 @@ class WFSService extends BaseService {
                         return response.json();
                     })
                     .then((response) => {
-                        const features = format.readFeatures(response);
+                        const features = format.readFeatures(response) as Feature[]; // NOTE : un peu dégeu mais j'ai pas trouvé mieux comme solution qui marche
                         vectorSource.addFeatures(features);
                         success?.(features);
                     })

assets/sass/components/geopf-ext-ol-custom.scss

@@ -0,0 +1,27 @@
+/* Centrage de la barre de recherche avec marge horizontales auto et largeur fixe */
+div[id^="GPsearchEngine-"] {
+    position: relative;
+    width: 480px;
+    margin: 0 auto;
+    // left: unset;
+    z-index: -1; // pour que le composant de recherche ne cache pas autre chose comme les tooltips d'autres controls
+}
+
+/* pas de scrollbar sur les panneaux de recherche avancée */
+form[id^="GPadvancedSearchForm"],
+form[id^="GPcoordinateSearchForm"] {
+    max-height: unset;
+}
+
+/* MODE MOBILE : les boutons sont en dessous de la barre de recherche qui prend toute la largeur */
+@media (max-width: 576px) {
+    div[id^="GPsearchEngine-"] {
+        top: unset;
+        left: unset;
+        width: 100%;
+    }
+
+    [id^="GPautocompleteResults-"] {
+        height: 70vh;
+    }
+}