Vous n'êtes peut-être pas passés à côté des magnifiques cartes de Terence Fosstodon (@researchremora sur Twitter) qui représentent la densité de population dans différents pays du monde et qui ont beaucoup été repartagées sur les réseaux sociaux.
Je trouve ces cartes fascinantes, mais mon seul regret est de ne pas pouvoir naviguer dedans. Alors voici le défi de la 23è édition d'un mardi une appli : recoder une de ces cartes avec l'API JavaScript d'ArcGIS pour l'avoir en version interactive disponibles sur le web.
Beaucoup (trop) de données
La donnée d'entrée provient du Kontur Population Dataset de 2022, une carte agrégeant les données de densité de population à l'échelle mondiale sous forme de polygones d'une résolution de 400 mètres.
La donnée initiale contient au total 32 589 553 enregistrements, et pèse environ 7,82 Go. Une fois réduite à la taille de la France,nous n'avons plus "que" 593 653 entités pour une taille de 332 MB, ce qui reste une volume de données très important, surtout pour un rendu web.
Comment gérer ce gros volume de données dans ma carte web ?
Nous allons aborder rapidement 3 méthodes classiques à envisager pour mieux gérer ce type données dans le web : le pivot de table, la réduction du nombre d'attributs et la réduction des entités.
1/Pivot de table :
Le pivot de table permet de réduire le nombre d'enregistrements dans la
table, en transformant des lignes en colonnes. Dans l'exemple
ci-dessous, chaque coordonnées XY d'un point comporte plusieurs données
de température et de géométrie selon la profondeur. Nous pouvons
transformer ces multiples enregistrements en un seul enregistrement
contenant plusieurs champs pour les différentes températures et
salinités selon la profondeur.
2/Réduction du nombre d'attributs :
Les services d'entités dans ArcGIS sont limités à 1024 colonnes. Cela
nous laisse beaucoup de marge, mais pensez toujours à supprimer les
attributs qui ne seront pas utiles dans votre application finale car
cela peut potentiellement beaucoup alléger vos données.
3/Réduction des entités :
C'est cette dernière solution que j'ai utilisée pour réduire la taille
de mes données. Si vos données sont très denses,
vous avez plusieurs possibilités, notamment la sélection
d'uniquement certains enregistrements ou l'agrégation des
enregistrements. Vous pouvez le faire directement côté client grâce
à la propriété
FeatureReduction
des couches d'entités sur l'API JavaScript d'ArcGIS, ou bien en
amont de la publication web avec des outils bureautique.
J'ai pour ma part utilisé l'outil d'agrégation d'ArcGIS Pro
qui m'a permis de regrouper les données dans une maille hexagonale de 7
kilomètres avant la publication sur le web, ce qui me permet de ne pas
stocker un tros gros volume de données en ligne. J'ai ainsi pu réduire
le nombre d'enregistrements à 28 126 pour un espace de stockage de 15MB,
tout en gardant une résolution qui me semblait correcte pour mon
application.
L'application
Une fois mes données préparées et publiées, j'ai pu obtenir le résultat
ci-dessous avec l'API JS d'ArcGIS. N'hésitez pas à aller
le consulter en pleine page
pour une meilleure expérience.
J'ai essayé au maximum de coller au style graphique proposé par Terence Fosstodon, tout en ajoutant des fonctionnalités d'interactivité (navigation, popups, ...).
Les densités de population en France sont donc ici représentées avec un regroupement par maille hexagonale de 7km, avec une symbologie dont la couleur et la hauteur varient selon le nombre d'habitants par unité de maille. Il est possible de cliquer sur les hexagones pour connaître le nombre d'habitants à l'intérieur de celui-ci.
Comme sur la carte de Terence, le caractère centralisé de la France est bien mis en avant, avec l'écrasant pic représentant Paris et l'Ile-de-France par rapport au reste du territoire.
Le code
L'intégralité du code est disponible
sur mon Github. Le code est assez classique et l'article déjà long, donc je ne vais
commenter que certains points saillants.
Pour la symbologie, j'ai appliqué un rendu simple sur lequel j'ai utilisé la propriété visualVariables avec des variables de couleur et de taille sur l'axe de hauteur toutes deux appliqués au champ contenant la population totale de chaque cellule.
//création de la carte "map"
popLayer7km.renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
// symbol type required for rendering point geometries
type: "polygon-3d",
symbolLayers: [
{
// renders polygons as volumetric objects
type: "extrude" // autocasts as new ObjectSymbol3DLayer()
}
]
},
visualVariables: [
{
type: "color",
field: "SUM_population", // field containing data sum of population
stops: [
{ value: 0, color: "#F7E9E9" },
{ value: 75000, color: "#E297B5" },
{ value: 380000, color: "#BB4B6C" },
{ value: 859431, color: "#16041F" }
]
},
{
type: "size",
field: "SUM_population", // field containing data sum of population
stops: [
{ value: 0, size: 1 },
{ value: 859431, size: 800000 }
],
axis: "height"
}
]
};
J'ai également ajouté un loader sous la forme d'un gif qui indique à l'utilisateur que l'application est en train de charger. Celui-ci disparait lorsque la scène a fini de charger.
//création de la carte "map"
view.watch("updating", function () {
loader.style.display = "none";
});
});Enfin, j'ai utilisé une scène locale pour représenter une scène centrée sur la France. Nous verrons ensemble un tutoriel autour de cette notion dans un article à venir.
C'est tout pour cette application ! La semaine prochaine a lieu le Dev
Summit d'Esri, alors nous nous retrouverons bientôt pour parler des annonces
qui y seront faites. N'hésitez pas à consultez
cet article
pour plus de détails sur cette semaine de conférences.
Aucun commentaire:
Enregistrer un commentaire