;
Mar
16
2014

Autopsie d'une dataviz [6] : une mini app' avec MapBox

Retour sur la réalisation d'une web app' géographique assez basique pour Rue89Strasbourg. Au programme : geoJson, Highcharts, QGis et mapbox.js !

En soi, cette web app' n'est techniquement pas très compliquée, et est très largement inspirée de cet exemple disponible sur le site de Mapbox.

Concrètement, elle est codée pour :

  • afficher des zones géographiques, formatées en geoJson et préalablement coloriées (bleu pour la droite, rouge pour la gauche, gris pour les sans étiquettes)
  • mettre à jour, à chaque clic sur une zone, une div 'info' avec un titre, un texte et un chargement d'iframe paramétré depuis le geoJson
  • chaque iframe contient un graphe Highcharts avec les résultats des dernières municipales

Côté code, voici celui des résultats de Strasbourg :

Ce qui, une fois bien digéré, nous donne :

Attention aux MultiPolygon !

Côté déclaration des geoJson dans un script MapBox, il n'y a rien de bien sorcier.

Voici la déclaration d'une zone, avec comme info un nom de communes, quelques habillages graphiques, et un texte type :

Sauf que les choses se gâtent très rapidement si, au lieu d'un "Polygon", nous avons un "MultiPolygon".

MapBox n'arrive tout simplement pas à interpréter ce type  de géométrie, et sera incapable de colorier la zone ou de retourner ses autres valeurs.

Dans notre cas, ça arrive quand une ville a un ban communal éclaté et pas uniforme, comme par exemple Schiltigheim (trois Stück quand même !).

Et heureusement, on peut utiliser l'incontournable QGis pour diviser un MultiPolygon en plusieurs Polygon.

Après avoir ouvert le fichier vectoriel contenant les zones géographiques, il suffit d'aller dans > Vecteur > Outils de géométrie > Scinder une entité multigéométrie :

tuto_multipolygon

Cliquez sur l'image pour l'agrandir

Une fenêtre s'ouvre alors proposant de choisir un emplacement et un nom pour le shapefile qui n'aura plus de MultiPolygon :

tuto_multipolygon_1

Cliquez sue l'image pour l'agrandir

Une fois ceci fait, QGis propose d'ouvrir directement la couche générée, ce qui permet de rapidement vérifier que la manip' a marché.

Dans notre cas on voit bien, après un clic droit sur la couche et une sélection de "Ouvrir la table des attributs, plusieurs polygones qui portent le même nom :

tuto_multipolygon_2

Cliquez sue l'image pour l'agrandir

Evidemment, rien n'interdit de convertir ce .shp en un autre format vectoriel, comme le geoJson !

Le code sous mapbox.js

Une fois le geoJson ok, on peut se mettre au code, ce qui nous donne :

Ce qui donne très concrètement à l'arrivée :

Pour aller plus loin

1 Comment + Add Comment

Leave a comment