Ajouter votre propre JavaScript

Principe

Adding some JavaScript (JS) is useful for a variety of advanced usage. For instance, you can:

  • hide some UI elements that you don’t want to display by default
  • ajouter un bouton personnalisé dans l’UI
  • add a popup when the project is opened (to display funders, credits…)
  • avoid people being able to download elements of the page by right clicking on them, and of course much more.

Pré-requis

  • This function needs to be activated by the administrator of the Lizmap instance.
  • 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.

  • All the JavaScript code in default will be executed for all projects.

  • To allow the execution of JavaScript code, in the Lizmap admin interface, you must add the privilege Allow themes for this repository.

Tutoriel vidéo

This video is an quick start how to add a JavaScript to change the default panel in Lizmap.

https://www.youtube.com/embed/xQQ34nvRZ-w

Bibliothèque de scripts

You can find some examples in the repository https://github.com/3liz/lizmap-javascript-scripts.

Also, in the directory lizmap-web-client/lizmap/install/qgis/media/js/ (or in GitHub https://github.com/3liz/lizmap-web-client/tree/master/extra-modules/lizmapdemo/qgis-projects/demoqgis/media/js/montpellier), you can find examples of suitable JavaScript code.

Remove the extension .example and copy them to your media/js/default/ folder to activate them.

É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 Fired when the user has selected an item listed in the results of the header search input entité
actionResultReceived Fired when a Lizmap popup action has been performed and the result has been received 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;');
   }
});
  • If you want this code to be executed for all projects of your repository, you have to copy the file in the directory /home/data/rep1/media/js/default/ rather than in /home/data/rep1/media/js/myproject/.

Send current login user-ID

An example allowing you to send current login User-ID (and/or other user data) to PostgreSQL table column, using edition tool:

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 mediaUrl = OpenLayers.Util.urlAppend(
     lizUrls.media,
     OpenLayers.Util.getParameterString({
         "repository": lizUrls.params.repository,
         "project": lizUrls.params.project,
         "path": "picture.png"
     })
);

ou

var domain = 'https://' + document.domain + lizUrls.basepath;
var image  = '<img src="' + domain + 'index.php/view/media/getMedia?repository=REPOSITORY&project=PROJECT&path=/media/logo.png" title="Logo" />';