Présence autochtone (Leaflet)

À l’Épicerie cette semaine, on a pu voir en vedette notre jardin ancestral autochtone, de même que Lysanne O’Bomsawin. Pour souligner le coup, je me suis mis en tête de programmer une petite carte dynamique Web sur un thème autochtone. Pour m’aider, je me suis servi de ce livre de recettes (oui, oui) qui vient de paraître.

L’idée en achetant ce livre était de pouvoir améliorer les fichiers JavaScript produits par le plugin Qgis2web, qui est autant, sinon plus facile à utiliser que le plugin précédemment vu pour faire du 3D (soit Qgis2threejs). Les réglages sont en effet limités dans Qgis2web. Et ce n’est pas le seul problème: ajouter des images dans la table des attributs QGIS avec le bouton prévu à cet effet aura toujours pour effet de faire planter le logiciel. Pourquoi ce problème n’est-il pas résolu d’une version à une autre? Probablement parce que de toute façon personne n’utilise ce bouton; c’est beaucoup plus simple d’ajouter le lien vers les images, de même que de formater le texte (notamment sa couleur), d’ajouter tout autre élément graphique et de transformer la présentation générale de la page Web en jouant directement dans le code. Aussi : quoi de mieux que d’apprendre à programmer pour ce faire?

Le livre de Numa Gremling est très bien écrit, qui prend les choses depuis le début. Il prend certes pour acquis qu’on sait formater une page html, mais sinon, pour ce qui est de Leaflet lui-même, il est très systématique, progressant de la base vers le haut. Leaflet n’est pas un langage en soi; c’est une bibliothèque de codes JavaScript géo-orientée. Autrement dit, son fondateur, Vladimir Agafonkin, a défini une série de fonctions qui, dans JavaScript, nous permettent d’afficher un fond de carte et de positionner dessus des objets.

Ceux qui ont utilisé Qgis2web savent que, à la fin de l’exportation, le plugin ouvre automatiquement une fenêtre dans votre navigateur. Ce que je ne savais pas, c’est que puisque le navigateur ouvre un fichier qui est encore sur votre ordi plutôt qu’un fichier qui serait véritablement déjà en ligne, soit sur un serveur, les résultats peuvent différer de la vraie expérience. Aussi, Gremling recommande d’installer Xampp qui permet de simuler un serveur et donc de visualiser à l’avance exactement ce à quoi ressemblera la carte une fois en ligne. Une fois Xampp installé, il faut enregistrer les document du projet dans le dossier htdocs. Commencez par y enregistrer le dossier généré par le serveur Leaflet lorsque vous téléchargez leur application. Vous comprendrez alors que ce n’est pas un logiciel que vous avez téléchargé, mais des fichiers .js qui contiennent ce qui est nécessaire pour permettre au navigateur de comprendre le fichier index.html que vous êtes sur le point d’écrire.

Vous aurez besoin aussi d’un éditeur de code. J’ai essayé Notepad++ pour ce projet, mais j’ai remarqué des comportements bizarres du côté de l’éditeur et, donc, la prochaine fois je vais essayer Atom que Joshua m’a recommandé.

L’autre problème que j’ai rencontré c’est la langue française. En effet, je me suis retrouvé à constamment être en train de changer mon clavier de l’anglais au français de manière à pouvoir coder (avec des signes du genre /, \, « ) et écrire la langue de Molière (ou Nelligan) en même temps (avec les accents, apostrophes et cie). Fatiguant…

Le livre de Gremling vient avec un lien vers les fichiers html contenant les recettes qu’il montre. On peut donc faire un copier-coller de son code pour mettre la table rapidement (monter le fichier html avec ses /head, /body, etc.) et commencer à entrer le code relevant plus spécifiquement de Leaflet.

Par contre, à partir du moment où vous commencez à entrer votre propre code, vous devez être très, très attentif. La moindre erreur de virgule, d’espace, de caractère aura pour effet que la carte n’apparaîtra plus dans votre navigateur. Donc, le mieux c’est d’entrer un élément à la fois, de sauvegarder et de vérifier dans le navigateur si la carte fonctionne toujours en rafraîchissant la page. Il est pratique pour ce faire de mettre côte à côte les deux fenêtres (éditeur/navigateur).

Je ne peux pas résumer le livre de Gremling ici, mais on peut rapidement regarder le code de ma carte ensemble. Donc, d’abord mettre la table en html ainsi:

<!DOCTYPE html>
<html lang>
<head>
  <meta charset="UTF-8">
  <title>Template</title>
  <link rel="stylesheet" href="../leaflet/leaflet.css" />
  <script src="../leaflet/leaflet.js"></script>
  <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html, body, #map {
      height: 100%;
      width: 100%;
    }
	
  </style>
</head>

Essentiellement, on dit au navigateur qui lit notre index.html que tout ce qu’il a à savoir en matière de style (leaflet.css) et de géométrie (leaflet.js) se trouve dans le dossier Leaflet. Puis on définit l’apparence de la carte, sa bordure et, ici, le fait qu’elle occupe tout l’écran (100%).

On veut aussi définir les coordonnées du centre de la carte et le zoom sur lequel elle s’ouvre:

<script>
    var myMap = L.map('map', {
      center: [46.817310, -71.328479],
      zoom: 10,

Pour éviter que notre public puisse se promener inutilement ailleurs dans le monde et ainsi risquer de perdre de vue le thème de notre carte, on peut aussi lui imposer des limites, et ce, en choisissant deux points qui dessinent une ligne diagonale allant du coin supérieur gauche au coin inférieur droit d’un carré imaginaire. On définit également le zoom maximal et le zoom minimal (autrement dit, jusqu’où on peut se rendre en cliquant sur – ou sur +).

var myMap = L.map('map', {
      center: [46.817310, -71.328479],
      zoom: 10,
	  maxBounds: [
	  [47.323767, -72.050536],
	  [46.621932, -70.465208]
	  ],
	  maxZoom: 18,
	  minZoom: 10
    });

Nous sommes donc maintenant prêts à ajouter une carte de fond. J’ai choisi watercolor de Stamen.

var basemap = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',
		{
      attribution: '© <Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
    });

Toute bonne carte commence par du contenu. Pour celle-ci, j’ai utilisé le livre de René Gilbert, Présence autochtone.

Quand on emprunte, on le sait, on doit attribuer. Pour ce faire, on se sert d’une fonction dans Leaflet:

myMap.attributionControl.addAttribution('Source: René Gilbert. Présence autochtone à Québec et Wendake. Québec: Editions GID. 2010');

On peut d’ores et déjà ajouter notre fond de carte Stamen avec toutes ces attributions à notre carte.

basemap.addTo(myMap);

Maintenant que le fond de carte est ajouté, vient le moment le plus important, soit ajouter les informations sur notre carte. Pour ce faire, j’ai d’abord créé un marqueur pour chaque lieu dont Gilbert parle dans son livre. Il m’a fallu pour cela trouver (à partir des adresses données dans le livre) les coordonnées dans OpenStreetMap (avec un clic-droit sur l’adresse, puis «Afficher l’adresse»). Attention: OSM a la fâcheuse manie d’utiliser tantôt des virgules, tantôt des points pour séparer les degrés des minutes et des secondes. Vous devez obligatoirement utiliser des points, sinon le marqueur va flotter un peu n’importe où sur la carte. J’ai aussi ajouté un titre à mon marqueur. Autre remarque importante: toujours entrer les latitudes, puis les longitudes.

var Wendake = L.marker([46.86862, -71.35825], {title: 'rue des Trois-Soeurs, Wendake. '});

J’ai ensuite créé une collection Zotero où j’entrais le texte que je voulais lier à mes marqueurs. J’ai pu ensuite compléter la définition de mon marqueur en lui adjoignant une fenêtre surgissante et en collant le texte de ma fiche Zotero correspondante.

Wendake.bindPopup("Avant l\'arrivée des Européens, les Amérindiens du Saint-Laurent pratiquaient un système agraire appelé « les Trois Sœurs ». C\'est un système ingénieux : le maïs sert de tuteur au haricot, ce dernier fixe l\'azote dans le sol grâce aux bactéries sur ses racines, tandis que les courges recouvrent le sol de leurs grandes feuilles, limitant ainsi la propagation des mauvaises herbes (qui n\'ont pas accès à la lumière). Le couvert végétal formé par les courges permet également de garder le sol humide. De plus, ces trois légumes sont complémentaires sur le plan nutritionnel.");

Comme je disais plus tôt à propos de la langue française, si les accents ne sont pas un problème (car nous avons réglé notre page html en UTF-8 (si vous ne vous en souvenez pas, retournez plus haut), les apostrophes sont extrêmement problématiques puisqu’ils sont identiques à l’apostrophe avec lequel on ouvre des chaînes de caractères dans JavaScript (et Python d’ailleurs). Aussi, avant de coller mon texte Zotero dans mon Notepad++, je l’ai passé dans un éditeur de texte et fait Rechercher/Remplacer pour placer devant tous les apostrophes un backslash en bon français (\). Ne reste plus qu’à ajouter le marqueur à la carte (il y a une façon plus générale de le faire, au lieu du cas par cas, mais ça implique le concept de boucle que nous allons voir dans la prochaine entrée de blog). Notre variable finale ressemble donc à cela:

var PlaceRoyale = L.marker ([46.8132, -71.20285], {title: 'Place Royale.'});
PlaceRoyale.bindPopup("Les archéologues y ont mis à jour de nombreux artefacts témoignant de la présence autochtone sur ce site, où les Premières Nations faisaient du troc.");
PlaceRoyale.addTo(myMap)

Répétez 44 fois et vous commencez à avoir assez de marqueurs sur votre carte pour la rendre intéressante. Reste plus qu’à fermer la structure html:

</script>
  
</body>
</html>

Envoyez sur un serveur et voilà: vous avez une carte dynamique en ligne programmée avec du pure code, sans SIG. Avertissement: c’est une version pour ordi seulement; il faudrait ajouter du code pour obtenir une version mobile.

Il reste encore plein de choses à faire, bien sûr, mais j’ai promis le livre à Antoine et je dois le lui remettre demain. Mais quand je le récupérerai, j’aimerais changer l’apparence des marqueurs par des icônes personnalisées, ajouter un titre et aussi un encadré expliquant l’objectif de la carte. J’aimerais aussi profiter du temps des fêtes pour me promener dans le Vieux-Québec et prendre des photos et les ajouter à mes variables.

En conclusion: coder, c’est très exigeant. Ne vous attendez pas à ce que ça fonctionne du premier coup. Il faut être précis, minutieux et ordonné. Si vous n’avez pas ses qualités ou si vous n’êtes pas prêts à investir beaucoup de temps dans votre projet, vous ne devriez pas envisager de coder. Mais dans le cas contraire, il y a un monde de possibilités qui s’ouvre à vous et c’est super gratifiant quand ça marche.