Ajout du DSFR sur le gestionnaire de couches (#32)

+ Positionnement des widgets + Ajout demo et exemple en mode ES module + Header du panneau optionnel + Ajout du bouton Extent + Ajustement sur l'utilisation des layers hors Gp
IGNF · May 24, 2024 · a7a3011 · a7a3011
1 parent 49abce7
commit a7a3011
Show file tree

Hide file tree

Showing 54 changed files with 2,614 additions and 627 deletions.
diff --git a/build/webpack/bundle.webpack.config.js b/build/webpack/bundle.webpack.config.js
@@ -88,14 +88,19 @@ module.exports = (env, argv) => {
             server : "https",
             open : ["samples/index-bundle.html"],
             static : {
-                directory : path.join(rootdir)
+                directory : path.join(rootdir),
+                watch : {
+                    usePolling : false,
+                    ignored : [
+                        path.join(rootdir, "samples-src/**/*"), 
+                        path.join(rootdir, "demos/**/*"),
+                        path.join(rootdir, "node_modules/**/*"), 
+                        path.join(rootdir, "samples/resources/vendor/modules/**/*")
+                    ]
+                }
             },
             watchFiles : {
-                paths : ["src/**/*"],
-                options : {
-                    usePolling : false,
-                    ignored : ["demos/**", "node_modules/**"]
-                },
+                paths : ["src/**/*"]
             },
             devMiddleware : {
                 index : true,

diff --git a/build/webpack/modules.webpack.config.js b/build/webpack/modules.webpack.config.js
@@ -118,14 +118,19 @@ module.exports = (env, argv) => {
             server : "https",
             open : ["samples/index-modules.html"],
             static : {
-                directory : path.join(rootdir)
+                directory : path.join(rootdir),
+                watch : {
+                    usePolling : false,
+                    ignored : [
+                        path.join(rootdir, "samples-src/**/*"), 
+                        path.join(rootdir, "demos/**/*"),
+                        path.join(rootdir, "node_modules/**/*"), 
+                        path.join(rootdir, "samples/resources/vendor/modules/**/*")
+                    ]
+                }
             },
             watchFiles : {
-                paths : ["src/**/*"],
-                options : {
-                    usePolling : false,
-                    ignored : ["demos/**", "node_modules/**"]
-                },
+                paths : ["src/**/*"]
             },
             devMiddleware : {
                 index : true,

diff --git a/demos/esmodule-project/.gitignore b/demos/esmodule-project/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
diff --git a/demos/esmodule-project/esmodule.png b/demos/esmodule-project/esmodule.png
diff --git a/demos/esmodule-project/index.html b/demos/esmodule-project/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Using OpenLayers with Vite</title>
+  </head>
+  <body>
+    <header>
+      <img src="./esmodule.png" class="logo" />
+    </header>
+    <main>
+      <div id="map"></div>
+      <script type="module" src="./main.js"></script>
+    </main>
+  </body>
+</html>
diff --git a/demos/esmodule-project/main.js b/demos/esmodule-project/main.js
@@ -0,0 +1,131 @@
+import "./style.css";
+import {
+    Map,
+    View
+} from "ol";
+import TileLayer from "ol/layer/Tile";
+import OSM from "ol/source/OSM";
+
+import {
+    Drawing,
+    Isocurve,
+    Route,
+    LayerImport,
+    GeoportalAttribution,
+    ElevationPath,
+    MeasureArea,
+    MeasureAzimuth,
+    MeasureLength,
+    LayerSwitcher,
+    MousePosition as GeoportalMousePosition,
+    ReverseGeocode,
+    SearchEngine,
+    GetFeatureInfo,
+    CRS,
+    LayerMapBox as GeoportalLayerMapBox,
+    LayerWMTS as GeoportalLayerWMTS
+} from "geoportal-extensions-openlayers";
+
+import Gp from "geoportal-access-lib";
+
+var cfg = new Gp.Services.Config({
+    customConfigFile : "https://raw.githubusercontent.com/IGNF/geoportal-configuration/new-url/dist/fullConfig.json",
+    onSuccess : () => {
+        CRS.load();
+
+        const map = new Map({
+            target : "map",
+            layers : [
+                new TileLayer({
+                    source : new OSM()
+                }),
+                new GeoportalLayerMapBox({
+                    layer : "PLAN.IGN"
+                }),
+                new GeoportalLayerWMTS({
+                    layer : "ORTHOIMAGERY.ORTHOPHOTOS"
+                })
+            ],
+            view : new View({
+                center : [288074.8449901076, 6247982.515792289],
+                zoom : 8,
+            })
+        });
+
+        var drawing = new Drawing({
+            position : "bottom-right"
+        });
+        map.addControl(drawing);
+
+        var iso = new Isocurve({
+            position : "bottom-left"
+        });
+        map.addControl(iso);
+
+        var layerImport = new LayerImport({
+            position : "bottom-left"
+        });
+        map.addControl(layerImport);
+
+        var layerSwitcher = new LayerSwitcher({
+            options : {
+                position : "top-right"
+            }
+        });
+        map.addControl(layerSwitcher);
+
+        var mp = new GeoportalMousePosition({
+            position : "top-right"
+        });
+        map.addControl(mp);
+
+        var route = new Route({
+            position : "top-right"
+        });
+        map.addControl(route);
+
+        var reverse = new ReverseGeocode({
+            position : "top-right"
+        });
+        map.addControl(reverse);
+
+        var search = new SearchEngine({
+            position : "top-right"
+        });
+        map.addControl(search);
+
+        var feature = new GetFeatureInfo({
+            options : {
+                position : "top-right"
+            }
+        });
+        map.addControl(feature);
+
+        var measureLength = new MeasureLength({
+            position : "bottom-left"
+        });
+        map.addControl(measureLength);
+
+        var measureArea = new MeasureArea({
+            position : "bottom-left"
+        });
+        map.addControl(measureArea);
+
+        var measureAzimuth = new MeasureAzimuth({
+            position : "bottom-left"
+        });
+        map.addControl(measureAzimuth);
+
+        var measureProfil = new ElevationPath({
+            position : "bottom-left"
+        });
+        map.addControl(measureProfil);
+
+        var attributions = new GeoportalAttribution();
+        map.addControl(attributions);
+    },
+    onFailure : (e) => {
+        console.error(e);
+    }
+});
+cfg.call();
diff --git a/demos/esmodule-project/package.json b/demos/esmodule-project/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.2.11"
+  },
+  "dependencies": {
+    "geoportal-extensions-openlayers": "../../dist/package/geoportal-extensions-openlayers.tgz",
+    "ol": "latest"
+  }
+}
diff --git a/demos/esmodule-project/readme.md b/demos/esmodule-project/readme.md
@@ -0,0 +1,18 @@
+# OpenLayers + Vite
+
+This example demonstrates how the `ol` package can be used with [Vite](https://vitejs.dev/).
+
+To get started, run the following (requires Node 14+):
+
+    npx create-ol-app my-app --template vite
+
+Then change into your new `my-app` directory and start a development server (available at http://localhost:5173):
+
+    cd my-app
+    npm run dev
+
+To generate a build ready for production:
+
+    npm run build
+
+Then deploy the contents of the `dist` directory to your server.  You can also run `npm run serve` to serve the results of the `dist` directory for preview.
diff --git a/demos/esmodule-project/style.css b/demos/esmodule-project/style.css
@@ -0,0 +1,28 @@
+@import "node_modules/ol/ol.css";
+@import "node_modules/geoportal-extensions-openlayers/css/Classic.css";
+
+html, body {
+  margin: 0;
+  height: 100%;
+}
+header {
+  display: flex;
+  place-items: center;
+  justify-content: center;
+}
+
+.logo {
+  margin: 0 2rem 0 0;
+}
+
+header .wrapper {
+  display: flex;
+  place-items: flex-start;
+  flex-wrap: wrap;
+}
+
+#map {
+  position: absolute;
+  height: 500px;
+  width: 100%;
+}
diff --git a/demos/esmodule-project/vite.config.js b/demos/esmodule-project/vite.config.js
@@ -0,0 +1,5 @@
+export default {
+    build : {
+        sourcemap : true,
+    }
+};
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "geoportal-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.52",
+  "version": "1.0.0-beta.32-52",
   "date": "24/05/2024",
   "module": "src/index.js",
   "directories": {},

diff --git a/samples-src/pages/tests/Default/pages-ol-bundle-default.html b/samples-src/pages/tests/Default/pages-ol-bundle-default.html
@@ -77,7 +77,7 @@ <h2>Ajout de tous les widgets</h2>
                 });
                 map.addControl(reverse);
                 var search = new ol.control.SearchEngine({
-                  position : "top-right"
+                  position : "top-left"
                 });
                 map.addControl(search);
                 var feature =  new ol.control.GetFeatureInfo({

diff --git a/samples-src/pages/tests/Default/pages-ol-bundle-dsfr-default.html b/samples-src/pages/tests/Default/pages-ol-bundle-dsfr-default.html
@@ -77,7 +77,7 @@ <h2>Ajout de tous les widgets</h2>
                 });
                 map.addControl(reverse);
                 var search = new ol.control.SearchEngine({
-                  position : "top-right"
+                  position : "top-left"
                 });
                 map.addControl(search);
                 var feature =  new ol.control.GetFeatureInfo({

diff --git a/samples-src/pages/tests/Default/pages-ol-modules-default.html b/samples-src/pages/tests/Default/pages-ol-modules-default.html
@@ -101,20 +101,20 @@ <h2>Ajout de tous les widgets</h2>
                   position : "bottom-right"
                 });
                 map.addControl(route);
+                var feature =  new ol.control.GetFeatureInfo({
+                  options :{
+                    position : "top-right"
+                  }
+                });
+                map.addControl(feature);
                 var reverse = new ol.control.ReverseGeocode({
                   position : "top-right"
                 });
                 map.addControl(reverse);
                 var search = new ol.control.SearchEngine({
-                  position : "top-right"
+                  position : "top-left"
                 });
                 map.addControl(search);
-                var feature =  new ol.control.GetFeatureInfo({
-                  options :{
-                    position : "top-right"
-                  }
-                });
-                map.addControl(feature);
 
                 var measureLength = new ol.control.MeasureLength({
                   position : "top-left"

diff --git a/samples-src/pages/tests/Default/pages-ol-modules-dsrf-default.html b/samples-src/pages/tests/Default/pages-ol-modules-dsrf-default.html
@@ -102,21 +102,20 @@ <h2>Ajout de tous les widgets</h2>
                   position : "bottom-right"
                 });
                 map.addControl(route);
+                var feature =  new ol.control.GetFeatureInfo({
+                  options :{
+                    position : "top-right"
+                  }
+                });
+                map.addControl(feature);
                 var reverse = new ol.control.ReverseGeocode({
                   position : "top-right"
                 });
                 map.addControl(reverse);
                 var search = new ol.control.SearchEngine({
-                  position : "top-right",
-                  displayButtonGeolocate : true
+                  position : "top-left"
                 });
                 map.addControl(search);
-                var feature =  new ol.control.GetFeatureInfo({
-                  options :{
-                    position : "top-right"
-                  }
-                });
-                map.addControl(feature);
 
                 var measureLength = new ol.control.MeasureLength({
                   position : "top-left"