Introduction à l'utilisation de l'outil de design de cartes TileMill et à la réutilisation des cartes.

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 ?