Réseau routier et paroisses de Paris – III

Lors de la dernière entrée au sujet du projet « Paris », j’ai laissé entrevoir la suite des choses en parlant brièvement de Leaflet. Or, depuis le mois d’août, je suis assez discret en ce qui a trait à ce sujet. Pour ceux et celles qui suivent les articles, vous pouvez voir que je me consacre davantage à mon projet d’étude: mon mémoire sur le Congo-Océan.

En revanche, même si ce projet est sur pause, cela ne signifie pas pour autant que je l’ai abandonné. En effet, j’ai quand même réussi à trouver un peu de temps à gauche à droite afin de construire une ébauche de site web (voir ci-dessous).

Le site web dont il est question. Il s’agit d’un travail en cours

En combinant le JavaScript, le HTML et le CSS, j’ai réalisé un site web sur laquelle il est possible de consulter une page « classique » et une carte Leaflet. Ce mix me permettra de diffuser, en simultané, un texte scientifique et une carte interactive sans que le lecteur ait à quitter la page ou faire des va-et-vient entre l’article et la carte. J’ai été influencé par les logiciels de cartes narratives de style Story Map qui ont déjà été abordés dans ce carnet de recherche (https://mapastoria.historiamati.ca/2020/06/10/storymap-js/). Toutefois, je n’ai pas lié le texte à la carte comme c’est le cas avec les cartes narratives. Le lecteur ne verra pas de changements sur la carte au fur et à mesure qu’il progressera dans la lecture, comme c’est le cas avec les cartes narratives. Bien que j’aurais pu le faire, je ne crois pas qu’une telle fonctionnalité se porte bien au type de projet que je mène présentement.

Je parle de code de défilement et de narration, mais qu’est-ce que ça implique me direz-vous ! Afin de mettre en lumière ma méthodologie, je vais vous présenter, étape par étape, la réalisation de ce site web. Tout d’abord, j’ai divisé ma page en trois sections (div), respectivement, en-tête, carte Leaflet et panneau latéral. Avec la fonction Flexbox, j’ai ensuite disposé les trois boîtes de manière qu’elles soient disposées telles qu’on les voit sur l’image présentée plus haut. Ensuite, j’ai créé une quatrième section (Texte) qui est sous les trois sections évoquées plus haut. Chaque section du texte est associée aux titres dans l’En-Tête avec une fonction <a href>. Il y a aussi des touches « retourner à la carte » qui fonctionnent de la même manière. Cela permettra au lecteur de naviguer facilement entre le texte de l’article et la carte.

En ce qui concerne la carte en tant que telle, j’ai utilisé un simple fond de Stamen (http://maps.stamen.com/#watercolor/12/37.7706/-122.3782) et j’ai suivi les instructions dans le Leaflet Cookbook de Numa Gremling (suivez ce lien pour consulter un compte rendu de ce livre https://mapastoria.historiamati.ca/2020/11/09/compte-rendu-de-leaflet-cookbook-recipes-for-creatin-dynamic-web-maps/). J’ai ensuite ajouté une fonction Layer control (en haut à droite) afin d’offrir un contrôle des différentes couches au lecteur. Avec la fonction L.GeoJSON, j’ai aussi ajouté des couches que j’ai réalisées dans QGIS à partir du plan parcellaire APUR d’ALPAGE et du travail de Paul Rouet. Cela me permettra, lors d’étapes subséquentes, d’utiliser les features pour intégrer les données présentées dans un article précédent, celles colligées dans Excel et jointes aux données géographiques, à mes marqueurs GeoJSON. Avec les fonctions bind.popup et bind.infobulle, je pourrai aussi intégrer les données dans des boîtes de texte et des infobulles

Ce projet est presque terminé. Il ne me reste plus qu’à terminer la base de données ce qui est, à mon avis, la partie la plus consistante du travail. Bien qu’il s’agisse d’une tâche simple, l’immense quantité de données que je dois colliger rend ce travail long et fastidieux. Je vais écrire pour donner suite à ce projet, mais probablement pas avant d’avoir terminé la retranscription des données dans QGIS. Toutefois, je vous promets tout de même une entrée de carnet de recherche au sujet de la personnalisation des popup et des infobulles.

Laisser un commentaire

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