$ npm install jquery --save
$ npm install openlayers --save

<link rel="stylesheet" href="../node_modules/openlayers/dist/ol.css" type="text/css">

$ npm install git+http://gitlab.dockerforge.ign.fr:10080/gpu/gpu-client.git

<link  href="node_modules/gpu-client/dist/css/gpu-client.css" rel="stylesheet">
<script src="node_modules/gpu-client/dist/gpu-client.js"></script>

<!-- Ajouter une balise DIV ayant un attribut id -->
<div id="gpu-map-container"></div>

   /* Appeler le viewer en passant l'id de la balise */
   var viewer = new gpu.Viewer("gpu-map-container"); 
   
   /* Pour ajouter des couches */
   viewer.addLayer(layer);
   
   /* Pour ajouter des contrôles */
   viewer.addControl(control);

    var permalinkControl = new gpu.control.PermalinkControl({
        anchor:"#"
        });

layer.set("permalink","identifiant_permalink");

     var locateControl = new gpu.control.LocateControl({
                    geoportalApiKey: '509qg1v5djkkfjk9f2bhkiyl',
                    ceriseUrl: '../../dist/img/cerise.png', // url de l'image pour la cerise de localisation
                    target: "id_du_div",
                    placeBeforeTarget: true, // pour placer ce contrôle au dessus du div cible
                    showSearchOptions: true, // si true permet à l'utilisateur de préciser la recherche avec des options liés à l'API géoportail
                    urlDepartments: "departments.php", // url donnant la liste des départements en json
                    urlMunicipalities: "municipalities.php" // url donnant la liste des communes en json en fonction du département
                });

  var tabsPanelsControl = new gpu.control.TabsPanelsControl({
                    tabsContent: [ // les onglets et le html contenu dans son onglet lui meme (pas son panneau)
                        '<i class="glyphicon-info"> </i>',
                        '<i class="glyphicon-stack"> </i>',
                        '<i class="glyphicon-list"> </i>'
                    ],
//                    tabActive: 1, // si précisé, cet onglet sera celui ouvert par défaut
                    width: "530px" // largeur des panneaux 
                });
                tabsPanelsControl.setContentToPanel(0, 'panneau d\'infos'); // ajout du contenu du panneau de l'onglet concerné
                tabsPanelsControl.setContentToPanel(1, 'panneau de couches');
                tabsPanelsControl.setContentToPanel(2, 'panneau de légendes');
                var panel_1 = tabsPanelsControl.getPanel(1); // permet de récupérer l'élément html correspondant au panneau d'un onglet (0 étant le premier onglet)

 var barControl = new gpu.control.BarControl();
                /* [ ajout des controles à la barre de controle ] */
                var barItems = [
                    {
                        control: fullScreenControl, // le controle
                        thisDesactivateOtherOnActive: false, // si true, les autres controles de la barre sont désactivés si ce controle est activé
                        otherDeactivateThisOnActive: false // si true, les autres controles de la barre désactivent celui-ci si leur param 'thisDesactivateOtherOnActive' est true
                    },
                    {
                        control: measureControl,
                        thisDesactivateOtherOnActive: true,
                        otherDeactivateThisOnActive: true
                    },
                    {
                        control: displayInfoControl,
                        thisDesactivateOtherOnActive: true,
                        otherDeactivateThisOnActive: true
                    },
                    {
                        control: drawBarControl,
                        thisDesactivateOtherOnActive: true,
                        otherDeactivateThisOnActive: true
                    },
                    {
                        control: printControl,
                        thisDesactivateOtherOnActive: false,
                        otherDeactivateThisOnActive: false
                    }
                ];
                barControl.addItems(barItems);

    var fullScreenControl = new gpu.control.FullScreenSwitcherControl({
        screenDivId: viewer.getTarget() // div cible à passer ne plein écran
    });

        var drawBarControl = new gpu.control.DrawBarControl({});
        
        // Creation couche commune aux croquis et récupération de la featureCollection à passer aux controles de dessin
        var drawLayer = drawBarControl.createDrawLayer();
        var featuresCollection = drawLayer.getSource().getFeaturesCollection();
        viewer.addLayer(drawLayer); // on ajoute la couche au viewer of course!
    

        /* Selection de features */
        var selectControl = new gpu.control.SelectControl({
            layer: drawLayer // la couche de dessin
        });
        drawBarControl.addControl(selectControl);
        
        /* dessiner des features de type point */
        var drawPointControl = new gpu.control.DrawFeatureControl({
            type: 'Point',
            title: 'Dessiner un point',
            featuresCollection: featuresCollection 
        });
        drawBarControl.addControl(drawPointControl);
        
        /* dessiner des features de type ligne */
        var drawLineStringControl = new gpu.control.DrawFeatureControl({
            type: 'LineString',
            title: 'Dessiner une ligne',
            featuresCollection: featuresCollection
        });
        drawBarControl.addControl(drawLineStringControl);
        
        /* dessiner des features de type polygone */
        var drawPolygonControl = new gpu.control.DrawFeatureControl({
            type: 'Polygon',
            title: 'Dessiner un polygone',
            featuresCollection: featuresCollection
        });
        drawBarControl.addControl(drawPolygonControl);
        
        /* dessiner des features de type label */
        var drawTextControl = new gpu.control.DrawFeatureControl({
            type: 'Text',
            title: 'Ajouter un texte',
            featuresCollection: featuresCollection
        });
        drawBarControl.addControl(drawTextControl);
        
        /* Modifier les features selectionnées */
        var editControl = new gpu.control.EditControl({
            layer: drawLayer
        });
        drawBarControl.addControl(editControl);
        
        /* Control d'export de croquis en geoJson */
        var exportControl = new gpu.control.ExportGeoJsonControl({
            exportUrl: "export.php", // url pour l'export
            featuresCollection: featuresCollection
        });
        drawBarControl.addControl(exportControl);
        
       /* Control d'import de croquis en geoJson */
        var importControl = new gpu.control.ImportGeoJsonControl({
            importUrl: "import.php", // url pour l'import
            featuresCollection: featuresCollection
        });
        drawBarControl.addControl(importControl);

        /* Création et Assignation de la popup lié à la modification d'une feature */
        var featurePopup = new gpu.control.FeaturePopupControl();
        viewer.addControl(featurePopup);
        featurePopup.assignInteraction(selectControl.selectInteraction);
        featurePopup.assignInteraction(drawPointControl.drawInteraction);
        featurePopup.assignInteraction(drawLineStringControl.drawInteraction);
        featurePopup.assignInteraction(drawPolygonControl.drawInteraction);
        featurePopup.assignInteraction(drawTextControl.drawInteraction);

        /* Création Assignation de la popup d'aide au tracé de ligne et polygon  */
        var drawHelperPopup = new gpu.control.DrawHelperPopupControl();
        viewer.addControl(drawHelperPopup);
        
        drawHelperPopup.assignInteraction(drawLineStringControl.drawInteraction);
        drawHelperPopup.assignInteraction(drawPolygonControl.drawInteraction);

    var displayInfoControl = new gpu.control.DisplayInfoControl();

    var measureControl = new gpu.control.MeasureControl();

 var printControl = new gpu.control.PrintControl();

    var treeLayerSwitcher = new gpu.control.TreeLayerSwitcherControl({
        target: tabsPanelsControl.getPanel(1) // Div Où on veut placer le TLS
    });
    viewer.addControl(treeLayerSwitcher);
    
    /* ajout d'une entrée avec une couche à l'emplacement /1 */
    treeLayerSwitcher.addLayers("/1", [layer3], "titre de l'entrée"); 
    
    /* ajout d'une entrée avec un groupe de deux couches, à l'emplacement /1/2 (donc sous /1) */
    treeLayerSwitcher.addLayers("/1/2", [layer1,layer2], "Titre de l'entrée /1/2"); 

    /* Met à jour la visibilité des couches en fonction des regles qui régissent le TLS */
    treeLayerSwitcher.updateVisibilities();
    
    /* Ouvre les enfant de l'entrée au chemin /1 */
    treeLayerSwitcher.treeLayerSwitcherItems['/1'].openChildren();
    
    /* Mise à jour de l'opacité d'une entrée avec récursivité sur enfants et/ou parents */
    var recursiviteParent = false;
    var recursiviteEnfant = true;
   treeLayerSwitcher.treeLayerSwitcherItems['/1'].changeOpacity(0.70, recursiviteParent, recursiviteEnfant);

/* exemple de configuration */
var config = {
    "layers": [
        {
            "name": "lowscale", // Nom de la couche WMS, requis
            "virtual": true, // Si TRUE, cache les enfants et considère que cette entrée n'est pas un aggregat (n'a pas de couche associée), optionel
            "title": "VUE D'ENSEMBLE (PLUi, PLU, POS, CC, RNU)", // Titre de l'entrée, si non précisé, prend le nom de la couche, optionnel
            "minZoomLevel": 3, // Niveau de zoom minimum dans laquelle la couche est visible (inclu), optionnel
            "maxZoomLevel": 21, // Niveau de zoom maximum dans laquelle la couche est visible (inclu), optionnel
            "opacity": 1, // Opacité de la couche, si non précisé, prend celle de son parent, si non précisé sur le parent, vaut 1
            "visible": true, // Visibilité de la couche, si non précisé, prend celle de son parent, optionnel (pas d'interet ici car il est virtual:true, il n'a pas de couche associée)
            "layers": [ // Contient les enfants, optionnel
                {
                    "name": "toto",
                    "title": "Couche à toto",
                    "minZoomLevel": 6, 
                    // pas de maxZoomLevel ici, donc implicitement vaut celui de son parent (21)
                    "opacity": 1.0,
                    "visible": false // la couche n'est pas visible, sa checkboxe sera décochée et celle de son parent aussi (car c'est son seul enfant)
                }
]
        }      

var wmsUrl = "https://wxs-gpu.mongeoportail.ign.fr/externe/i9ytmrb6tgtq5yfek781ntqi/wms/v";

var configExtractor = new gpu.services.ConfigExtractorForTreeLayerSwitcher(wmsUrl, map);

configExtractor.addLayersFromConfigAndBuildTreeLayerSwitcher(treeLayerSwitcher,config);