feat(panoramax) : ✨ nouveau widget Panoramax

DEPENDENCIES.md

@@ -107,3 +107,27 @@ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE._
+
+# Panoramax - The Panoramax viewer is a web JS library which displays pictures and sequences from a Panoramax server, or any STAC API offering geolocated pictures.
+
+MIT License
+
+Copyright (c) 2022 Adrien Pavie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

DRAFT_CHANGELOG.md

@@ -15,6 +15,8 @@ __DATE__
 
 * ✨ [Added]
 
+  - Panoramax : 🎉 nouveau widget !
+
 * 🔨 [Changed]
 
 - perf: écoute évènement moveend sur map au lieu de change:resolution sur view

build/licences/licence-panoramax.tmpl

@@ -0,0 +1,7 @@
+/*!
+ * @overview  Panoramax - a web JS viewer library which displays pictures and sequences from a Panoramax server
+ * @copyright Copyright (c) 2022 Adrien Pavie
+ * @license   Licensed under MIT license
+ *            See https://gitlab.com/panoramax/clients/web-viewer/-/raw/develop/LICENSE
+ * @version   {__VERSION__}
+ */

build/webpack/bundle.webpack.config.js

@@ -69,6 +69,12 @@ module.exports = (env, argv) => {
                     amd : "ol",
                     root : "ol"
                 },
+                "@panoramax/web-viewer/build/photoviewer" : {
+                    commonjs : "@panoramax/web-viewer/build/photoviewer",
+                    commonjs2 : "@panoramax/web-viewer/build/photoviewer",
+                    amd : "Panoramax",
+                    root : "Panoramax"
+                },
                 request : {
                     commonjs2 : "request",
                     commonjs : "request",
@@ -171,7 +177,7 @@ module.exports = (env, argv) => {
                     test : /\.css$/,
                     include : [
                         path.join(rootdir, "src", "packages", "CSS"),
-                        /node_modules\/@gouvfr\/dsfr\/dist/,
+                        /node_modules\/@gouvfr\/dsfr\/dist/
                     ],
                     use : [
                         MiniCssExtractPlugin.loader,

build/webpack/extend.banners.webpack.js

@@ -37,6 +37,12 @@ module.exports = (env, argv) => {
                 raw : true,
                 entryOnly : true
             }),
+            new BannerWebPackPlugin({
+                banner : header(fs.readFileSync(path.join(rootdir, "build/licences", "licence-panoramax.tmpl"), "utf8"), {
+                    __VERSION__ : pkg.dependencies["@panoramax/web-viewer"],
+                }),
+                raw : true
+            }),
         ]
     };
 };

build/webpack/extend.base.webpack.js

@@ -107,6 +107,7 @@ module.exports = (env, argv) => {
                     include : [
                         path.join(rootdir, "src", "packages", "CSS"),
                         /node_modules\/@gouvfr\/dsfr\/dist/,
+                        /node_modules\/@panoramax\/web-viewer\/build/,
                     ],
                     use : [
                         MiniCssExtractPlugin.loader,

build/webpack/extend.themes.webpack.js

@@ -39,6 +39,7 @@ module.exports = (env, argv) => {
                 path.join(rootdir, "src", "packages", "CSS", "Controls/ControlList", "GPFcontrolListStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/ContextMenu", "GPFcontextMenuStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/Reporting", "GPFreportingStyle.css"),
+                path.join(rootdir, "src", "packages", "CSS", "Controls/Panoramax", "GPFpanoramaxStyle.css"),
             ],
             // CSS themes dsfr
             "Dsfr" : [
@@ -76,6 +77,7 @@ module.exports = (env, argv) => {
                 path.join(rootdir, "src", "packages", "CSS", "Controls/ControlList", "DSFRcontrolListStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/ContextMenu", "DSFRcontextMenuStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/Reporting", "DSFRreportingStyle.css"),
+                path.join(rootdir, "src", "packages", "CSS", "Controls/Panoramax", "DSFRpanoramaxStyle.css"),
             ],
         }
     };

build/webpack/modules.webpack.config.js

@@ -66,6 +66,8 @@ module.exports = (env, argv) => {
             "GpfExtOlControlList" : path.join(rootdir, "src", "packages", "Controls/ControlList", "ControlList.js"),
             "GpfExtOlContextMenu" : path.join(rootdir, "src", "packages", "Controls/ContextMenu", "ContextMenu.js"),
             "GpfExtOlReporting" : path.join(rootdir, "src", "packages", "Controls/Reporting", "Reporting.js"),
+            "GpfExtOlPanoramax" : path.join(rootdir, "src", "packages", "Controls/Panoramax", "Panoramax.js"),
+
             // Formats étendus
             "GpfExtOlFormats" : [
                 path.join(rootdir, "src", "packages", "Formats", "GeoJSON.js"),
@@ -120,6 +122,12 @@ module.exports = (env, argv) => {
                     amd : "ol",
                     root : "ol"
                 },
+                "@panoramax/web-viewer/build/photoviewer" : {
+                    commonjs : "@panoramax/web-viewer/build/photoviewer",
+                    commonjs2 : "@panoramax/web-viewer/build/photoviewer",
+                    amd : "Panoramax",
+                    root : "Panoramax"
+                },
                 request : {
                     commonjs2 : "request",
                     commonjs : "request",
@@ -134,7 +142,7 @@ module.exports = (env, argv) => {
         ],
         devtool : "source-map",
         devServer : {
-            webSocketServer: false,
+            webSocketServer : false,
             server : "https",
             open : ["samples/index-modules.html"],
             static : {
@@ -222,7 +230,7 @@ module.exports = (env, argv) => {
                     test : /\.css$/,
                     include : [
                         path.join(rootdir, "src", "packages", "CSS"),
-                        /node_modules\/@gouvfr\/dsfr\/dist/,
+                        /node_modules\/@gouvfr\/dsfr\/dist/
                     ],
                     use : [
                         MiniCssExtractPlugin.loader,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.9-496",
+  "version": "1.0.0-beta.9-492",
   "date": "12/03/2026",
   "module": "src/index.js",
   "directories": {},
@@ -44,19 +44,21 @@
   "dependencies": {
     "@gouvfr/dsfr": "^1.13.1",
     "@mapbox/mapbox-gl-style-spec": "14.8.0",
+    "@panoramax/web-viewer": "^4.4.0",
     "@xmldom/xmldom": "^0.9.0",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "clusterize.js": "^1.0.0",
+    "date-fns": "^4.1.0",
     "doctoc": "^2.3.0",
-    "dompurify": "^3.2.6",
+    "dompurify": "^3.3.3",
     "eventbusjs": "0.2.0",
     "geoportal-access-lib": "3.4.6",
     "loglevel": "^1.9.1",
     "marked": "^16.2.1",
     "ol": "^10.3.1",
     "ol-contextmenu": "^5.5.0",
-    "ol-mapbox-style": "^12.3.5",
+    "ol-mapbox-style": "^13.3.0",
     "proj4": "2.15.0",
     "sortablejs": "1.15.3",
     "typescript": "^5.3.3",

samples-src/pages/tests/Default/pages-ol-bundle-dsfr-default.html

@@ -1,6 +1,8 @@
 {{#extend "ol-sample-bundle-dsfr-layout"}}
 
 {{#content "vendor"}}
+        <link rel="stylesheet" href="{{ resources }}/vendor/panoramax/v4.4.0/photoviewer.css" />
+        <script src="{{ resources }}/vendor/panoramax/v4.4.0/photoviewer.js"></script>
         <link rel="stylesheet" href="{{ baseurl }}/dist/bundle/GpfExtOL.css" />
         <script src="{{ baseurl }}/dist/bundle/GpfExtOL.js"></script>
 {{/content}}
@@ -46,8 +48,18 @@ <h2>Ajout de tous les widgets</h2>
                   })
                 });
 
+                var panoramax = new ol.control.Panoramax({
+                    position: "bottom-left",
+                    collapsed: true,
+                    panel : true,
+                    visualizationWindow : {
+                      size : "fullscreen-map",
+                    }
+                });
+                map.addControl(panoramax);
+
                 var catalog = new ol.control.Catalog({
-                  position : "top-left"
+                  position : "top-right"
                 });
                 map.addControl(catalog);
 
@@ -56,22 +68,22 @@ <h2>Ajout de tous les widgets</h2>
                 });
                 map.addControl(reporting);
 
-                var zoom = new ol.control.GeoportalZoom({
-                  position : "bottom-left"
-                });
-                map.addControl(zoom);
-
                 var fullscreen = new ol.control.GeoportalFullScreen({
-                  position : "top-right"
+                  position : "bottom-right"
                 });
                 map.addControl(fullscreen);
-
+                
                 var overview = new ol.control.GeoportalOverviewMap({
-                  position : "bottom-left",
-                  collapsed: false
+                  position : "bottom-right",
+                  collapsed: true
                 });
                 map.addControl(overview);
-
+
+                var zoom = new ol.control.GeoportalZoom({
+                  position : "bottom-right"
+                });
+                map.addControl(zoom);
+
                 var drawing = new ol.control.Drawing({
                   position : "bottom-left"
                 });

samples-src/pages/tests/Panoramax/pages-ol-panoramax-modules-options-dsfr.html

@@ -0,0 +1,109 @@
+{{#extend "ol-sample-modules-dsfr-layout"}}
+
+{{#content "vendor"}}
+        <link rel="stylesheet" href="{{ resources }}/vendor/panoramax/v4.4.0/photoviewer.css" />
+        <script src="{{ resources }}/vendor/panoramax/v4.4.0/photoviewer.js"></script>
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlCatalog.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlCatalog.js"></script>
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.js"></script>
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlPanoramax.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlPanoramax.js"></script>
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlLayers.js"></script>
+{{/content}}
+
+{{#content "head"}}
+        <title>Sample openlayers Panoramax</title>
+{{/content}}
+
+{{#content "style"}}
+        <style>
+            div#map {
+                width: 100vw;
+                height: calc(100vh - 200px);
+                background-image:url("{{ resources }}/geoportail-waiting.gif");
+                background-position:center center;
+                background-repeat:no-repeat;
+            }
+
+        </style>
+{{/content}}
+
+{{#content "body"}}
+            <h2>Ajout du widget Panoramax, avec les options par défaut</h2>
+            <!-- map -->
+            <div id="map">
+            </div>
+{{/content}}
+
+{{#content "js"}}
+    <script>
+        if (window.Gp) {
+            localStorage.setItem("loglevel", "debug");
+            localStorage.setItem("loglevel:panoramax", "debug");
+            // activation des loggers
+            Gp.Logger.enableAll();
+        }
+        var map;
+        var panoramax;
+
+        var createMap = function () {
+            document.getElementById('map').style.backgroundImage = 'none';
+
+            // Création de la map
+            map = new ol.Map({
+                target : "map",
+                view : new ol.View({
+                    center : [288074.8449901076, 6247982.515792289],
+                    zoom : 18
+                })
+            });
+
+            var gpMaps = new ol.layer.GeoportalWMTS({
+                layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2"
+            });
+            map.addLayer(gpMaps);
+
+            // Ajout du contrôle de gestion  des couches
+            var layerSwitcher = new ol.control.LayerSwitcher({
+                options : {
+                    collapsed: true,
+                    position: "top-left",
+                    panel: true,
+                    counter: true
+                }
+            });
+            map.addControl(layerSwitcher);
+
+            var catalog = new ol.control.Catalog({
+                position: "top-left",
+                collapsed : true
+            });
+            map.addControl(catalog);
+
+            // Ajout du contrôle Panoramax
+            var options = {
+                collapsed: false,
+                panel : true
+            };
+            panoramax = new ol.control.Panoramax(options);
+            // Gestion de l'événement d'ouverture du formulaire de Panoramax
+            // mais, une seule fois !
+            panoramax.once("pnx:opened", function () {
+                console.log("Panoramax event opened !");
+            });
+            map.addControl(panoramax);
+        };
+        Gp.Services.getConfig({
+            customConfigFile : "{{ configurl }}",
+            callbackSuffix : "",
+            // apiKey: "{{ apikey }}",
+            timeOut : 20000,
+            onSuccess : createMap,
+            onFailure : (e) => {
+                console.error(e);
+            }
+        });
+    </script>
+{{/content}}
+{{/extend}}