• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction à TileMill
 

Introduction à TileMill

on

  • 1,778 views

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

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

Statistics

Views

Total Views
1,778
Views on SlideShare
1,778
Embed Views
0

Actions

Likes
0
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction à TileMill Introduction à TileMill Presentation Transcript

    • 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
    • TileMill● Studio de design de carte par MapBox● Logiciel web offline – Ecrit en Node JS – Rendu des cartes avec Mapnik – Style en « CSS »
    • Interface Export Aperçut de la carte Aide Édition CSS CalquesInteractivitéDocumentation
    • Calques● Calques pour la composition du style● Données thématiques à styler sur la carte● Origine – PostGis – Shape – Sqlite
    • Calques● Requête à chaque rendu de chaque tuile – Requête spatiale – Utiliser des index● Champs utilisables – Condition de style – Texte sur le rendu
    • Aperçut de la carte● Carte navigable● Rendu en direct lors de lédition du style● Rendu par Mapnik 2 depuis le style
    • Style● CartoCSS un CSS-like Calque Style #generator { Condition marker-fill: gray; « source » champ du calque [source="nuclear"] { marker-fill: #F00000; } Style de surcharge }
    • 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; }}
    • Style● Catégories dattributs Trait et aplat Image marker point line line-pattern polygon polygon-pattern text shield
    • 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; }}
    • 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;[...]}
    • 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;    }  }}
    • Par MapBox
    • Par AJ Ashton
    • Poverty change in Americaby The New America Foundation
    • Interaction }● Rendu supplémentaire invisible● Sélection de champs pour linteraction● Uniquement avec lexport MBTiles {{{famille}}} {{{age2}}} ans
    • Diffuser● MBTiles – Paquet de tuiles prérendus (sqlite) – Support de linteraction● Image : PNG, PDF, SVG● Style XML Mapnik 2
    • 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
    • Moulons ?