Introduction à TileMill

2,171 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,171
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction à TileMill

  1. 1. TilleMill Créer - RéutiliserMake 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. 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. 3. Interface Export Aperçut de la carte Aide Édition CSS CalquesInteractivitéDocumentation
  4. 4. Calques● Calques pour la composition du style● Données thématiques à styler sur la carte● Origine – PostGis – Shape – Sqlite
  5. 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. 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. 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. 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. 9. Style● Catégories dattributs Trait et aplat Image marker point line line-pattern polygon polygon-pattern text shield
  10. 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="Pistebidirectionnelle"] { line-color: green; } [NATURE="Double sens"], [NATURE="Zone de rencontre"]{ line-color: yellow; } [NATURE="Zone 30"] { line-color: #4578AD; }}
  11. 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. 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. 13. Par MapBox
  14. 14. Par AJ Ashton
  15. 15. Poverty change in Americaby The New America Foundation
  16. 16. Interaction }● Rendu supplémentaire invisible● Sélection de champs pour linteraction● Uniquement avec lexport MBTiles {{{famille}}} {{{age2}}} ans
  17. 17. Diffuser● MBTiles – Paquet de tuiles prérendus (sqlite) – Support de linteraction● Image : PNG, PDF, SVG● Style XML Mapnik 2
  18. 18. Diffuser : MBTiles● Upload sur MapBox● mbtiles-server.php● Python-mbtiles● Serveur Mapcache● Pour linteraction client : OL/Leaflet + Wax Photo par Fr Antunes – 2007 - CC-By
  19. 19. Moulons ?

×