Documentation Versions: Lizmap 3.5 Lizmap 3.4 Lizmap 3.3 Lizmap 3.2 Lizmap 3.1/3.0/2.x
LIZMAP
3.5
  • Introduction
  • Guide utilisateur
  • Guide de l’éditeur
    • Démarrage rapide
    • Extension QGIS Lizmap
    • Configuration
      • Configuration du projet
      • Configuration de la couche
      • Légende
      • Popup
        • Activer les popups
        • Popup automatique
        • Popup lizmap
        • Form popup
        • Popup QGIS
        • Relations 1 à n
      • Action dans une popup
      • Média
      • Expression QGIS
      • L’impression
      • Requête spatiale
      • Autre configuration
      • Optimisation
    • Personnalisation
  • Guide pour l’administrateur
  • Installation et mise à jour de Lizmap
Lizmap
  • Docs »
  • Guide de l’éditeur »
  • Configuration »
  • Popup
  • View page source

Popup¶

Sommaire

  • Popup
    • Activer les popups
    • Popup automatique
      • Configuration simple des popups
      • Masquer une colonne ou modifier son nom
      • Utilisation de médias : images, documents, etc.
      • Utilisation de liens externes
    • Popup lizmap
      • Introduction
      • Mise en oeuvre
      • Utilisation des médias et des liens externes
    • Form popup
    • Popup QGIS
    • Relations 1 à n
      • Lien vers une mise en page PDF QGIS
      • Affichez les enfants de manière compacte

Activer les popups¶

Avec le plugin, vous pouvez activer des popups pour une couche ou pour un groupe configuré avec l’option Group as layer.

Dans l’onglet Layers, cochez la case Popup.

../../_images/publish-link.jpg

For the Group as layer option you must select the option for the group and for all the layers included you want to show in the popup: in this case, only the layers with the option Popup checked will be shown.

Il existe trois types de popup :

  • auto, lire Popup automatique
  • lizmap, lire Popup lizmap
  • qgis, lire Popup QGIS
  • form, read Form popup

Dans l’application web Lizmap, un clic sur une entité déclenchera la popup si (et seulement si) :

  • la popup est activée

    • depuis l’extension pour une couche ou un groupe
    • ou la couche a des capacités d’édition pour les entités existantes
  • la couche est cochée dans la légende, et donc visible

  • l’utilisateur a bien cliqué sur un endroit de la carte où on voit de la donnée pour l’une des couches avec les popups actives.

Note

For point layers you need to click in the middle of the point to display the popup. The tolerance can be setup in Lizmap plugin ‣ Map options ‣ Map tools.

Vous pouvez mettre à jour où la popup est affichée dans l’interface web dans Extension Lizmap ‣ Options de carte ‣ Interface. Vous pouvez choisir entre :

  • dock
  • minidock
  • map
  • bottomdock
  • right-dock

Popup automatique¶

Le système de popup auto de Lizmap Web Client affiche qui présente les colonnes de la table attributaire en ligne dans 2 colonnes Champ et Valeur, comme ci-dessous :

Champ Valeur
id 1
nom Un nom
description Cet objet …
photo :-)

On peut modifier un peu les informations affichées via QGIS, et aussi afficher des images ou des liens.

Configuration simple des popups¶

Via le plugin, si on clique seulement sur la case à cocher Activer les popups sans modifier le contenu via le bouton Contenu, alors c’est l’affichage par défaut ou mode simple qui est utilisé.

On peut néanmoins jouer sur plusieurs choses dans QGIS et via le plugin Lizmap pour paramétrer les champs qu’on veut afficher, renommer les champs, et même afficher des images, des photos ou des liens vers des documents internes ou externes.

Masquer une colonne ou modifier son nom¶

Avertissement

Cela marche seulement en utilisant la popup type Lizmap ou Auto. La popup type QGIS applique l’infobulle QGIS.

Vous devez utiliser l’onglet Propriétés de la couche ‣ Champs dans QGIS :

  • pour masquer un colonne dans la popup, décocher la case à cocher WMS pour le champ correspondant. La colonne WMS est sur la droite du tableau. Ceci cachera le champ dans QGIS Serveur pour toutes les requêtes WMS.
  • pour renommer un champ, vous devez utiliser un alias sur le champ. Mais pour éditer cette colonne, ajouter le depuis l’onglet Propriétés de la couche ‣ Formulaire d’attributs.
../../_images/features-popup-fields.jpg

Utilisation de médias : images, documents, etc.¶

Si vous souhaitez utiliser des médias dans votre popup (images, documents PDF…) dans votre popup, vous devez utiliser le répertoire Média.

Pour une entité donnée, en utilisant un chemin dans votre champ commençant par media/, Lizmap affichera :

  • l’image elle-même pour les fichiers jpeg ou png
  • le contenu pour les fichiers txt ou HTML
  • un lien vers toute autre extension de fichier

Voir aussi

Voir le chapitre Média pour plus de détail sur l’utilisation de documents du répertoire media dans les popups.

Utilisation de liens externes¶

Enfin on peut aussi utiliser dans les colonnes des liens Web complets vers une page ou une image:

  • l’image pointée par le lien sera affichée à la place du lien
  • le lien web sera affiché et cliquable

Popup lizmap¶

Introduction¶

Si l’affichage simple du tableau ne correspond pas à vos besoins, vous pouvez écrire un modèle de popup. Pour ce faire, vous devez connaître le format HTML. Voir par exemple : https://www.w3schools.com/html/

Avertissement

lorsque vous utilisez le mode lizmap, la configuration précédente ne fonctionne plus pour renommer un champ : c’est vous qui contrôlez via le modèle les affichages. La gestion des médias est encore possible, mais c’est à vous de bien la prévoir.

Mise en oeuvre¶

Via le bouton Configurer du plugin Lizmap, on peut modifier le modèle de la popup. En cliquant sur ce bouton, une fenêtre s’affiche avec 2 zones de texte :

  • une zone de texte éditable qui permet d’écrire le contenu
  • une zone de texte en lecture seule qui montre un aperçu de la mise en forme
../../_images/features-popup-configure.jpg

On peut écrire du texte simple, mais il est conseillé d’écrire au format HTML pour le mettre en forme. On peut par exemple utiliser les paragraphes, les titres, etc

<h3>A Title</h3>
<p>An example of paragraph</p>

Le comportement est le suivant:

  • Si le contenu des 2 champs texte est vide, un tableau sera présenté dans la popup (modèle par défaut)
  • Si le contenu n’est pas vide, le modèle écrit dans le contenu sera utilisé à la place pour l’affichage de la popup

Lizmap Web Client sait remplacer automatiquement une variable représentant le nom d’un champ de la table attributaire par son contenu. Pour ajouter le contenu d’une colonne dans la popup, on utilise le nom de la colonne précédé d’un dollard, le tout encadré d’accolades. Par exemple:

<h3>A Title</h3>
<p>An example of paragraph</p>
<p>A name: <b>{$name}</b></p>
<p>Description: {$description}</p>

Note

Si vous avez choisi un alias pour un champ, vous devez utiliser l’alias plutôt que le nom, entre crochets.

On peut aussi utiliser les valeurs des colonnes comme paramètres pour styliser le texte. Par exemple ici pour mettre le fond dans la couleur de la ligne de bus:

<p style="background-color:{$color}">
<b>LINE</b> : {$ref} - {$name}
<p/>

Utilisation des médias et des liens externes¶

On peut utiliser les médias référencés dans le contenu des champs de la table attributaire, même si on configure un modèle de template. Pour cela, il faut utiliser les colonnes de média en anticipant le fait que Lizmap-Web-Client remplace automatiquement le chemin relatif de type /media/monfichier.jpg par l’URL complète avec laquelle on peut y accéder depuis l’interface WEB.

On peut aussi utiliser des URL complètes pointant vers les liens ou des images hébergées sur un autre serveur.

Voici un exemple de contenu d’un modèle gérant les médias et utilisant un lien externe: :

 <p style="font-size:0.8em;">A Title</p>
 <p>The name is {$name}</p>
<p>
   A sample image<br/>
   <img src="{$image_column}" style="">
 </p>

 <p><a href="{$website}" target="_blank">Web link</a></p>

 <p><img src="https://www.3liz.com/images/logo-lizmap.png"/></p>

Voir aussi

Voir le chapitre Média pour plus de détail sur l’utilisation de documents du répertoire media.

Form popup¶

Si vous avez défini une mise en page de formulaire avec le Formulaire par Glisser-déposer pour une couche dans Propriétés de la couche ‣ Formulaire d’attributs, vous pouvez également l’afficher dans sa popup. Voir la documentation QGIS sur le Formulaire par Glisser-déposer.

Le formulaire QGIS, conçu pour le HTML, s’affiche directement dans la popup. Vous ne pouvez pas modifier la popup au moment de l’exécution.

Tabs defined in the Form Layout in QGIS will also be displayed as HTML tabs in the popup.

If you want to alter the popup HTML, then you must use QGIS Popup instead of Form Popup.

Popup QGIS¶

QGIS popups can be configured via QGIS ‣ Layer properties ‣ Display ‣ HTML Map Tip. The main advantages of this approach are:

  • HTML est utilisé
  • Vous pouvez utiliser des variables et expressions QGIS, ce qui permet d’ajouter de l’information créé dynamiquement
  • la popup peut-être prévisualisée directement dans QGIS, en utilisant les infobulles. Vous pouvez les activer dans le menu Vue ‣ Afficher les infobulles
  • La configurations des popups est enregistrée dans le projet QGIS et le style de la couche, donc elle peut-être réutilisée dans d’autres projets Lizmap sans avoir à recopier la configuration.

Similar to Form popup, you have a Drag and drop form designer for a layer, you can click on the Copy the drag and drop designer button. This will erase any existing maptip set on the layer and will generate the QGIS Expression matching the form layout.

To have a similar popup as the auto one, you need to click the button in the Lizmap plugin Generate the HTML table.

To display some color with HTML, you can use this sample above :

<font color="red">Text</font>

Relations 1 à n¶

It is possible to display multiple objects (photos, documents) for each geographical feature. To do so, you have to configure both the QGIS project and the Lizmap config.

Dans le porjet QGIS :

  • Use 2 separate layers to store the main features and the pictures. For example trees and tree_pictures. The child layer must contain a field referencing the parent layer id.
  • Configure aliases and field types in Layer Properties -> Fields. Use Photo for the field which will contains the relative path to pictures.
  • Add a relation in QGIS project properties between the main layer trees and the child layer tree_pictures in Project properties -> Relations.
  • Add data to the layers. You should use relative path to store the pictures path. Theses paths must refer to a project media subdirectory, for example: media/photos/feature_1_a.jpg

Dans le plugin Lizmap :

  • In the Layers tab, activate popup for both layers. You can configure source of the popup if you need specific layouts
  • For the parent layer, activate the option Display relative children under each object (use relations)
  • Optionally, add the two layers in the Attribute table tab
  • Optionally, you can activate editing for the two layers, to allow the web users to create new features and upload pictures
  • Enregistrez et publiez votre projet et la configuration de Lizmap

Dans Lizmap Web Client :

../../_images/feature-popup-toggle-compact-mode.jpg

If relative children popup are defined as auto, this button will be visible in the feature’s popup at the top of related objects. Click it to compact all related objects in one table with search, sort and paging capabilities.

Lien vers une mise en page PDF QGIS¶

Every feature of a layer with an atlas configured will have a link (1) at the end of its popup which open a PDF for this specific feature, using the QGIS Atlas layout. If the layout contains custom text fields, a button (2) will be displayed. Clicking this button, allows you to type values for those custom text fields before printing. To enable this feature, you need a QGIS Layout with atlas enabled on that layer and to download the AtlasPrint QGIS Server plugin on GitHub : https://github.com/3liz/qgis-atlasprint

../../_images/feature-popup-atlas.jpg

Affichez les enfants de manière compacte¶

Vous pouvez changer la manière dont les enfants sont affichés et les faire ressembler à une table. Pour cela, vous devez adapter le code HTML de votre couche enfant et utiliser quelques classes pour le manipuler.

  • « lizmap_merged » : Vous devez attribuer cette classe à votre table.
  • lizmapPopupHeader : If you want to have a better display of your headers, you will need to put this class in the “<tr>” who contains them
  • lizmapPopupHidden : This class permit you to hide some elements of your children that you want to hide when there are used as a child but you still want to see them if you display their popup as a main Popup

Voici un exemple :

<table class="lizmap_merged">
 <tr class="lizmapPopupHeader">
     <th class="lizmapPopupHidden"><center> Idu </center></th>
     <th> <center> Type </center> </th>
     <th> <center> Surface</center> </th>
  </tr>
  <tr>
     <td class="lizmapPopupHidden"><center>[% "idu" %]</center></td>
     <td><center>[% "typezone" %]</center></td>
     <td><center>[% "surface" %]</center></td>
  </tr>
</table>
../../_images/popup_display_children.jpg
Next Previous

© Copyright 2014-2022, 3liz.

Built with Sphinx using a theme provided by Read the Docs.