Makina Blog
Infrastructure web mapping minimaliste (partie 2) - TileMill
Dans le cadre de notre architecture web mapping minimaliste, nous présentons quelques astuces pour styler une carte avec TileMill.
Présentation
Pour ceux qui ne le connaissent pas encore (mais qu'attendez-vous pour vous y mettre ?), TileMill permet de réaliser des fonds de carte en stylant par un langage pseudo-CSS des couches de données géographiques.
Une fois dans l'interface principale d'un projet, il suffit d'ajouter une couche de données géographique, et TileMill vous proposera même un exemple de style adapté.
Problèmes possibles
La couche géographique ne s'importe pas
TileMill est plutôt efficace, et reconnaît les donnés dans beaucoup de formats géographiques (Shapefile, CSV, GeoJSON, PostGIS…), mais il est possible que la projection utilisée pour le fichier ne soit pas correctement détectée. Dans ce cas, nous vous invitons à utiliser QGIS, le "couteau-suisse" de la cartographie (nous pouvons vous proposer une formation si besoin), pour convertir le fichier dans une projection reconnue, ou simplement extraire la bonne projection pour l'indiquer à TileMill qui chargera alors le fichier sans encombre).
Le style est trop sommaire
TileMill génère un style relativement basique par défaut, mais par contre, vous êtes complètement libres de rajouter l'ensemble des attributs que vous souhaitez (voir dans les exemples ci-dessous ou dans la documentation incluse dans TileMill).
Exemple de styles que nous utilisons
Plusieurs données similaires de tailles différentes
Il arrive régulièrement d'avoir plusieurs couches de données similaires à mettre en valeur différemment. TileMill permet :
- d'une part, à l'import d'une couche, de définir une "id" (unique) et une "classe" (pouvant être réutilisée) pour la couche
- d'autre part, d'utiliser des variables permettant de modifier facilement plusieurs composants similaires.
Exemple dans le cas des rivières de la Dordogne :
- toutes les couches ont la classe "rivieres" et sont donc toutes de la même couleur. Cette couleur est placée dans la variable @riviere, au cas où nous en aurions besoin ailleurs ;
- chaque couche a une id différente, permettant de leur donner une épaisseur différente.
@riviere: #009FE3; .rivieres { line-color: @riviere; } #dordogne { line-width: 8; } #rivieres { line-width: 5; } #ruisseaux { line-width: 2; }
Des données affichées à seulement certains niveaux de zoom
Dans le cadre d'une application web mapping, il est important de ne pas trop surcharger les fonds de cartes, pour mettre en valeur les données dynamiques que vous allez ensuite charger dans l'application.
TileMill permet très simplement de n'afficher certaines données qu'à des niveaux de zoom choisis. Cela permet à vos fonds de cartes de rester lisibles quelque soit le niveau de zoom. L'exemple ci-dessous use de cette technique de 2 manières différentes : les limites des communes ne sont affichées qu'à partir du niveau de zoom 10, et leur nom à partir du niveau de zoom 12 (au passage, vous noterez qu'il est possible d'utiliser des attributs de la couche de données pour récupérer automatiquement des données, comme le "[Nom]" de la commune :
@commune: #1D1D1B; #communes[zoom >= 10] { line-color: @commune; line-width: 0.5; [zoom >= 12] { text-face-name: "Arial Regular"; text-name: "[Nom]"; text-transform: capitalize; } }
Des données adaptées au fond
Enfin, il est possible de légèrement transformer les données pour les adapter à votre fond de carte, par exemple pour que les noms de rivières suivent la rivière automatiquement, tout en n'étant pas trop collés à la ligne :
#dordogne { line-width: 8; text-face-name: "Arial Regular"; text-name: "[GC_NOM_D_O]"; text-fill: @riviere; text-size: 20; text-placement: line; // Le texte suit la rivière. text-dy: 12; // Mais pas de trop près. text-max-char-angle-delta: 15; // Et on essaie de ne pas le tordre trop. }
Export et utilisation des fonds
TileMill permet d'exporter directement vos fonds de cartes au format MBTiles, utilisable par plusieurs applications. Dans notre cas, ces fichiers sont directement déposés sur notre serveur de tuiles, propulsé par django-mbtiles.
Dans le cadre de ce projet, le client modifie et exporte lui-même ses fonds de carte via TileMill. Il a ensuite accès au serveur de tuiles dans un répertoire dédié via un serveur FTP, et il est donc entièrement autonome pour la réalisation et la mise en production des fonds de cartes.
Il est donc tout à fait possible de donner au client un maximum de contrôle sur son application de web mapping.
Formations associées
Formations SIG / Cartographie
Formation QGIS
À distance (FOAD) Du 2 au 6 décembre 2024
Voir la formationFormations SIG / Cartographie
Formation PostGIS
À distance (FOAD) Du 9 au 13 décembre 2024
Voir la formationActualités en lien
Infrastructure web mapping minimaliste (partie 4) - Javascript
Dans ce dernier article sur l'application web mapping du CAUE24, nous traitons de quelques autres points Javascript ne concernant pas directement Leaflet.
Infrastructure web mapping minimaliste (partie 3) - Leaflet
Continuant notre série d'article sur l'application web mapping du CAUE24, nous présentons le code Leaflet produit.
Infrastructure web mapping minimaliste (partie 1)
Cette série d'articles présente par l'intermédiaire d'une réalisation une architecture de web mapping minimaliste, basée sur Leaflet et Jekyll.