203 lines
15 KiB
TeX
203 lines
15 KiB
TeX
\chapter{Xia et Map Wraper}
|
||
Faire une carte ne suppose pas toujours une relation à un territoire réel. La carte peut être imaginaire. Cela résout et pose un problème.
|
||
|
||
Généralement un territoire imaginaire n'est pas pensé de manière courbe. Ainsi, les opérations de projection n'ont pas lieu d'être. Aucune géodésie n'est nécessaire. Parfois, même aucun système de coordonnées géographiques ou cartographiques n'est nécessaire ou alors il est inventé de manière assez simple pour qu'il ne s'agisse que d'une grille aisément représentable. On résout ainsi un problème complexe de cartographie.
|
||
|
||
Par contre, cette absence à la géométrie du territoire pose un problème inattendu. En effet, les SIG (systèmes d'information géographiques) interactifs ne sont paradoxalement pas prévus pour utiliser un fond de carte plan qui ne provienne pas d'un ensemble de couches permettant le zoom. Ils sont donc inadaptés à la création de cartes imaginaires interactives.
|
||
|
||
\smallskip
|
||
Pour de telles cartes, il est impossible d'utiliser \emph{Umap}, par exemple, puisqu'aucun choix de fond de carte entièrement personnalisé n'y est possible.
|
||
|
||
\smallskip
|
||
Avec un degré de complexité important, \emph{QGIS} ou \emph{Leaflet} pourraient permettre une telle représentation (voir par exemple \cite{crssimple} pour des cartes astronomiques avec Leaflet). Mais l'investissement étant alors important, nous allons présenter ici deux autres solutions plus simples.
|
||
|
||
\section{Xia}
|
||
L'idée est ici d'abandonner totalement les SIG et d'utiliser un logiciel de dessin. Les besoins de l'interactivité font que celui-ci doit être vectoriel, comme on va le voir. Le choix se porte donc naturellement sur \emph{Inkscape} et l'un de ses modules permettant d'exporter les zones interactives créées avec celui-ci sous la forme d'un site web : \emph{Xia}.
|
||
|
||
\subsection{Installation}
|
||
L'installation de Xia est très simple puisque le module existe sous la forme d'un paquet \emph{deb} (il n'est pas dans les dépôt de Raspberrypi). Il suffit donc de le télécharger sur le site de Xia Fundraiders \cite{xiafunraiders} pour linux et d'utiliser \emph{apt}.
|
||
|
||
\subsection{Utilisation}
|
||
Après avoir redémarré Inkscape, Xia est installé.
|
||
|
||
\smallskip
|
||
Avant de voir précisément comment l'utiliser, il faut en comprendre le fonctionnement général. L'idée est de charger dans Inkscape une image de fond de type raster, du png, par exemple. C'est sur celle-ci que va se trouver toute la carte. Finalement, le fonctionnement de Xia-Inkscape est très proche de celui des SIG, puisque les couches de fond de carte sont des raster et que les éléments qu'on interroge sont vectoriels.
|
||
|
||
Puis, à l'aide des outils d'Inkscape comme les formes (rectangles, ellipses, polygones fermés, arcs, \dots), on définit les zones que le survol de la souris permettra de mettre en évidence et qui présenterons au clic des informations dans le bandeau latéral.
|
||
|
||
La figure \ref{fig:xiahtml1} présente la page d'accueil créée par Xia sur la base de la carte du parc d'attraction des rêves présenté au paragraphe \ref{par:parcdattractiondesreves}, page \pageref{par:parcdattractiondesreves}.
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{XiaHTML1ParcAttraction}
|
||
\caption{À l'ouverture du site\label{fig:xiahtml1}}.
|
||
\end{figure}
|
||
|
||
On y voit le bandeau latéral dans lequel des informations générales sur le site peuvent documenter la carte et dans lequel viendront des informations sur les objets de la carte qui seront cliqués.
|
||
|
||
On y voit aussi la carte sur laquelle se trouve en haut une image cliquable et un polygone opaque cliquable qui devient transparent au survol de la souris (voir figure \ref{fig:xiahtml2}).
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{XiaHTML2ParcAttraction}
|
||
\caption{Mise en évidence d'une zone au survol de la souris.\label{fig:xiahtml2}}.
|
||
\end{figure}
|
||
|
||
Le polygone peut être rendu opaque sous Inkscape en lui attribuant un fond totalement blanc.
|
||
|
||
\begin{figure*}[h]
|
||
\centering
|
||
\begin{subfigure}[b]{0.45\textwidth} % "0.45" donne ici la largeur de l'image
|
||
\centering \includegraphics[width=\textwidth]{XiaHTML4ParcAttraction}
|
||
\caption{Au survol.}\label{fig:xiahtml4}
|
||
\end{subfigure}
|
||
~ % ce symbole ajoute un espacement horisontal entre les premières deux images
|
||
\begin{subfigure}[b]{0.45\textwidth}
|
||
\centering \includegraphics[width=\textwidth]{XiaHTML3ParcAttraction}
|
||
\caption{Au clic.}\label{fig:xiahtml3}
|
||
\end{subfigure}
|
||
\caption{Le polygone du labyrinthe.}\label{fig:projmerkator}
|
||
\end{figure*}
|
||
|
||
\smallskip
|
||
Ce qu'on ne voit pas avec la zone circulaire à gauche du labyrinthe, qui a été créée à l'aide de l'outil ellipse d'Inkscape et à laquelle on a attribué un fond entièrement noir.
|
||
|
||
De cette manière, cette zone devient transparente au survol et est cliquable mais non zoomable, contrairement à la zone du labyrinthe.
|
||
|
||
En effet, on voit celle-ci au survol de la souris à la figure \ref{fig:xiahtml4} et à la figure \ref{fig:xiahtml3} le zoom se produisant quand on lui clique dessus.
|
||
|
||
Parallèlement, on voit aussi sur la figure \ref{fig:xiahtml3} dans le bandeau latéral gauche, les informations associées à la zone du labyrinthe.
|
||
|
||
\smallskip
|
||
Finalement, sur la figure \ref{fig:xiahtml5}, on peut voir une zone elliptique placée sous la zone de l'image en haut à gauche. On voit ainsi qu'il est possible d'ordonner la superposition des éléments graphiques créés avec Inkscape pour que certains soient entièrement cliquables et d'autres pas.
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{XiaHTML5ParcAttraction}
|
||
\caption{Une des îles sous l'image.\label{fig:xiahtml5}}.
|
||
\end{figure}
|
||
|
||
\subsection{Techniquement}
|
||
Voyons maintenant comment procéder pour obtenir ce résultat.
|
||
|
||
On voit sur la figure \ref{fig:xiainkscape1} l'ensemble des formes géométriques superposées à l'image de fond constituant la carte. Celles-ci sont une ellipse pour l'île-montagne (en haut), un rectangle pour l'île des basses terres (en bas), un rectangle avec une rotation vers la droite pour le téléphérique entre les deux îles, l'image du dragon en haut, le polygone blanc en bas à droite, l'ellipse noire au milieu et le polygone transparent entourant le labyrinthe. Toutes ces formes ont été créées avec Inkscape et sont fermées.
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{XiaInkscape1ParcAttraction}
|
||
\caption{Les formes utilisées.\label{fig:xiainkscape1}}.
|
||
\end{figure}
|
||
|
||
À l'instar du polygone blanc sélectionné, dont on voit à droite que les propriétés comportent un titre et une description, toutes ces formes ont ces deux catégories des propriétés remplies. Ce sont elles qui vont présenter leur contenu dans le bandeau latéral gauche une fois cliquées, comme on le voit dans la figure \ref{fig:xiahtml3}.
|
||
|
||
\smallskip
|
||
Précisons enfin le comportement des trois éléments : polygone blanc, ovale noir et rectangle du téléphérique.
|
||
|
||
En choisissant le blanc pour couleur de fond d'un élément, on permet un masquage de l'image de fond qui devient transparent au survol et dont les propriétés s'affichent au clic dans le bandeau latéral.
|
||
|
||
En choisissant le noir pour couleur de fond d'un élément, on ne masque pas la zone sous-jascente et on permet un clic éventuellement déclencheur d'événements, comme un compteur par exemple, sans présenter les propriétés de l'objet.
|
||
|
||
En ne choisissant pas de couleur de fond, on ne masque pas la zone sous-jascente et on permet un clic présentant les propriétés de l'objet.
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{XiaInkscape2ParcAttraction}
|
||
\caption{Les formes utilisées.\label{fig:xiainkscape2}}.
|
||
\end{figure}
|
||
|
||
\bigskip
|
||
Après avoir défini les zones cliquables et leur propriétés : titre et description, on peut réaliser l'étape finale, c'est-à-dire utiliser Xia à partir de ce qu'on a réalisé sur Inkscape. Avant cela, il semble bon d'enregistrer le travail en SVG. Cela fait, comme le montre la figure \ref{fig:xiainkscape2}, on se rend dans le menu \emph{Extensions}, sous \emph{Exporter} et on sélectionne \emph{Xia...}.
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{XiaInkscape3ParcAttraction}
|
||
\caption{Les formes utilisées.\label{fig:xiainkscape3}}.
|
||
\end{figure}
|
||
|
||
La figure \ref{fig:xiainkscape3} montre la fenêtre de Xia qui s'ouvre alors. Elle est très simple car le seul onglet important est celui des \emph{Options}.
|
||
|
||
\smallskip
|
||
Dans celui-ci on trouve tout d'abord une case à cocher intitulée \emph{Single file}.
|
||
|
||
Si elle est cochée, celle-ci permet d'obtenir un fichier HTML uniq ue dont les librairies nécessaires pour que la page créée fonctionne sont appelée dynamiquement. Il sera alors donc nécessaire d'avoir une connexion internet pour les charger et la page sera dépendante des serveurs les fournissant.
|
||
|
||
Si elle n'est pas cochée, alors Xia va construire une arborescence de site classique avec les librairies et votre site fonctionnera même sans connexion au réseau. Votre site sera alors plus lourd et sera construit autour de plusieurs fichiers.
|
||
|
||
\smallskip
|
||
On trouve ensuite \emph{Select export} avec un menu déroulant présentant \emph{Sidebar}, \emph{Material}, \emph{Game1Click} et \emph{GameDragAndDrop}. Il s'agit de modèles pour différentes utilisation de Xia, notamment des jeux. Ici, seul le modèle \emph{Sidebar} nous intéresse.
|
||
|
||
\smallskip
|
||
Enfin, on trouve \emph{Target folder}. Il s'agit du répertoire dans lequel Xia va mettre les fichiers. Celui-ci doit donc être créé préalablement.
|
||
|
||
\medskip
|
||
Ces éléments choisis, on exécute Xia en cliquant sur \emph{Appliquer}. Cela fait, on peut ouvrir le site en allant dans son répertoire et en ouvrant le fichier \emph{.html} qui s'y trouve.
|
||
|
||
\medskip
|
||
Remarquons que le nom du fichier HTML est celui des métadonnées des propriétés du document du menu fichier d'Inkscape. En remplissant celles-ci (les métadonnées) de manière plus approfondies, on construit aussi les informations sur le document accessibles via l’icône i entouré en bas à droite de la figure \ref{fig:xiahtml1}.
|
||
|
||
À droite de celle-ci se trouvent aussi une icône permettant de mettre le site en plein écran et une autre pour le recharger.
|
||
|
||
\smallskip
|
||
Quant aux information apparaissant dans le bandeau latéral au chargement de la page d'accueil, ce sont celles des propriétés de la carte, c'est à dire de l'image de fond.
|
||
|
||
\bigskip
|
||
La gestion des informations des informations apparaissant au chargement du site comme celles constituant les informations de chaque élément, peut être finement réalisée avec un langage descriptif \emph{MARKDOWN} supporté par Xia, permettant des titres, l'ajout de liens et d'images, \dots{} comme le montre la fin du manuel en français (voir \cite{xiafunraidersman}) qu'il faut bien étudier.
|
||
|
||
\begin{figure*}[th!]
|
||
\centering
|
||
\includegraphics[width=\textwidth]{MapWraper}
|
||
\caption{Transformation d'une image en carte.\label{figure:mapwraper}}
|
||
\end{figure*}
|
||
|
||
\bigskip
|
||
Xia est un logiciel très intéressant pour créer des cartes sans géométrie. Évidemment, il est contraignant dans la forme produite et si on ne connaît pas le langage HTML, il sera impossible d'en changer. Cependant, son couplage avec Inkscape est très intéressant et sa facilité d'utilisation va permettre de réaliser des cartes cliquables tout-à-fait pertinente et dont la publication sur internet ne posera que peu de problèmes (attention, le code créé par Xia n'est pas responsive et les cartes qu'il produit peuvent ne pas fonctionner sur certains écrans).
|
||
|
||
Cependant, attention, l'utilisation de Xia peut soulever plusieurs difficultés inattendues.
|
||
|
||
Si on accepte de mettre quelque peu la main dans le code HTML, les sites fournis par Xia seront une bonne base pour une personnalisation plus avancée qui passera par la maîtrise du HTML.
|
||
|
||
\section{Map Wraper}
|
||
Entre Xia et Leaflet se trouve un logiciel permettant de reporter une image sur un fond comme celui d'OpenStreetMap. Il s'agit de Map Wraper (voir \cite{Mapwraper}).
|
||
|
||
Celui-ci nécessite une authentification. Si vous disposez d'un compte sur OpenStreetMap, alors, vous pouvez utiliser celui-ci. La figure \ref{figure:mapwraper} présente le site après la connexion. On y voit un onglet \emph{Upload Map} qui va permettre d'y envoyer une image ou une carte. Un menu déroulant présente les options \emph{Is a map} et \emph{Not a map}. En choisissant « Not a map » et une image à charger, on peut créer un projet de géoréférencement de cette image. On peut penser à une carte papier scannée ou à une carte imaginaire mais qui doit être localisée quelque part sur un fond réel.
|
||
|
||
Il faut cependant bien faire attention à ce qu'on envoie sur Map Warper, car les projets sont par défaut publiques et donc visibles par tout le monde.
|
||
|
||
\begin{figure*}
|
||
\centering
|
||
\includegraphics[width=\textwidth]{Rectify-MapWraper}
|
||
\caption{Positionnement de l'image sur la carte.\label{fig:rectifymapwraper}}
|
||
\end{figure*}
|
||
|
||
Un fois l'image sur le site, il est possible de la positionner sur un fond de carte. L'onglet \emph{Rectify} présenté sur la figure \ref{fig:rectifymapwraper}, est là pour cela. Il y est possible en effet de créer des points de correspondance entre l'image et la carte de fond comme on le voit bien sur la figure. Pour cela, il faut utiliser l'outil \emph{Add control points} en forme de goutte. Pour une bonne correspondance, plusieurs points sont nécessaires.
|
||
|
||
Une fois cela fait, en utilisant le bouton \emph{Wrap image!}, une carte positionné à l'endroit voulu est crée à partir de l'image.
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{Preview-MapWraper}
|
||
\caption{Le résultat prévisualisé.\label{fig:previewmapwraper}}
|
||
\end{figure}
|
||
|
||
\smallskip
|
||
Une prévisualisation est alors possible, comme le montre la figure \ref{fig:previewmapwraper} et un export sous différentes formes va permettre d'importer cette carte sous Umap (voir figure \ref{fig:exportmapwraper}).
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{Export-MapWraper}
|
||
\caption{Exportation sous différentes formes.\label{fig:exportmapwraper}}
|
||
\end{figure}
|
||
|
||
\smallskip
|
||
Pour récupérer cette carte-image avec Umap, il faut se connecter, passer en mode édition et se rendre dans l'édition des paramètres de la carte (la petite roue dentée). On peut alors se rendre dans l'onglet \emph{Fond transparent}, comme le montre la figure \ref{fig:mapwraperdansumap}.
|
||
|
||
\begin{figure}
|
||
\centering
|
||
\includegraphics[width=0.5\textwidth]{MapWraperDansUmap}
|
||
\caption{Utilisation de la carte de Map Wraper dans Umap.\label{fig:mapwraperdansumap}}
|
||
\end{figure}
|
||
|
||
On utilise alors l'url de fond transparent fournie par Map Wrapper sous \emph{Tiles} (voir figure \ref{fig:exportmapwraper}) et on règle la transparence avec le curseur dédié.
|
||
|
||
Évidemment, l'exemple de l'Étoile de Tir n'est probablement pas le meilleur. En effet, la transparence est celle de l'ensemble de l'image. Si on dispose de données de traces gpx (suivi GPS) et/ou de formes geojson, kml ou autres, on peut les importer directement dans Umap et le problème de la transparence globale n'apparaîtra pas. Mais, pour une carte scannée ou pour un dessin de région imaginaire, ce n'est pas possible et il est même intéressant que ceux-ci apparaissent délimités globalement par la transparence.
|