TileMill est un studio de design de cartes développé par Mapbox, permettant de créer des cartes interactives en utilisant CSS-like pour le stylisme. Le logiciel fonctionne hors ligne, en utilisant Node.js et Mapnik pour le rendu, et gère des données thématiques provenant de différentes sources. Des fonctionnalités d'interactivité et des options d'exportation en formats variés comme MBTiles sont également disponibles.

1. TilleMill
Créer - Réutiliser
Make beautiful interactive maps
SoTM-FR 2013
Lyon le 23-02-2013
Frédéric Rodrigo <frederic@carte-libre.fr>
(c)left 2013 - CC-BY-SA v3.0

2. TileMill
● Studio de design de carte par MapBox
● Logiciel web offline
– Ecrit en Node JS
– Rendu des cartes avec Mapnik
– Style en « CSS »

3. Interface Export
Aperçut de la carte
Aide Édition CSS
Calques
Interactivité
Documentation

4. Calques
● Calques pour la composition du style
● Données thématiques à styler sur la carte
● Origine
– PostGis
– Shape
– Sqlite

5. Calques
● Requête à chaque rendu de chaque tuile
– Requête spatiale
– Utiliser des index
● Champs utilisables
– Condition de style
– Texte sur le rendu

6. Aperçut de la carte
● Carte navigable
● Rendu en direct lors de l'édition du style
● Rendu par Mapnik 2 depuis le style

7. Style
● CartoCSS un CSS-like
Calque
Style
#generator {
Condition
marker-fill: gray; « source » champ du calque
[source="nuclear"] {
marker-fill: #F00000;
} Style de surcharge
}

8. Style
Calque Condition
« zoom » de la carte
#city_wall[zoom>=13] {
« @ » Constante
line-color: @color_light;
line-width: 6; « :: » Rendu
complémentaire des
::overlay { mêmes données du calque
line-color: @color_dark_plain;
line-width: 3;
}
}

9. Style
● Catégories d'attributs
Trait et aplat Image
marker point
line line-pattern
polygon polygon-pattern
text shield

10. Style : ligne
#sigpistescycl {
line-width:2;
line-color:#168;
[zoom>=15] { line-width:3; }
[NATURE="Piste unidirectionnelle"] {
line-dasharray: 2, 2;
[zoom>=15] { line-dasharray: 3, 3; }
}
[NATURE="Piste unidirectionnelle"], [NATURE="Piste
bidirectionnelle"] { line-color: green; }
[NATURE="Double sens"], [NATURE="Zone de rencontre"]
{ line-color: yellow; }
[NATURE="Zone 30"] { line-color: #4578AD; }
}

11. Style : point
#arbre {
::outline1 {
marker-width:8;
marker-opacity:.3;
[famille="Tiliaceae"] { marker-fill:#ffc300; }
[age2>=50][age2<100] { marker-width:16; }
[age2>=100][age2<150] { marker-width:28; }
}
::outline2 {
marker-opacity:.5;
marker-width:4;
[...]
}

12. Style : texte
@goudy_italic: "GoudyBookletter1911Italic Regular";
@color_light: rgba(243,243,228,0.8);
Map { background-image: url(textures/background.png); }
#boat[zoom>=8][zoom<=9] {
[boat="1"] { point-file: url(textures/boat1.png); }
}
#place[zoom>4] {
::city [place='city'], ::town [place='town'][zoom>=11] {
[zoom<13] { point-file: url(textures/place_big.png); }
::a {
text-face-name: @goudy_italic;
text-halo-fill: @color_light;
text-halo-radius: 2;
}
}
}

13. Par MapBox

14. Par AJ Ashton

15. Poverty change in America
by The New America Foundation

16. Interaction
}
● Rendu supplémentaire invisible
● Sélection de champs pour l'interaction
● Uniquement avec l'export MBTiles
{{{famille}}} {{{age2}}} ans

17. Diffuser
● MBTiles
– Paquet de tuiles prérendus (sqlite)
– Support de l'interaction
● Image : PNG, PDF, SVG
● Style XML Mapnik 2

18. Diffuser : MBTiles
● Upload sur MapBox
● mbtiles-server.php
● Python-mbtiles
● Serveur Mapcache
● Pour l'interaction client : OL/Leaflet + Wax
Photo par Fr Antunes – 2007 - CC-By

19. Moulons ?