Ajout exemple pour le widget Catalogue

Author: lowzonenose

samples-src/pages/tests/Catalog/pages-ol-catalog-modules-dsfr-categories-1bis.html

@@ -0,0 +1,151 @@
+{{#extend "ol-sample-modules-dsfr-layout"}}
+
+{{#content "vendor"}}
+          
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlCatalog.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlCatalog.js"></script>
+{{/content}}
+
+{{#content "head"}}
+        <title>Sample OpenLayers LayerCatalog</title>
+{{/content}}
+
+{{#content "style"}}
+        <style>
+            div#map {
+                width: 100%;
+                height: 500px;
+                background-image:url("{{ resources }}/geoportail-waiting.gif");
+                background-position:center center;
+                background-repeat:no-repeat;
+            }
+        </style>
+{{/content}}
+
+{{#content "body"}}
+            <h2>Ajout du gestionnaire de catalogue avec options sur les categories avec sections</h2>
+            <!-- map -->
+            <div id="map">
+            </div>
+{{/content}}
+
+{{#content "js"}}
+            <script type="text/javascript">
+                if (window.Gp) {
+                    // activation des loggers
+                    Gp.Logger.enableAll();
+                }
+                var map;
+                var createMap = function() {
+                    // on cache l'image de chargement du Géoportail.
+                    document.getElementById('map').style.backgroundImage = 'none';
+
+                    //Création de la map
+                    map = new ol.Map({
+                        target : "map",
+                        layers : [
+                            new ol.layer.Tile({
+                                source: new ol.source.OSM(),
+                                opacity: 0.5
+                            })
+                        ],
+                        view : new ol.View({
+                            center : [288074.8449901076, 6247982.515792289],
+                            zoom : 8
+                        })
+                    });
+
+                    var catalog = new ol.control.Catalog({
+                        position: "top-left",
+                        titlePrimary : "",
+                        categories : [
+                            {
+                                title : "Fonds de carte",
+                                id : "base",
+                                filter : {
+                                    field : "base",
+                                    value : "true"
+                                }
+                            },
+                            {
+                                title : "Données",
+                                id : "data",
+                                items : [
+                                    {
+                                        title : "Thème",
+                                        default : true,
+                                        section : true,
+                                        filter : {
+                                            field : "thematic",
+                                            value : "*"
+                                            // value : ["Hydrologie", "Agriculture", "Transports"] // all : "*"
+                                        }
+                                    },
+                                    {
+                                        title : "Producteur",
+                                        section : true,
+                                        filter : {
+                                            field : "producer",
+                                            value : "*"
+                                        }
+                                    },
+                                    {
+                                        title : "Tout",
+                                        section : false,
+                                        filter : null
+                                    }
+                                ]
+                            },
+                            {
+                                title : "Services",
+                                id : "service",
+                                items : [
+                                    {
+                                        title : "WMTS",
+                                        default : true,
+                                        filter : {
+                                            field : "service",
+                                            value : "WMTS"
+                                        }
+                                    },
+                                    {
+                                        title : "WMS",
+                                        filter : {
+                                            field : "service",
+                                            value : "WMS"
+                                        }
+                                    },
+                                    {
+                                        title : "TMS",
+                                        filter : {
+                                            field : "service",
+                                            value : "TMS"
+                                        }
+                                    },
+                                    {
+                                        title : "WFS",
+                                        filter : {
+                                            field : "service",
+                                            value : "WFS"
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    });
+                    map.addControl(catalog);
+                };
+                Gp.Services.getConfig({
+                    customConfigFile : "{{ configurl }}",
+                    callbackSuffix : "",
+                    // apiKey: "{{ apikey }}",
+                    timeOut : 20000,
+                    onSuccess : createMap,
+                    onFailure : (e) => {
+                        console.error(e);
+                    }
+                });
+           </script>
+{{/content}}
+
+{{/extend}}

src/packages/Controls/Catalog/CatalogDOM.js

@@ -273,8 +273,7 @@ var CatalogDOM = {
             </li>
             `;
         };
-
-        var strSubCategoriesRadios = "";
+        
         var tmplSubCategoryRadio = (subcategory) => {
             var checked = (subcategory.default) ? "checked" : "";
             return `
@@ -293,6 +292,7 @@ var CatalogDOM = {
             // chaque sous categories à son propre container de couches
             // et son bouton radio de groupe
             var strTabContents = "";
+            var strSubCategoriesRadios = "";
             for (let j = 0; j < subcategories.length; j++) {
                 const subcategory = subcategories[j];
                 strSubCategoriesRadios += tmplSubCategoryRadio(subcategory);