Ajouter votre propre JavaScript 

Principe 

L’ajout de JavaScript (JS) est utile pour une variété d’utilisations avancées. Par exemple, vous pouvez :

cacher certains éléments de l’interface utilisateur que vous ne voulez pas afficher par défaut

ajouter un bouton personnalisé dans l’UI

ajouter une popup à l’ouverture du projet (pour afficher les financeurs, les crédits…)

éviter que les gens puissent télécharger des éléments de la page en cliquant dessus avec le bouton droit de la souris, et bien sûr, bien d’autres choses encore.

Pré-requis 

Cette fonction doit être activée par l’administrateur de l’instance Lizmap.
Le dossier media. Lire comment utiliser le dossier Média dans Lizmap.

Configurer l’outil 

Dans votre répertoire, (par ex. /home/data/repo1/myproject.qgs) vous devez avoir ces répertoires :
```
media
|-- js
  |-- myproject
  |-- default
```
All the JavaScript code you copy in the /home/data/rep1/media/js/myproject/ directory will be executed by Lizmap for this specific project only.
Tout le code JavaScript dans default sera exécuté pour tous les projets.
Pour autoriser l’exécution de code JavaScript, dans l’interface d’administration de Lizmap, vous devez ajouter le privilège Autoriser les thèmes/codes javascript pour ce répertoire.

Tutoriel vidéo 

Cette vidéo est une introduction rapide à l’ajout d’un JavaScript pour changer le panneau par défaut dans Lizmap.

Bibliothèque de scripts 

Vous pouvez trouver quelques exemples dans le dépôt https://github.com/3liz/lizmap-javascript-scripts.

En outre, dans le répertoire lizmap-web-client/lizmap/install/qgis/media/js/ (ou dans GitHub https://github.com/3liz/lizmap-web-client/tree/master/extra-modules/lizmapdemo/qgis-projects/demoqgis/media/js/montpellier), vous pouvez trouver des exemples de code JavaScript approprié.

Retirez l’extension .example et copiez-les dans votre dossier media/js/default/` pour les activer.

Évènements Javascript disponibles 

Le code Javascript peut utiliser plusieurs événements déclenchés par Lizmap Web Client. Voici une liste de tous les événements disponibles, avec les propriétés retournées.

Évènements Lizmap Web Client disponibles
Nom de l’évènement	Description	Propriétés retournées
treecreated	Déclenché quand l’arbre de couche a été créé dans le panneau de légende
mapcreated	Déclenché quand la carte OpenLayers a été créé
layersadded	Déclenché quand les couches OpenLayers ont été ajoutées
uicreated	Déclenché quand l’interface a été déclenché
dockopened	Déclenché quand un dock est ouvert (panneau de gauche)	id
dockclosed	Déclenché quand un dock est fermé (panneau de gauche)	id
minidockopened	Déclenché quand un mini-dock (conteneur de droite pour les outils) est ouvert	id
minidockclosed	Déclenché quand un mini-dock est fermé	id
bottomdockopened	Déclenché quand le dock inférieur est ouvert	id
bottomdockclosed	Déclenché quand le dock inférieur est fermé	id
lizmapbaselayerchanged	Déclenché quand le fond de carte a été changé	layer
lizmapswitcheritemselected	Déclenché quand une couche a été surlignée dans le panneau de légende	name \| type \| selected
layerstylechanged	Déclenché quand le style d’une couche a été changé	featureType
lizmaplocatefeaturecanceled	Déclenché quand l’utilisateur a désactivé l’outil de localisation par couche	featureType
lizmaplocatefeaturechanged	Déclenché quand l’utilisateur a sélectionné un élément dans l’outil de localisation par couche	featureType \| featureId
lizmappopupdisplayed	Déclenché quand le contenu de la popup est affichée
lizmappopupallchildrendisplayed	Déclenché quand toutes les popups enfants sont affichées	parentPopupElement \| childPopupElements
lizmappopupdisplayed_inattributetable	Déclenché quand le contenu de la popup est affichée dans la table d’attribut (panneau en bas à droite)
lizmapeditionformdisplayed	Déclenché quand un formulaire d’édition est affiché	layerId \| featureId \| editionConfig
lizmapeditionfeaturecreated	Déclenché quand une entité de couche a été créée avec l’outil d’édition	layerId
lizmapeditionfeaturemodified	Déclenché quand une entité de couche a été modifiée avec l’outil d’édition	layerId
lizmapeditionfeaturedeleted	Déclenché quand une entité de couche a été supprimée avec l’outil d’édition	layerId \| featureId
attributeLayersReady	Lancé lorsque toutes les couches à afficher dans l’outil Table attributaire ont été définis	layers
attributeLayerContentReady	Lancé lorsqu’une table pour une couche a été affichée dans le dock inférieur	featureType
layerfeaturehighlighted	Lancé lorsqu’un objet géographique a été mis en surbrillance dans la table attributaire (rectangle gris). Le déclenchement manuel de cet événement force l’actualisation des tables enfants s’il en existe pour la couche	sourceTable \| featureType \| fid
layerfeatureselected	Lancez cet événement pour déclencher la sélection d’un objet géographique pour une couche, en transmettant l’identifiant de l’entité. Une fois la sélection effectuée, l’événement layerSelectionChanged est renvoyé en retour.	featureType \| fid \| updateDrawing
layerfeaturefilterselected	Lancez cet événement pour déclencher le filtrage d’une couche pour les entités sélectionnées. Vous devez sélectionner des objets géographiques avant de déclencher cet événement. Une fois le filtre appliqué, Lizmap déclenche l’événement layerFilteredFeaturesChanged en retour.	featureType
layerFilteredFeaturesChanged	Lancé lorsqu’un filtre a été appliqué à la carte pour une couche. Cet événement déclenche également le redessin de la carte et du contenu des tables attributaires.	featureType \| featureIds \| updateDrawing
layerFilterParamChanged	Lancé lorsque les paramètres des requêtes WMS ont changé pour une couche. Par exemple quand un STYLE ou un FILTER a été modifié pour la couche.	featureType \| filter \| updateDrawing
layerfeatureremovefilter	Lancez cet événement pour supprimer tous les filtres appliqués à la carte. Une fois cela fait, l’événement layerFilteredFeaturesChanged est renvoyé et le contenu de la carte et le contenu des tables d’attributs sont actualisés.	featureType
layerSelectionChanged	Lancé lorsque la sélection a été modifiée pour une couche. Cela déclenche également la redéfinition du contenu de la table attributaire et du contenu de la carte	featureType \| featureIds \| updateDrawing
layerfeatureselectsearched	Lancez cet événement pour sélectionner tous les objets géogrpahiques correspondant aux lignes affichées dans la table attributaire, qui peuvent être filtrées visuellement par l’utilisateur en entrant du texte dans le champs de saisie de recherche.	featureType \| updateDrawing
layerfeatureunselectall	Lancez cet événement pour supprimer toutes les objets géographiques de la sélection pour une couche. Une fois cela fait, Lizmap répond avec l’événement layerSelectionChanged	featureType \| updateDrawing
lizmapexternalsearchitemselected	S’active lorsque l’utilisateur a sélectionné un élément figurant dans les résultats de la recherche d’en-tête.	entité
actionResultReceived	Déclenché lorsqu’une action popup Lizmap a été exécutée et que le résultat a été reçu.	layerId \| featureId \| action \| features

Certaines variables sont également disponibles.

Variables Lizmap Web Client disponibles
Nom de la variable	Description
lizUrls.media	URL pour pointer sur un media
lizUrls.params.repository	Nom du répertoire actuel
lizUrls.params.project	Nom du projet en cours

Exemples 

Fermer un groupe dans la légende 

lizMap.events.on({
    uicreated: function(e) {
        $('#group-groupname td a.expander').click();
    }
});

Désactiver le clic-droit 

Ajoutez un fichier nommé, par exemple, disableRightClick.js avec le code suivant :

lizMap.events.on({
   uicreated: function(e) {
      $('body').attr('oncontextmenu', 'return false;');
   }
});

Si vous voulez que ce code soit exécuté pour tous les projets de votre référentiel, vous devez copier le fichier dans le répertoire /home/data/rep1/media/js/default/ plutôt que dans /home/data/rep1/media/js/myproject/.

Envoyer l’ID utilisateur de la connexion actuelle 

Un exemple vous permettant d’envoyer l’identifiant de connexion actuel (et/ou d’autres données d’utilisateur) vers une colonne de table PostgreSQL, en utilisant l’outil d’édition :

var formPrefix = 'jforms_view_edition';

// Name of the QGIS vector layer fields which must contain the user info
// In the list below, replace the right side by your own fields in Lizmap
var userFields = {
   login: 'your_lizmap_user_login_field',
   firstname: 'your_lizmap_user_firstname_field',
   lastname: 'your_lizmap_user_lastname_field',
   organization: 'your_lizmap_user_organization_field'
};


lizMap.events.on({

   'lizmapeditionformdisplayed': function(e){

      // If user is logged in
      if( $('#info-user-login').length ){
            // Loop through the needed fields
            for( var f in userFields ){
               // If the user has some data for this property
               if( $('#info-user-' + f).text() ){
                  // If the field exists in the form
                  var fi = $('#' + formPrefix + '_' + userFields[f]);
                  if( fi.length ){
                        // Set val from lizmap user data
                        fi.val( $('#info-user-' + f).text() )
                        // Set disabled
                        fi.hide();
                  }
               }
            }
      }

   }

});

URL d’un fichier statique 

Si vous souhaitez obtenir l’URL d’un fichier statique, situé dans le dossier Média :

var media = '/media/image/logo.jpg';
// It can also be a media located in the common media folder such as
// var media = '../media/logo.png';
var url = lizUrls.media + '?repository=' + lizUrls.params.repository + '&project=' + lizUrls.params.project + '&path=' + media;
// console.log(url);
var image  = '<img src="' + url + '" title="Logo" style="display:inline;height:80px;margin:20px 10px;" />';

Il est possible d’utiliser une fonction de la bibliothèque OpenLayers pour aider à construire l’URL :

var mediaUrl = OpenLayers.Util.urlAppend(
     lizUrls.media,
     OpenLayers.Util.getParameterString({
         "repository": lizUrls.params.repository,
         "project": lizUrls.params.project,
         "path": "picture.png"
     })
);