Pour cette entrée de carnet, je vous propose d’explorer le code de mon application web. Pour les plus habitués d’entre vous, ce code vous semblera probablement simple, voire problématique, à certains endroits. Toutefois, pour ceux qui sont, comme moi, des néophytes, ce code vous offrira une excellente entrée en la matière lorsque vous chercherez à réaliser une application web à partir de la librairie Javascript Leaflet.
Débutons avec le code HTML.
Le header
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Template</Title>
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css"/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../leaflet/leaflet.css" />
<script src="../leaflet/leaflet.js"></script>
<script src="../js/paris.js"></script>
<script src="../js/Test.js"></script>
</head>Il faut tout d’abord un en-tête dans laquelle il est possible d’appeler d’autres fichiers qui moduleront l’allure (CSS) ou qui nous permettront d’aller chercher du contenu (JavaScript) que nous ajouterons à notre page web. La section suivante, le body, contient le corps de mon site. On y retrouve notamment des boîtes et la carte Leaflet.
Le body
<body>
<nav>
<ul>
<li><a href="#subtitle1">Methodologie</a></li>
<li><a href="#subtitle2">Travailler avec des cartes
anciennes</a></li>
<li><a href=# target="_blank">Bilbiographie</a></li>
</ul>
</nav>
<script
src="https://unpkg.com/simplebar@latest/dist/simplebar.js">
</script>
<section>
<div id="conteneur">
<div class="sidetext" data-simplebar data-simplebar-auto-
hide="false">
<h1 class="titre">Le réseau routier et les paroisses de
Paris</h1>
<p></p>
</div>
<div id="carte"></div>
</div>
</section>
<section>
<div>
<h1 id="subtitle1">Méthodologie</h1>
<p id="soustexte">Lorsque vint le temps de créer la
carte...</p>
<h1 id="subtitle2">Travailler avec des cartes
anciennes</h2>
<p id="soustexte">Travailler avec des cartes permet ...
</p>
<p id="soustexte">Prenons l’exemple de l’historienne ...
</p>
<p id="soustexte">Un second exemple est celui de ...</p>
<p id="soustexte">Cependant, même sans résultats
tangibles ...</p>
</div>
</section>Je propose, dans cette section, d’explorer, de haut en bas, le contenu de la page web.
La première section est un menu qui permet aux utilisateurs de naviguer entre les différentes sections de la page web. Rien de bien compliqué, il s’agit simplement de balises a href attachées aux titres des différentes sections de la page. Le résultat est efficace et nécessite peu de fantaisie. En cliquant sur une des balises, méthodologie par exemple, la page recharge et s’ouvre sur la section Méthodologie du site web. Le style est quant à lui géré par les balises ul et li.
<nav>
<ul>
<li><a href="#subtitle1">Methodologie</a></li>
<li><a href="#subtitle2">Travailler avec des cartes
anciennes</a></li>
<li><a href=# target="_blank">Bilbiographie</a></li>
</ul>
</nav>La deuxième partie du site est une balise conteneur divisé en deux sections. Une section <side-text> et une autre <carte>. Le id carte fait référence à la carte Leaflet « Paris » que je présenterai plus loin dans le texte. La raison pour laquelle j’ai utilisé la balise conteneur, et que je l’ai divisé en deux, est que je souhaitais utiliser la fonction flex box. Nous la reverrons lorsque j’aborderai le code CSS, mais grosso modo cette fonction m’a permis de donner la forme « carte narrative » à mon site, où un texte défilant est à gauche et que la carte est à sa droite.
<section>
<div id="conteneur">
<div class="sidetext" data-simplebar data-simplebar-auto-
hide="false">
<h1 class="titre">Le réseau routier et les paroisses de
Paris</h1>
<p></p>
</div>
<div id="carte"></div>
</div>
</section>Dans l’objectif d’utiliser une barre de défilement différente que celle générique disponible sur le web, nous commençons par « appeler » le script déjà inscrit dans notre en-tête pour ensuite de l’insérer à notre balise conteneur.
//Appeler le script
<script
src="https://unpkg.com/simplebar@latest/dist/simplebar.js">
</script>
//Insérer le script à la balise conteneur
<div class="sidetext" data-simplebar data-simplebar-auto-hide="false">Enfin, la dernière section est consacrée au texte qui accompagnera la carte. Rien de bien révolutionnaire, il s’agit simplement d’une section composée de balises titre et de balises paragraphe.
<section>
<div>
<h1 id="subtitle1">Methodologie</h1>
<p id="soustexte">Lorsque vint le temps de créer la carte, il
fallait s’assurer de sa clarté, de son esthétisme, de sa
précision et de sa capacité à intégrer les informations de la
base de données. Partant du constat selon lequel il faudrait
illustrer les acteurs à partir de leur lieu de résidence, la
méthode qui a été favorisée fut de dessiner deux couches
principales pouvant répondre à cet objectif. Après réflexion et
analyse des résultats préliminaires, le choix s’est arrêté sur
une couche des paroisses et une des rues.</p>
</div>
</section>La carte
Pour la carte Leaflet, je ne me suis pas vraiment cassé la tête. En effet, grâce au livre de Numa Gremling, dont j’ai déjà fait un court compte-rendu, j’ai réussi à faire une carte Leaflet assez simple.
J’ai débuté en créant la carte que j’ai identifiée par la variable « Paris » à laquelle j’ai ajouté quelques caractéristiques (bounds, zoom, centre …).
var paris = L.map("carte", {
center: [48.854713, 2.346476],
zoom: 13,
maxZoom: 16,
minZoom:10,
maxBounds:[
[48.816455, 2.255943],
[48.908654, 2.423278]
],
zoomDelta: 0.75,
zoomSnap: 0.75,
intertia: false,
zoomControl : false,
closePopupOnClick: false
});À partir d’ici, il ne reste plus qu’à importer nos données et à créer des Popup attachés à des points, des lignes ou des polygones. Je ne rentrerai pas dans les détails étant donné que ce n’est pas l’objectif de ce court article. Je peux toutefois vous laisser un exemple.
var RueGuet= L.geoJSON (ChevalierGuet, {color: '#884EA0', opacity: 0.85, fillColor:'#884EA0', fillOpacity: 0.55});
RueGuet.bindPopup("En référence à la maison du Chevalier du Guet que fit installer, sur cette rue, le roi Jean en 1363");Le CSS
Je n’entrerai pas dans les détails du CSS, surtout étant donné que le style du site web est loin d’être terminé. Je préfère plutôt aborder, comme je l’ai annoncé plus haut, la fonction flex box.
Pour l’utiliser, j’ai intégré l’ensemble de mon site à un div dont le id est conteneur. Dans ma page style.css, j’ai ensuite appelé mon id conteneur et je lui ai ajouté quelques lignes de code :
#conteneur{
display: flex;
flex-wrap: nowrap;
height: 850px;
width: auto;
}Ensuite, il ne me restait plus qu’à inscrire les propriétés des éléments présents dans la flex box, à sa voir, la carte et le texte latéral :
#carte {
width : 1300px;
height: 100%;
}
.sidetext
{
background-color: #e9d9ba ;
width : 35%;
min-width: 300px;
height : 100%;
}C’est tout pour cette fois. Lors de la prochaine entrée, il sera question du CSS des popup et de l’utilisation du fichier leaflet.css.
Je vous laisse sur un vidéo illustrant les fonctionnalités abordées aujourd’hui.