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 montre comment ajouter un JavaScript pour changer le panneau par défaut dans Lizmap.

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

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 :

It’s possible to use a function from the OpenLayers library to help building the URL :

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