Dessiner une ville à la main avec TileMill (1 - Les bâtiments)

L'objectif de ce projet est d'afficher une carte dans un style crayonné à partir de données géométriques stockées en base de données PostgreSQL/PostGIS. Nous voyons ici comment mettre en forme les bâtiments.

Le blog Makina-corpus

L'objectif de ce projet est d'afficher une carte dans un style crayonné à partir de données géométriques stockées en base de données PostgreSQL/PostGIS. Nous voyons ici comment mettre en forme les bâtiments.

Cette carte de Toulouse a été créée à partir de données provenant de OpenStreetMap ; la zone affichée se situe à Toulouse et ses environs. La réalisation est faite sans modifier les données d'origine, afin de pouvoir appliquer ces styles à d'autres emprises avec un minimum d'interventions techniques.

La majeure partie du travail résidait dans la définition d'un affichage « imparfait » des données. Il existe à priori peu de projets originaux de cartes stylisées sur le web (notamment la magnifique 'Pirate Map' de AJ Ashton, mais également les cartes historiques de Toulouse). Pour parvenir au résultat, j'ai utilisé les possibilités du code de TileMill, celles de PostGis, et créé sous GIMP des textures adaptées.

Automatiser l'imperfection d'un dessin manuel

Lorsqu'on dessine une carte à la main on va forcément perdre des détails, dépasser des limites, faire des tracés plus ou moins fidèles.

En utilisant des moteurs de rendu, les tracés sont rectilignes, les fonds de couleur unis :

J'ai voulu automatiser un aspect manuel, en 4 étapes :

  1. modifier les tracés, afin de donner l'impression d'un coup de crayon trop rapide, qui sur un croquis aurait permis de schématiser les tracés
  2. allonger les lignes afin de reproduire un tracé rapide à la règle
  3. remplir les polygones avec du crayonnage
  4. ajout de nouvelles lignes de contour, légèrement décalées pour créer un effet de tracés de crayon

Tout cela sera appuyé par des textures créées avec Gimp, afin de reproduire un effet de coloriage et de grain de papier.

Une première ébauche au crayon

La première étape est assez facile à réaliser : TileMill propose un attribut (line-smooth) qui amplifie les tracés.

line-color: lighten(@building-line-color,15%);
line-width: 0.5;
line-opacity: 0.5;
line-smooth: 0.8;

Le tracé à la règle des contours de bâtiments

La seconde étape est plus complexe, car il faut pour cela intervenir dans la base de données. Les bâtiments étant des polygones, il s'agit de découper ces polygones en lignes droites (donc à chaque angle rencontré une nouvelle ligne est créée).

Ces nouvelles linestring sont enregistrées dans une table. L'emprise de la zone de travail comprend environ 344 000 bâtiments, qui sont ainsi découpés en plus de 2 440 000 lignes.

J'applique à ces lignes une fonction PostGIS qui les agrandit, de manière à ce qu'elles dépassent. Une valeur aléatoire est utilisée pour parvenir à l'imperfection recherchée (plus d'informations à ce propos dans le post "Découper 340 000 polygones").

Le coloriage

Je crée une trame de fond de crayonnage en niveaux de gris et gestion de la transparence, avec GIMP (en m'aidant d'un tutoriel) :

Les couleurs de fond (en fonction du type de bâtiment) donnent ensuite l'illusion d'un coloriage réalisé avec des crayons classiques :

[type='habitat'] {
polygon-fill:#3b4447;
polygon-pattern-file: url("images/trame-crayon-inv-gauche.png");
}

[type='historique'] {
polygon-fill:#9D4D26;
polygon-pattern-file: url("images/trame-crayon-inv-256.png");
}

L'assemblage

Toutes les étapes préparatoires étant terminées, je superpose les différents effets, en gérant la transparence sur les différentes couches :

Actualités en lien

Image
SIG_DevOps_TileMill_polygone
17/03/2014

Dessiner une ville à la main avec TileMill (2 - Découper 340 000 polygones)

Comme nous l'avons vu dans un précédent article, la création d'une carte urbaine reproduisant un style crayonné repose sur la superposition de plusieurs effets : code sous TileMill, textures sous Gimp... Nous allons nous intéresser aujourd'hui à une intervention plus en amont : le découpage des polygones de bâtiments directement dans la base de données PostGIS.

Voir l'article
Image
SIG_TileMill
19/03/2014

Dessiner une ville à la main avec TileMill (3 – Occupation des sols et cours d'eau)

Nous avons vu comment représenter les bâtiments. Je m'intéresse maintenant à la mise en forme des zones d'occupation des sols et des cours d'eau pour finaliser la représentation de Toulouse et des villes environnantes.

Voir l'article
Image
Vidéo conférence SIG Webmapping Frédéric Rodrigo
23/11/2021

Vidéo conférence : Makina Maps, un serveur de fond de carte vectorielle basé sur OpenStreetMap

Visionnez la vidéo de la conférence de Frédéric RODRIGO, expert OpenStreetMap Makina Corpus, à l'Open Source Expérience 2021 : Makina Maps, un serveur de fond de carte vectorielle basé sur OpenStreetMap.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus