Accueil / Blog / Métier / 2013 / Infrastructure webmapping minimaliste (partie 2) - TileMill

Infrastructure webmapping minimaliste (partie 2) - TileMill

Par Simon Georges — publié 12/12/2013, édité le 13/10/2016
Dans le cadre de notre architecture webmapping minimaliste, nous présentons quelques astuces pour styler une carte avec TileMill.
Infrastructure webmapping minimaliste (partie 2) - 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 webmapping, 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 webmapping.

Pour aller plus loin

Nous vous proposons de suivre notre formation TileMill ;-)

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Cartographie Web 3D - possibilités techniques en logiciels libres 08/01/2019

Au début, les cartes sur le web étaient planes. Puis, avec de plus en plus de données (imagerie ...

Retour State of the Map France 2018 Retour State of the Map France 2018 23/07/2018

L'équipe de Makina attendait avec impatience l'événement de l'année, State Of The Map 2018 à ...

MoodWalkR: behind the scenes MoodWalkR: behind the scenes 30/09/2013

Understanding how MoodWalkR computes pedestrian routes.

Elections.js génère des cartes pour vous Elections.js génère des cartes pour vous 30/03/2015

Le travail sur les cartes pour les élections départementales a débouché sur la création d'un ...

Les nouveautés de la cartographie en ligne 29/10/2013

Les nouvelles tendances en webmapping et les possibilités offertes par les données géographiques ...