Comment exporter votre projet QGis en page html en deux clics : le plugin Qgis2Web

Comment communiquer votre travail sous QGis à des partenaires qui n’ont pas d’outils SIG? Sous forme de page html consultable avec n’importe quel navigateur Internet, c’est l’option la plus pertinente.

Le plugin QSGis2Web fournit un moyen facile de distribuer et de visualiser votre travail QGIS sous forme de carte Web utilisant, sans que vous ayez à les connaître, OpenLayers ou LeafLet.

Avec ce plugin, en quelques clics vous exportez votre projet QGis sous forme de page html. Vous créez un répertoire contenant la page index.html et des sous-répertoires avec tous ce qui est nécessaire pour visualiser votre carte, ainsi que les données utilisées.
Un projet QGIS classique contient des données différentes: vecteur et  raster. QGIS2WEBf exporte les couches vecteur en format GeoJSON, crée la base de la carte web en utilisant la version actuelle de Leaflet ou d’OpenLayers(au choix). En plus, le plugin ajoute les données raster sous forme de superposition d’images avec un curseur d’opacité.

Installez le plugin QGis2Web à partir du gestionnaire de plugins (Extensions -> Gérer/Installer des extensions).

Le plugin est accessible à partir du menu Internet -> QGis2web

Généralités

Vous pouvez choisir entre plusieurs couches de fond de carte et définir l’étendue initiale de la carte, ainsi que les dimensions de la carte dans votre document HTML. Pour faciliter l’export de couches volumineuses, vous pouvez désactiver l’option de chargement automatique des données dans votre projet QGis, ou décocher l’affichage de la couche. La carte web générée ayant un contrôle d’affichage des couches, vous pourrez les activer une fois terminé la création de la carte. Si votre couche a plus de 1000 enregistrements, elle ne sera pas affichée dans la fenêtre d’aperçu, mais elle sera incluse dans les données exportées.

L’interface du plugin qgis2web

interface du plugin qgis2web de qgisVous trouverez 4 panneaux, 3 onglets et une barre de boutons.

Commençons par cette dernière.

La barre d’outils

barre d'outils du plugin qgis2web de qgisVous avez deux options pour la bibliothèque de code à utiliser par le plugin pour générer la page HTML. Si vous comptez utiliser le plugin pour créer une carte de base et que vous comptez l’enrichir ou modifier ultérieurement, vous choisirez évidement l’option qui vous correspond. Si non, cela v dépendre des caractéristiques de votre projet. En effet, le plugin essaye de reproduire au mieux votre projet (symbologie, étiquettes, transparence,…). Mais vous verrez à l’usage que tout ne peut pas être reproduit. Leaflet et OpenLayers n’ayant pas les mêmes possibilités, selon les cas votre projet sera mieux reproduit par l’un ou par l’autre.

Si vous changez d’option dans l’interface, l’affichage de la fenêtre d’aperçu est mis à jour automatiquement, et vous verrez le rendu avec la nouvelle bibliothèque de code. Par contre, pour toutes les autres modifications apportées dans les autres panneaux, la mise à jour de l’aperçu ne se fera que si vous cliquez sur le bouton Update preview.

Le bouton Export génère la page html et exporte les données en Json.

La fenêtre d’aperçu.

fenêtre d'aperçu du plugin qgis2web de qgisVous pouvez voir un aperçu du rendu final dans cette fenêtre. N’oubliez pas de cliquer sur le bouton Update preview pour voir les modifications apportées au paramètres du plugin. Tous les éléments ne seront pas forcément à l’échelle finale. Comme vous pouvez le voir dans l’image précédente, la barre de légende a la taille définitive, mais pas la carte en elle-même.

Cette fenêtre n’est pas simplement une image, elle réagit comme le fera la page finale (clics, surbrillances, etc…)

Le panneau layers et groupes.

panneau layers and groups du plugin qgis2web de qgisCe panneau permet de configurer deux choses:

  • le fait que la couche soit affichée part défaut ou pas: si vous cochez la case Visible, la couche sera affichée dès le chargement de la page HTML. Si la case n’est pas cochée, votre couche apparaîtra dans la barre de légende et il faudra cocher sa case dans la page HTML pour qu’elle soit affichée.
  • le rendu des fenêtres popup avec les attributs des entités: cette option ne sera appliquée que dans le cas où vous cocherez l’option Show popups on hover dans le panneau de réglages généraux du plugin.

La gestion des groupes ne fonctionne pas toujours. Si vous avez groupé des couches et que vous ne les voyez pas dans ce panneau, dégroupez les couches dans votre projet.

Les trois options proposées pour la mise en forme des infobulles donnent les résultats suivants:

mise en forme des infobulles du plugin qgis2web de qgisLe panneau de réglages généraux

panneau de réglages généraux du plugin qgis2web de qgisRéglages de l’exportation des données

Vous pouvez exporter le résultat, soit dans un répertoire de votre machine, soit sur un site ftp de votre serveur. Selon le cas, cliquez sur le bouton … pour définir , soit le répertoire, soit les paramètres de connexion.

La Mapping library location vous permet de charger la bibliothèque OpenLayers ou Leaflet dans le répertoire qui sera créé, ou bien de mettre une ligne d’appel de ces bibliothèques en ligne. La première option est plus volumineuse mais plus sûre quant à son fonctionnement.

L’option Minify GeoJson files élimine les espaces inutiles des fichiers GeoJson. Si vos données sont volumineuses, c’est un moyen de réduire leur taille.

L’autre moyen de réduire la taille des données est de jouer sur le niveau de détail des géométries. L’option Precision permet de généraliser les géométries de type ligne et polygone. L’option maintain ne change pas les géométries. Les valeurs de 1 à 15 déterminent le degré de généralisation apporté aux géométrises, avant leur export. La valeur 1 correspond à la plus forte généralisation, la valeur 15 à la plus légère.

Réglages de l’échelle et du zoom.

Extent vous permet de définir l’étendue de la carte au moment de son affichage. Canevas extent prend l’étendue de la vue actuelle de votre projet QGis. Fit to layers extent affichera l’étendue de la carte correspondant à l’étendue de la couche la plus grande. Ceci est calculé seulement sur les couches locales, qu’elles soient vecteur ou raster, pas sur les couches éventuelle issues de connexions WFS ou WMS.

Max et min zoom level permettent de définir la fourchette de zoom autorisée pour la carte.

Restrict to extent, si cochée, empêche de sortir du cadre défini de la carte.

Réglages de l’apparence
  • Add address search ajoute un champ qui permet de rentrer une adresse et de positionner la carte sur celle-ci, en utilisant le geocodage d’adresses.
  • Add layers list ajoute la barre de légende des couches.
  • Geolocate user place un bouton qui permet, en cliquant dessus, de centrer la carte sur la position de l’utilisateur. Attention, avec Chrome cette option ne marche que si votre carte est hébergée en HTTPS.
  • Highlight on hover met les entités en surbrillance quand la souris passe dessus.
  • Layer search permet de configurer un champ de recherche sur un attribut d’une des couches. Une fois entré une valeur dans ce champ, si la valeur est retrouvée dans la table attributaire, la carte est centrée sur l’entité
  • Match project CRS défini le système de coordonnées de la carte en sortie. Si la case est cochée, le système utilisé par la carte sera le même que celui du projet QGis. Par défaut, si la case n’est pas cochée, c’est le système sphérique Mercator (EPSG:3857) qui sera appliqué.
  • Add measure tool ajoute un outil de mesure sur la carte résultante.
  • Show popups on hover, si cochée, affiche une infobulle avec les attributs
  • Template permet de choisir le modèle de carte en sortie. L’option full-screen créera une carte qui aura la taille de l’écran de l’utilisateur, canevas-size créera une carte de la même taile que votre fenêtre cartographique dans votre projet QGis. Vous pouvez ajouter d’autres modèles dans le répertoire user/nom/.qgis2/qgis2web/templates.

Le panneau de réglage du fond de carte

choix du fond de carte dans le plugin qgis2web de qgisCe panneau vous permet de définir un ou plusieurs fonds de carte. Vous pouvez faire une sélection multiple en appuyant sur la touche CTRL et en cliquant sur un élément de la liste. Le résultat sur la carte produite sera un bloc dans la légende permettant d’activer le fond de carte souhaité.

définition de plusieurs fonds de carte dans le plugin qgis2web de qgisPréparation du projet QGis.

Une partie du rendu de la carte finale doit être préparé directement dans votre projet QGis.

Dans l’onglet Projet->Propriétés du projet->Général vous avez trois propriétés de la carte à configurer: le titre du projet, la couleur de surlignage et la couleur de fond.

propriétés du prjet pour le plugin qgis2web de qgisLe titre n’apparaîtra que si vous sélectionnez Leaflet comme bibliothèque

titre de la carte dans le plugin qgis2web de qgisDans Propriétés de la couche-> Général vous pouvez modifier le texte du nom de la couche, celui qui apparaîtra dans la barre de légende de votre carte, pour le rendre plus compréhensible, ainsi que définir les échelles entre lesquelles la couche sera affichée.

options généralkes d'une couche avec le plugin qgis2web de qgisDans propriétés de la couche->Style vous pouvez définir le style de votre couche parmi symbole unique, catégorisé et gradué. D’après les concepteurs du plugin le style 2.5D devrait aussi fonctionner, mais moi je n’ai pas réussi…A suivre.

Dans propriétés de la couche->champs vous pouvez définir le nom qui sera affiché pour chaque champ, en remplissant la colonne Alias.

mise enj forme des champs dans le plugin qgis2web de qgisLe champ Outil d’Edition contrôle ce qui va apparaître dans les infobulles si vous sélectionnez le réglage Show popups on hover. Si vous cliquez sur la valeur d’une case de l’Outil d’Edition vous aurez la fenêtre suivante:

mise en forme des infobulles du plugin qgis2web de qgisVous pouvez choisir parmi trois options (les autres n’ont aucun effet sur la carte générée):

  • Cachée: le champ n’apparaîtra pas dans l’infobulle
  • Edition de texte: l’option par défaut, affiche la valeur du champ attributaire dans l’infobulle
  • Photo: si votre champ contient un lien vers une image, l’image sera incluse dans l’infobulle.

Un exemple de la dernière option est montré ici:

inclusion d'une image dans les infobulles du plugin qgis2web de qgisPour finir, l’étiquetage de votre projet QGis sera exporté sur la carte résultante, avec quelques limitations:

  • Les expressions pour les étiquettes ne sont pas supportées,
  • les buffers autour des étiquettes ne sont exportés qu’avec OpenLayers 3,
  • Les fonds et les bordures ne sont exportés qu’avec Leaflet
  • L’export indique la police de caractères utilisée, mais ne les inclue pas dans le répertoire exporté. Si l’utilisateur n’a pas la police utilisée, l’étiquette n’apparaîtra pas.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *