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
Vous trouverez 4 panneaux, 3 onglets et une barre de boutons.
Commençons par cette dernière.
La barre d’outils
Vous 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.
Vous 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.
Ce 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:
Le panneau de réglages généraux
Ré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
Ce 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é.
Pré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.
Le titre n’apparaîtra que si vous sélectionnez Leaflet comme bibliothèque
Dans 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.
Dans 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.
Le 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:
Vous 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:
Pour 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.
Bonjour,
est-il possible d’éditer la taille des cellules Infobulles ? car quand je réalise la carte, les infobulles sont trop étroite et les infos des attributs ne sont pas directement lisibles (barre de scrol nécessaires)
Merci pour les informations éventuelles,
Normalement, depuis la version 2.16 il y a des barres de défilement automatiques sur les infobulles.
Bonjour,
effectivement, je rencontre le même problème pour l’affichage des infos bulles.
S’il n’est pas possible de formater la taille de façon automatique, il est possible de le faire manuellement dans le index.html.
Il faut changer les lignes:
var popupContent = ‘\
par
var popupContent = ‘\
si l’ont veut par exemple une largeur d’info bulles de 400px.
Je précise les lignes car il faut faire la même manipulation autant de fois qu’il y a de calques dans le projet QGIS2WEB.
Une petite correction,
j’ai oublié un bout remplacer par var popupContent = ‘\
Désolé, toujours un problème d’écriture lié à la petite côte derrière le = donc il faut ajouter après cette côte, \
Bon et bien j’abandonne, de toute évidence, les caractères empêche de faire apparaître le code sur cette page web.
C’est en effet le problème des pages avec WordPress…
Y-a-t-il une solution pour que je puisse communiquer cette ligne de code à la personne?
Merci d’avance
Par les commentaires il n’y en a pas. Allez à la page A propos/Contact et je ferais suivre le message par mail.
Bonjour,
Je souhaite que mes infobulles ne s’affichent que lorsque je clique sur ma carte. Je n’ai donc pas coché « Show popups on hover » lorsque j’ai créé mon fichier html via qgis2web dans la partie « Appearance ». Cependant, une fois ma carte en format html, quand je clique dessus rien ne s’affiche. Pouvez vous m’aider ?
Merci d’avance 🙂
Bonjour,
il faut cocher le mode Leaflet en bas de la fenêtre (par défaut sur OpenLayers.
Cordialement
Merci beaucoup pour votre réponse ! C’est exactement ce que je cherchai 🙂
Bonjour à tous,
Merci pour cet article,
Cependant moi je dispose d’une seule couche segmentée en plusieurs sous couches et quand j’exporte ma cartographie je suis obligé de soit tout sélectionner soit tout désélectionner alors que je veux sélectionner les sous couches une par une.
Oui je pourrais dissocier chacune des sous couches pour en créer des nouvelles à part entière mais je trouve ça dommage de ne pas pouvoir exporter qu’une seule couche directement.
Bonjour,
Qu’entendez-vous par une couche segmentée en sous couche ?
– Parlez-vous d’un groupe dans lequel vous avez inclus plusieurs couches?
– Parlez-vous d’une couche pour laquelle vous avez appliqué une catégorisation (analyse thématique) ?
– Parlez-vous d’une couche chargée plusieurs fois en y appliquant une requête au chargement?
Cordialement
Bonjour Monsieur Mahieu,
Merci pour votre réponse, je parle d’une couche pour laquelle j’ai appliqué une catégorisation.
Cdlt,
—
Bonjour,
Malheureusement, il ne vous sera pas possible de sélectionner sur la catégorisation.
Pour cela, il vous faut:
– Charger votre couche,
– Aller sur les propriétés de la couche onglet Général,
– Cliquer sur constructeur de requête et à l’ouverture de la fenêtre y saisir la requête de sélection souhaitée.
– Répéter l’opération autant de fois que vous souhaitez faire apparaitre de valeur.
Imaginons une couche X avec un champ Couleur comportant 3 variables (rouge, vert, bleu).
Vous chargez donc la couche X en sélectionnant la couleur rouge, puis vous charger à nouveau cette couche X en sélectionnant la couleur verte, etc, ce qui vous donnera 3 couches
Cordialement
Bonjour,
Je travail actuellement sur un petit projet cartographique sur QGIS 3.6 et découvre grâce à votre article qu’il est aisé d’exporter le projet avec Qgis2Web. Je me suis donc appliqué à essayer votre méthode, mais je suis confronté à un bug.
Quand je lance le plugin, je me retrouve avec Python, et dans la console, l’erreur suivante :
Impossible de charger la couche source pour INPUT: /var/folders/_5/q1wrsrj52w719b3ybb3gch180000gn/T/PlanTeT_georef01554586833_piped_3857.tif introuvable
Pourtant, le raster indiqué est bien affiché dans QGIS.
Ce problème vous dit-il quelque chose ?
Merci d’avance.
Je travaille généralement sur Windows avec QGis et votre problème est sur Linux. A première vue, je chercherais du côté des droits d’accès de votre répertoire.
Bonjour,
J’ai fait le test avec différent raster (une dizaine) et n’ai généré que 3 fois votre problème.
Toujours obtenu sous QGIS Madeira 3.4 et sup.
Essayer avec une version de QGIS antérieur Las Palmas 2.18 et sup où la je n’ai pas eu de souci.
Cordialement
PS: pour les droits, allez voir à cette adresse https://apple.stackexchange.com/questions/266821/how-can-i-fix-permissions-for-files-in-the-var-folders-zz
Bonjour à tous,
Cet article est vraiment super. J’ai toutefois deux petites questions
– Je n’arrive pas réduire significativement la taille des infobulles. La réponse a été donnée plus haut en modifiant « index.html » mais je ne sais pas quoi rajouter ni comment. Pouvez-vous m’aider ?
– Est-il possible d’envoyer le lien produit par Qgis2web à une personne extérieur? mon lien commençant par : R/Public/nom… la personne ne pourra pas avoir y accès il me semble. Merci de m’éclairer.
Pour la modification des infobulles:
On ne peut pas écrire ici, dans les commentaires, des ordres html car au lieu d’apparaître en clair, la feenêtre commentaires exécute l’ordre. alors il faut biaiser. Je mets entre parenthèses la description du caractère à rentrer.
Dans la page index.html, la ligne à remplacer est: var popupContent = (apostrophe de la touche 4) (signe plus petit que) table > width= »400px »>\ et ce autant de fois que var popupContent apparaît.
Pour la deuxième question: le résultat est un répertoire contenant une page index.html et tou ce qui est nécessaire au fonctionnement de la page. Vous pouvez envoyer ce répertoire à votre correspondant. il suffira qu’il double-clique sur index.html pour que la page apparaisse sur son navigateur. Si vous avez un serveur ouvert au public, vous pouvez mettre ce répertoire en ligne et la page sera servie par votre serveur sur l’adresse votreserveur/repertoire/index.html.
Bonjour,
Est-il possible de mettre en place des liens PDF ouvrables, par clics sur des entités géographiques ?
Merci d’avance.
Je pense qu’il devrait convertir ces liens automatiquement, mais je ne suis pas sûr. Il suffit de mettre les adresses dans un champ de texte. La fonctionnalité est fournie par une bibliothèque Javascript appelée autoloader, mais je ne me souviens pas quels types de lien il prend en charge.
Si non, il faut éditer le fichier LerafLet ou OpenLayers généré pour ajouter la fonction souhaitée.
Merci pour ce retour, en effet, cela devrait fonctionner
Bonjour,
J’ai vu un modèle de carte exportée sous qgis2web avec 2 éléments que je ne parviens pas à reproduire, au niveau de la layers list qu’on affiche sur la carte :
– une couche présente sur la carte, mais qui n’apparaît pas dans la layers list (cette couche doit pertinemment rester affichée en permanence, donc aucun besoin de pouvoir la décocher pour l’utilisateur)
– des couches regroupées, sous forme de liste hiérarchique déroulable et refermable
Merci d’avance pour vos éclairages.
Bonsoir,
Peut-on afficher les coordonnées X et Y du pointeur de la souris ?
merci
cordialement,
Jrege
Bonjour,
Je sais que le sujet est un peu ancien, mais je bloc sur un problème.
Je souhaite afficher une image dans l’infobulle. j’ai réglé mon champ en mode « photo », j’ai vérifié mon chemin d’accès (qui est sur un réseau de type NAS, mais la diffusion va de toute façon rester en interne). La photo apparait bien dans le pluggin QGIS2Web (trop grande, malgré mes réglages de champs, mais je peux toujours recadrer dans photoshop). par contre une fois exporté (sur le même serveur que mes images), je n’ai plus qu’un icon d’image brisé… auriez-vous une idée sur ce qui pourrait causer ce bug?
Merci d’avance et bonne journée!
Bonjour
j’ai un problème de perte d’information en utilisant qgis2web :
j’ai des cercles proportionnels sur un projet QGIS qui se retrouvent tous à la même taille une fois passés par qgis2web .
Quelqu’un aurait une suggestion pour conserver les différentes tailles des cercles?
Pour info, je travaille sur la version 3.10 de QGIS et sur mac.
Bonjour,
Qu’entendez-vous par « cercles proportionnels » ?
Sont-ils liés à la donnée contenu dans un champ ou par une autre méthode de représentation?
Bonjour!
oui , mes cercles de taille variable (réalisés via propriété d’une couche de points>symbologie>taille>assistant…) sont associés à un champ de mes données attributaires.
Et ce sont des nombres entiers (integer)….
Une idée peut être ? Bonne journée
Re-Bonjour,
Le seul moyen pour garder vos tailles de cercles proportionnels à la donnée attributaire est de générer votre carte Web en mode Mapbox GL JS dans Qgis2Web.
Il s’agit d’un des trois Mode (Openlayers, Leaflet et Mapbox GL JS).
Cordialement
Re bonjour Guillaume
je viens d’essayer 2 fois de suite et dès que je sélectionne Mapbox j’ai une erreur Python, dont j’ai copié le descriptif ci-dessous, peut être que cela vous aiguillera sur le problème :
2020-10-26T16:22:13 WARNING Traceback (most recent call last): File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/maindialog.py », line 190, in changeFormat self.autoUpdatePreview() File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/maindialog.py », line 334, in autoUpdatePreview self.previewMap() File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/maindialog.py », line 337, in previewMap preview_file = self.createPreview() File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/maindialog.py », line 300, in createPreview dest_folder=utils.tempFolder()).index_file File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/mapboxWriter.py », line 104, in write folder=dest_folder) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/mapboxWriter.py », line 294, in writeMapbox useOSMB, vtSources, layers) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/mapboxLayerScripts.py », line 145, in writeVectorLayer mblayers = getLayerStyle(layer) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/mapboxStyleScripts.py », line 43, in getLayerStyle mapboxStyle = bridgestyle.qgis.layerStyleAsMapbox(layer) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/__init__.py », line 50, in layerStyleAsMapbox geostyler, icons, warnings = togeostyler.convert(layer) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 32, in convert geostyler = processLayer(layer) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 76, in processLayer rules.extend(processRule(rule, None, layer.opacity(), layer)) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 453, in processRule symbolizers = _createSymbolizers(rule.symbol(), layerOpacity) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 605, in _createSymbolizers symbolizer = _createSymbolizer(sl, opacity) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 619, in _createSymbolizer symbolizer = _simpleMarkerSymbolizer(sl, opacity) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 750, in _simpleMarkerSymbolizer mark = _markGraphic(sl) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 785, in _markGraphic size = _symbolProperty(sl, « size », QgsSymbolLayer.PropertySize) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 572, in _symbolProperty v = _handleUnits(v, units, propertyConstant) File « /Users/tgauthe/Library/Application Support/QGIS/QGIS3/profiles/default/python/plugins/qgis2web/bridgestyle/qgis/togeostyler.py », line 528, in _handleUnits return float(value) * MM2PIXEL ValueError: could not convert string to float:
Bonsoir,
Essayez de réinstaller l’application
Cordialement
Bonjour
j’ai desinstallé l’extension puis réouvert
mais pas de changement, tjrs le même message d’erreur, agaçant ça 🙁
Est ce que la dernière phrase « ValueError: could not convert string to float: » ne serait pas un indice ?
Sinon, pour info, quand j’ai testé qgis2web je n’ai eu des résultats qu’en choisissant openlayers (rien avec leaflet). C’est peut être révélateur d’un disfonctionnement ?
Merci pour vos suggestions !
Bonjour, j’essaie d’exporter à l’aide de Qgis2web mais j’ai un problème. Je veux avoir une légende sur ma carte qui me permet de cocher, décocher les couches de mon choix mais celle-ci n’apparait pas et je ne comprends pas pourquoi?
Merci d’avance pour vos réponses