Renseignement militaire russe (GeoJSON)

Cette session encore, j’ai le plaisir de diriger l’activité de recherche sur le renseignement militaire russe au XIXe siècle. C’est toujours une merveilleuse aventure qui nous mène, les étudiant.e.s et moi, de la Turquie à la Perse en passant par l’Afghanistan, au fur et à mesure que nous dépouillons les Archives d’histoire militaire de l’État de Russie (RGVIA). Parmi les documents que ces archives recèlent, on trouve de nombreux rapports rédigés en français par des attachés militaires russes, ce qui est particulièrement précieux quand on veut faire travailler ses étudiant.e.s avec des sources primaires sur la Russie. Ces documents nous permettent d’étudier de l’intérieur la Question d’Orient et le Grand Jeu. Si, par les années passées, je demandais aux étudiant.e.s de rédiger des fiches Zotero pour colliger leurs trouvailles dans les archives, cette année j’ai choisi de leur faire faire une carte Leaflet. Ielles n’ont pas besoin de connaître la programmation. Il leur suffit de remplacer dans un bloc de code le texte et la référence à une image par les leurs. J’ai précemment montré comment créer et ajouter à une carte en ligne des marqueurs Leaflet. Dans cet article, je montrerai comment ajouter des lignes et des polygones, en se servant de GeoJSON.

On pourrait dessiner une ligne directement avec le code Leaflet. Il faut au moins deux points pour créer une ligne, par exemple reliant Bishkek à Dushambe:

var BishDushCoord = [
    [42.812, 74.597],
    [38.479, 68.796]
  ];
  var BishDush = L.polyline(BishDushCoord);
  BishDush.addTo(myMap)

À propos des polygones maintenant. On pourrait certes les écrire directement dans le code Leaflet. Par exemple, on pourrait produire ainsi un triangle:

var triangleAfghanistan = [
    [37.108, 66.182],
    [32.38, 63.885],
    [32.241, 68.807]
  ];
 var triangle =L.polygon(triangleAfghanistan);
 triangle.addTo(myMap)

Ce qui nous donne un triangle.

Mais dans le cas où l’on voudrait ajouter les frontières d’un pays à une époque donnée, il serait fastidieux d’entrer les y et les x un après l’autre. Nous allons donc nous servir de QGIS et d’une carte de 1865. On commence par télécharger la carte sur le site de David Rumsey.

On décompresse le zip et on enregistre l’image dans un nouveau dossier qui va contenir tout notre projet. Ensuite, on lance le géoréférenceur dans QGIS.

S’il n’apparaît pas dans le menu contextuel, c’est peut-être que vous n’avez pas coché l’onglet à côté de l’extension dans le gestionnaire des extensions.

Dans le géoréférenceur, on ouvre l’image téléchargée et décompressée.

Régler les paramètres de transformation.

Il nous faut maintenant saisir les coordonnées de la carte. Cliquer sur ce bouton.

Cliquer sur la carte. Cette fenêtre apparaît.

Vous pourriez choisir d’entrer les points depuis le canevas de carte. Mais notre carte utilise le méridien de Greenwich.

Donc on peut simplement cliquer où les longitudes croisent les latitudes et entrer ensuite les x et les y comme on voit sur l’image plus haut. Plus il y a de points, plus le résultat sera précis. Éditer les paramètres de transformation.

S’assurer de cocher «Charger dans QGIS lorsque terminé». Débuter le géoréférencement.

La carte apparaît maintenant comme une couche. Ajoutons une autre couche, soit une carte OpenStreetMap pour pouvoir juger du résultat. Il faut avoir auparavant installé l’extension QuickMapServices dans le gestionnaire des extensions, puis Web/QuickMapService/Settings/More services/Get contributed pack.

On place la couche OSM sous la carte géoréférencée dans le panneau des couches.

Modifions la transparence de notre carte géoréférencée avec un clic droit sur sa couche (perse), puis propriétés et enfin transparence.

On peut maintenant voir la carte OSM sous notre carte géoréférencée.

Le résultat est acceptable. On peut donc remettre l’opacité à 100% et commencer à dessiner notre polygone, soit les frontières de l’Afghanistan. Pour ce faire, on crée d’abord une couche Geopackage (voir le tutoriel de Joshua).

Une fois cette fenêtre fermée, on rend la couche éditable en cliquant sur le crayon.

On ajoute une entité polygonale.

On commence à dessiner les frontières. Chaque clic gauche segmente le trait et ajoute des coordonnées. Quand on a fini, faire un clic droit. Une fenêtre apparaît où l’on peut remplir les champs (si l’on en a créés au départ). Nous avons donc une nouvelle couche vectorielle.

Il est temps de l’exporter vers GeoJSON. Dans les mots de Wikipedia, c’est un «format ouvert d’encodage d’ensemble de données géospatiales simples utilisant la norme JSON (JavaScript Object Notation)».  Clic droit sur la couche que nous venons de créer, puis exporter.

On doit obligatoirement cliquer sur les trois points à droite de «Nom de fichier» pour enregistrer notre fichier. S’assurer que la couche est en WGS84. Par défaut, le niveau de précision est réglé à 15. C’est inutilement précis pour Leaflet. On le ramème donc à 5, ce qui équivaut à une précision d’un mètre.

Ouvrons le fichier que nous venons de créer avec Atom. Nous avons ceci:

{
"type": "FeatureCollection",
"name": "afghanistan",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "fid": 0, "Empire": null, "Année": "1865" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 63.74261, 37.43643 ], [ 63.44686, 37.27377 ], [ 62.82579, 37.00759 ], [ 62.5744, 36.91887 ], [ 62.3378, 36.80057 ], [ 62.05684, 36.77099 ], [ 61.71673, 36.62312 ], [ 61.5097, 36.43088 ], [ 61.3914, 36.1795 ], [ 61.37662, 36.03162 ], [ 61.37662, 35.86896 ], [ 61.48013, 35.78023 ], [ 61.52449, 35.63236 ], [ 61.52449, 35.51406 ], [ 61.48013, 35.29225 ], [ 61.34704, 34.98171 ], [ 61.33225, 34.77469 ], [ 61.31747, 34.43458 ], [ 61.42098, 34.12404 ], [ 61.42098, 33.70999 ], [ 61.14002, 33.48818 ], [ 61.03651, 33.23679 ], [ 60.71118, 33.07413 ], [ 60.29713, 32.92625 ], [ 60.09011, 32.64529 ], [ 59.92745, 32.29039 ], [ 59.94223, 31.99464 ], [ 60.01617, 31.9355 ], [ 60.25277, 31.4623 ], [ 60.42283, 31.17394 ], [ 60.66682, 31.03346 ], [ 61.25832, 30.60462 ], [ 63.0476, 29.65823 ], [ 64.18623, 29.66562 ], [ 64.84428, 29.79131 ], [ 65.18439, 29.89483 ], [ 65.66498, 30.00573 ], [ 65.8794, 30.13882 ], [ 66.2343, 30.50851 ], [ 66.30823, 30.70814 ], [ 66.78143, 31.04825 ], [ 67.46166, 31.24788 ], [ 67.83134, 31.29963 ], [ 68.1123, 31.18873 ], [ 68.4709, 31.16655 ], [ 68.83319, 30.95213 ], [ 69.06979, 30.59723 ], [ 69.50602, 30.56766 ], [ 69.69087, 30.61202 ], [ 70.05316, 30.47154 ], [ 70.20103, 30.48632 ], [ 70.73338, 30.24233 ], [ 71.00325, 30.12403 ], [ 71.16591, 30.22754 ], [ 71.20288, 30.41239 ], [ 71.17331, 30.61202 ], [ 71.13634, 31.08522 ], [ 71.02543, 31.24048 ], [ 71.04022, 31.42533 ], [ 70.91453, 31.68411 ], [ 70.85538, 31.86156 ], [ 70.77405, 32.14991 ], [ 70.68532, 32.37912 ], [ 70.58181, 32.45306 ], [ 70.48569, 32.63051 ], [ 70.49308, 33.02977 ], [ 70.54484, 33.33291 ], [ 70.4709, 33.66563 ], [ 70.32303, 34.13143 ], [ 70.87386, 34.77469 ], [ 71.14743, 35.00944 ], [ 71.45057, 35.37912 ], [ 71.73153, 35.70445 ], [ 71.73893, 36.09632 ], [ 71.62802, 36.28116 ], [ 71.45797, 36.36249 ], [ 71.02174, 36.43643 ], [ 70.73338, 36.45121 ], [ 70.73338, 36.45121 ], [ 70.40806, 36.3551 ], [ 69.96443, 36.25898 ], [ 69.70565, 36.25158 ], [ 69.67608, 36.31813 ], [ 69.82395, 36.41425 ], [ 69.95704, 36.49558 ], [ 70.07534, 36.5843 ], [ 70.25279, 36.7026 ], [ 70.32673, 36.8283 ], [ 70.44503, 36.98356 ], [ 70.3563, 36.98356 ], [ 70.24539, 36.92441 ], [ 70.07534, 36.8209 ], [ 69.7648, 36.77654 ], [ 69.46166, 36.75436 ], [ 69.10676, 36.71 ], [ 68.95889, 36.62866 ], [ 68.81841, 36.49558 ], [ 68.61138, 36.30334 ], [ 68.38218, 36.04456 ], [ 67.99031, 35.77839 ], [ 67.42469, 35.35694 ], [ 67.2916, 35.2904 ], [ 67.13633, 35.19428 ], [ 66.9367, 35.14252 ], [ 66.84058, 35.06859 ], [ 66.64095, 35.03901 ], [ 66.4709, 35.00204 ], [ 66.14557, 34.92071 ], [ 65.85722, 34.87635 ], [ 65.55407, 34.86156 ], [ 65.50232, 34.95768 ], [ 65.68716, 35.12034 ], [ 66.33042, 35.68227 ], [ 66.59659, 35.9928 ], [ 66.79622, 36.14068 ], [ 66.87755, 36.39207 ], [ 66.96628, 36.65824 ], [ 67.04021, 36.92441 ], [ 66.75186, 36.94659 ], [ 66.44872, 36.81351 ], [ 66.20472, 36.73957 ], [ 65.88679, 36.68781 ], [ 65.62801, 36.65085 ], [ 65.29529, 36.65824 ], [ 65.05869, 36.68781 ], [ 64.80731, 36.96138 ], [ 64.68161, 37.01314 ], [ 64.49677, 37.05011 ], [ 64.37847, 37.08708 ], [ 64.2232, 37.27192 ], [ 63.94963, 37.39022 ], [ 63.7574, 37.42719 ], [ 63.74261, 37.43643 ] ] ] } }
]
}

On remarquera que dans geoJSON les longitudes précèdent les latitudes. C’est le contraire dans Leaflet. Mais la fonction L.geoJSON s’occupe de les remettre dans le bon ordre.

On crée une nouvelle variable que l’on définit par la dite fonction, fonction qui est appliquée à notre variable précédente. Assignons ce code à une variable. On donne un nom à cette variable, puis on la fait suivre du bloc de code précédent.

 var Afghanistan = {
  "type": "FeatureCollection",
  "name": "Afghanistan",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
  { "type": "Feature", "properties": { "fid": 0, "Empire": null, "Année": "1865" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 63.74261, 37.43643 ], [ 63.44686, 37.27377 ], [ 62.82579, 37.00759 ], [ 62.5744, 36.91887 ], [ 62.3378, 36.80057 ], [ 62.05684, 36.77099 ], [ 61.71673, 36.62312 ], [ 61.5097, 36.43088 ], [ 61.3914, 36.1795 ], [ 61.37662, 36.03162 ], [ 61.37662, 35.86896 ], [ 61.48013, 35.78023 ], [ 61.52449, 35.63236 ], [ 61.52449, 35.51406 ], [ 61.48013, 35.29225 ], [ 61.34704, 34.98171 ],...

On pourrait coller cette variable directement dans la page html. Mais quand il va y avoir beaucoup de polygones sur notre carte, cela va commencer à ralentir le navigateur. C’est pourquoi il est préférable de les enregistrer dans un fichier Javascript à part. Au moment de sauvegarder, on lui donne un nom (ic «polygones») et une extension .js. Ce fichier est placé dans un dossier enfant du dossier parent qui contient le fichier html de notre carte. Dans ce dernier, on édite un lien vers ce fichier javascript, de la même façon que, vous vous en souviendrez, nous en avions déjà un qui renvoyait au code Leaflet.

  <script src="../leaflet/polygones.js"></script>

On peut ensuite dans le fichier html de notre carte invoquer cette variable et l’associer à une variable Leaflet (ce qui va notamment nous permettre d’inverser les x et les y). On lui ajoute également des paramètres, par exemple une couleur rouge et une transparence de 50%. Ce serait possible itou de lui attribuer une classe CSS. Ce qui serait pratique quand on aura décidé d’un groupe de polygones, par exemple les pays alliés de la Russie.

var AfghanistanGeoJSON = L.geoJSON(Afghanistan, {color: 'red', opacity: 0.5});

On ajoute une popup à notre nouvelle variable, comme on l’a vu précédemment.

AfghanistanGeoJSON.bindPopup("<p class='titre'>Guerre anglo-afghane de 1839-1842</p> <img src='images/afghanistan.jpg' class='image'</p> <p class='texte'>Afin de bien comprendre le déclenchement de cette guerre, il importe de se familiariser avec les forces diplomatiques à l\'œuvre en Afghanistan. D\'abord, les documents à l\'étude s\'ancrent dans le contexte politique que crée la défaite russo-perse du siège d\'Hérat en 1838. En fait, la Perse ainsi que la Russie sortent de ce conflit affaiblies. La Perse sort militairement réduite puisque l\'armée du Shah, forte de ses 30 000 soldats, n\'a pu prendre le contrôle d\'une petite principauté. Les Russes, quant à eux, sont politiquement et diplomatiquement discrédités. Participant à la campagne d\'Hérat, les Russes ont été accusés d\'hostilité à l\'égard de la Grande-Bretagne. Bien que la ville soit, en principe, une principauté indépendante, les Anglais la considèrent comme un territoire soumis à leur influence. Plus encore, la disposition géographique d\'Hérat fait dire aux Anglais que la ville est « le bastion de la défense des Indes le plus éloigné ». Une attaque contre Hérat est donc perçue comme une attaque contre les Indes anglaises et donc, la Grande-Bretagne. Afin de ne pas assombrir les relations avec la Grande-Bretagne, le comte Nesselrode, ministre des Affaires étrangères de Russie, n\'eut d\'autre choix que de désavouer ses deux diplomates les plus influents au Moyen-Orient : le capitaine Vitkevitch et le comte Simonich. C\'est donc une Russie et une Perse diminuée sur le plan politique, militaire et diplomatique qui ressortent du conflit d\'Hérat en 1838. Or, même si le siège d\'Hérat est un fiasco pour les Russes et les Perses, les Anglais y voient quand même une menace et une progression de ses opposants vers les Indes anglaises. Restant à l'affut de cette « progression », l\'Angleterre surveillera de près la puissance voisine de l\'Inde : l\'Afghanistan.</p> <p class='archive'>RGVIA, F. 446, Op. 1, D. 22.</p> <p class='auteur'>Alexis Tétreault</p> ");

Le texte contient des classes CSS. On pourrait aussi ajouter une info-bulle. Par défaut, les info-bulles sont blanches avec du texte noir dans Leaflet. Mais ici je leur ai attribué une classe CSS (le code est dans un fichier .css auquel renvoie l’en-tête de notre site).

AfghanistanGeoJSON.bindTooltip('Afghanistan',  {className: 'tooltip'});

J’ai défini ainsi cette classe:

.tooltip {
         background: black;
         font-family: Arial;
         color: white;

Il ne reste plus qu’à ajouter notre variable à la carte.

AfghanistanGeoJSON.addTo(myMap)

Chaque semaine, les étudiant.e.s ajouteront de nouveaux marqueurs à la carte. Celle-ci est déjà en ligne et sera mise à jour hebdomadairement. À suivre…