C'est le mois du
#30DayMapChallenge, et comme l'an dernier, nous formons une équipe avec mes collègues pour
relever le défi ! Et comme l'an dernier, je me rajoute la contrainte
supplémentaire de non seulement de créer une carte, mais aussi de le faire en
utilisant
les technologies de dév d'ArcGIS
et de vous proposer un tutoriel sur ce blog.
Cette année je ne fais qu'une carte, celle du jour 12 sur le thème "Map from
2125" ("Carte de 2125"). Pas facile d'imaginer ce à quoi va ressembler la
Terre dans 100 ans... Et si on n'était plus seuls sur Terre ? Évidemment,
lorsque l'on parle de l'avenir, on ne peut pas s'empêcher d'imaginer que l'IA
va prendre une place de plus en plus importante dans nos vies. Et si demain,
l'IA se développait toute seule, créait ses propres communautés, et était
considérée comme une espèce à part entière ? Et si des hybrides humains / IA
émergeaient ? C'est ce scénario qui m'a poussée à imaginer une carte de la
population terrestre en 2125, où nous aurions maintenant à classer les
habitants selon leur espèce : humain, IA, ou hybride.Vous pouvez explorer
l'application
en live ici
!
L'application est traduite en binaire ! Bon, pas sûre que ça soit utile vu
que ce sont des IA qui m'ont aidé en premier lieu à passer du français au
binaire, mais au moins comme ça elles se sentent incluses et on évite
peut-être une potentielle guerre, enfin je sais pas...
Dans cet article, je vous propose de tout découvrir sur la fabrication de
cette carte : de la préparation des données au développement de l'application
en passant par le choix de la symbologie. Rassurez-vous si vous n'avez pas
l'âme d'un développeur, beaucoup de choses sont accessibles sans code ! Et si
c'est seulement le code qui vous intéresse, n'hésitez pas à utiliser
la carte déjà paramétrée.
Préparation des données
Bon, vous vous doutez que je n'ai pas pu trouver la donnée telle quelle se
baladant sur internet. Pour partir de données existantes, j'ai récupéré le
Kontur Population Dataset de 2023
(que nous avions déjà utilisé dans
cette application), agrégeant les données de population mondiale dans des
hexagones H3 de 22km
(d'autres résolutions sont disponibles mais celle-ci sera suffisante pour
notre application).
Maintenant, il faut transformer cette donnée en points. Pour passer des
hexagones de population à des entités ponctuelles plus faciles à manipuler,
nous allons avoir besoin d'un petit script Python, utilisant notamment
ArcPy. Si vous ne voulez pas avoir à utiliser ce script vous-même, vous pouvez
accéder directement à
la donnée transformée que j'ai partagée publiquement.
Le script, que vous pouvez
retrouver intégralement sur mon Github, parcourt chaque hexagone du Kontur Population Dataset et, selon
le nombre d’habitants, génère un ou plusieurs points placés aléatoirement à
l’intérieur de celui-ci. Chaque point est possède une pondération qui nous
permettra de faire varier la taille de celui-ci en fonction du nombre
d'habitants qu'il représente : de 250 à 500k habitants, la pondération est de
1 ; de 500k à 1M, la pondération est de 2, et pour plus d'1M, la pondération
est de 3. Un hexagone contenant 750k habitants engendrera donc la création de
2 points : un avec une pondération de 2 pour 500k habitants et un avec une
pondération de 1 pour 250k habitants.
Une fois tous les points créés, une seconde partie du script attribue à chacun
une “espèce” : Humain, IA ou Hybride. La répartition suit des proportions
globales (50 % d’humains, 30 % d’IA, 20 % d’hybrides) que j'ai choisies
arbitrairement (et que vous pouvez facilement modifier dans le script), mais
avec des regroupements géographiques pour éviter un mélange totalement
aléatoire. Certaines zones seront donc plutôt dominées par les IA, d’autres
plus par les humains, tout en gardant un peu de diversité locale, pour
refléter les regroupements communautaires qui s'observent assez naturellement
dans la répartition des populations.
La donnée est ensuite prête à être publiée sur le portail, et nous nous
retrouvons dans le MapViewer pour la suite.
Modification de la symbologie
Fond de carte
Nous allons commencer par modifier le fond de carte, ce qui nous permettra de
mieux faire ressortir nos points. Vu qu'aucun des fonds de carte proposés par
défaut ne me convenait totalement, j'ai utilisé le
Vector Tile Style Editor
pour créer une version plus sombre et sans étiquette du fond de carte
Nova.
Vous pouvez le créer vous-même dans le style que vous voulez, ou vous servir
de
celui que j'ai partagé.
Symbologie des points
Pour la symbologie des points, nous allons nous baser sur deux attributs et
faire varier à la fois la couleur et la taille. Ajoutez donc "espece" et
"pondération" dans le choix dans attributs du style de la couche et
sélectionnez "Types et tailles" pour le style.
Pour les types, choisissez la palette de couleur de votre choix pour
représenter chacune des espèces, voici ce que j'ai fait de mon côté :
Pour les totaux et quantités, choisissez la plage des tailles qui vous
convient. J'ai essayé de garder des points relativement petits de mon côté
pour essayer de ne pas surcharger la carte.
Voilà le résultat pour la couche de points :
C'est l'heure des effets🪄 J'ai été suspicieusement sage sur ces derniers,
car les points étant très nombreux, trop d'effets rendaient un peu trop vite
la carte quelque peu... aveuglante. Nous nous contenterons donc d'un effet
"Luminosité et contraste" pour apporter un peu de brillance à nos points.
Flux marin (optionnel)
Pour rendre la carte un peu plus chouette, nous allons rajouter une donnée de
flux marin. Nous n'en avons pas vraiment besoin pour l'histoire de la carte,
mais elle apporte une esthétique forte et permet aussi de créer un peu la
dimension futuriste dont j'avais besoin.
Nous allons utiliser comme source de donnée la couche
HYCOM - Ocean Current Vectors. Ce service de d'imagerie de type Vector-MagDir, issu des données
de courants marins de l'HYCOM, va nous permette d'utiliser une symbologie de type flux pour habiller
les océans.
[Note] Cette couche nécessite un compte d'organisation ArcGIS Online pour y
accéder, donc passez cette étape si vous êtes sur ArcGIS Enterprise. De la
même manière, je vous invité à la tester dans le Map Viewer pour extraire de
beaux visuels, mais l'utiliser dans votre application entraînera l'ajout
d'une fenêtre d'authentification pour que vos utilisateurs puissent s'y
connecter, donc je ne vous conseille pas de la garder pour la partie
"Intégration".
Une fois la couche ajoutée à votre carte, choisissez le style "Flux" pour la
symbologie de la couche pour voir apparaître le flux.
Stylé, mais on va rendre ça un peu plus discret pour ne pas voler la vedette à
nos points.
Dans les options de style, poussez la vitesse, la densité et la longueur au
max histoire d'être un peu dynamique.
Ensuite, choisissez "dégradé de couleur". Vous pouvez choisir plusieurs
teintes pour tester, mais voici les paramètres que j'ai choisis pour que le
flux reste relativement discret :
En termes d'effets, le Néon est activé par défaut, rien à modifier de ce côté
là ! Et voilà, la carte est prête :
On passe à l'intégration ?
Développement d'une petite application
Si vous avez lu
cette série d'articles, vous savez que grâce à toute cette préparation dans le Map Viewer, intégrer
cette carte va être très simple et rapide en utilisant le
SDK JavaScript d'ArcGIS. Nous intégrerons ensuite des comportements personnalisés, notamment pour la
traduction de l'application en langage binaire pour nos amies les IA.
Comme à chaque fois, retrouvez le code complet
sur mon Github
ou en mode bac à sable
dans CodePen.
J'intègre la carte comme d'habitude grâce au composant <arcgis-map> et à
l'itemid de la webmap :
<arcgis-map item-id="d865e8a38ca446798f2a1da1dc9aba5f">
Je rajoute également la légende et un bouton d'informations, ainsi qu'un
bouton switch
du
Calcite Design System
qui nous permettra de passer en "mode IA" :
<arcgis-map item-id="d865e8a38ca446798f2a1da1dc9aba5f" theme="dark">
<arcgis-expand slot="bottom-right" expand-tooltip="+ d'infos" collapse-tooltip="Fermer" expand-icon="information">
<div class="expand-content" style="padding:1em; max-width:250px;">
<h4 style="font-weight: bold; padding-top : 0%; margin-top: 0%">À propos de l'application</h4>
<p>En 2125, le monde est partagé entre des populations humaines, IA et hybrides. La répartition de ces populations est représentée sur cette carte.</p>
<p>Les données ont été extrapolées à partir du <a href="https://data.humdata.org/dataset/kontur-population-dataset-22km" target="_blank">Kontur Population Dataset de 2023</a>.</p>
<p>Retrouvez toutes les étapes de création de l'application dans <a href="https://www.codethemap.fr/2025/11/carte-population-2125.html" target="_blank">cet article CodeTheMap</a>, et toutes mes autres apps sur Github <b>@<a href="https://github.com/JapaLenos" target="_blank">JapaLenos</a></b>.</p>
<p>Cette carte a été créée à l'occasion du <b><a href="https://30daymapchallenge.com/" target="_blank">#30DayMapChallenge</a> - Jour 12 : "A Map from 2125"</b></p>
</div>
</arcgis-expand>
<arcgis-expand slot="bottom-right" expand-tooltip="Légende" collapse-tooltip="Fermer la légende">
<arcgis-legend legend-style="classic"></arcgis-legend>
</arcgis-expand>
</arcgis-map>
<div id="switch-container">
<h4>
<calcite-switch id="switchbutton" unchecked></calcite-switch>
01101101 01101111 01100100 01100101 00100000 01001001 01000001
</h4>
</div>
Peu de choses à dire sur le script, qui attend classiquement que la carte et
la vue soient prêtes avant d'interagir avec les données. Le morceaux principal
gère la traduction du texte en binaire pour le mode IA :
function textToBinaryASCII(str) {
return str
.split("")
.map(c => c.charCodeAt(0).toString(2).padStart(8, "0"))
.join(" ");
}
function numberToBinary(num) {
return parseInt(num, 10).toString(2);
}
const switchButton = document.getElementById("switchbutton");
const switchTextNode = switchButton.nextSibling;
const h1Node = document.querySelector(".titre h1");
const h3Node = document.querySelector(".titre h3");
h1Node.setAttribute("data-original", h1Node.textContent);
h3Node.setAttribute("data-original", h3Node.textContent);
switchButton.addEventListener("calciteSwitchChange", (event) => {
const binaryMode = event.target.checked;
h1Node.textContent = binaryMode
? numberToBinary(h1Node.getAttribute("data-original"))
: h1Node.getAttribute("data-original");
h3Node.textContent = binaryMode
? textToBinaryASCII(h3Node.getAttribute("data-original"))
: h3Node.getAttribute("data-original");
switchTextNode.nodeValue = binaryMode
? " Revenir au mode humain"
: " 01101101 01101111 01100100 01100101 00100000 01001001 01000001"; // mode IA
});
Côté CSS, un assez gros travail de modification des règles du Calcite Design
System pour que l'UI de notre app colle totalement au style de la carte :
calcite-shell {
position: relative;
--calcite-color-brand: #3fffff;
--calcite-color-brand-hover: #efffff;
--calcite-color-border-input: #0a3c5e;
--calcite-color-foreground-1: #062336;
--calcite-color-foreground-2: #020817;
--calcite-color-foreground-current: #020817;
--calcite-color-text-1: #efffff;
--calcite-color-text-2: #efffff;
--calcite-color-text-3: #efffff;
--calcite-color-border-3: #020817;
--calcite-color-transparent-tint: rgba(2, 8, 23, 0.7);
}
Et voilà le résultat final (à consulter ici en plein écran) :
Vous en voulez plus ? N'hésitez pas à consulter ce que j'avais fait l'an
dernier pour le 30DayMapChallenge (Hexagones
;
Temps et Espace
et
Mes Données). Vous pouvez également consulter tous les articles du blog proposant des
tutoriels pour prendre en main les technologies de développement
d'ArcGIS.
Aucun commentaire:
Enregistrer un commentaire