Makina Blog

Le blog Makina-corpus

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

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

Nantes Du 2 au 4 avril 2024

Voir la formation

Formations SIG / Cartographie

Formation Leaflet

À distance (FOAD) Du 1er au 2 juillet 2024

Voir la formation

Formations SIG / Cartographie

Formation PostGIS

Nantes Du 18 au 20 mars 2024

Voir la formation

Actualités en lien

18/12/2013

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.

Voir l'article
Image
 infrastructure-SIG-leaflet
16/12/2013

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.

Voir l'article
Image
 infrastructure-SIG-leaflet
02/12/2013

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.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus