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.
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.
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"
})
);