SlideShare uma empresa Scribd logo
1 de 19
Baixar para ler offline
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
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

                   Calques

Interactivité


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 d'attributs


                  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="Piste
bidirectionnelle"] { 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 America
by The New America Foundation
Interaction




                       }
●   Rendu supplémentaire invisible
●   Sélection de champs pour l'interaction
●   Uniquement avec l'export MBTiles
    {{{famille}}} {{{age2}}} ans
Diffuser
●   MBTiles
    –   Paquet de tuiles prérendus (sqlite)
    –   Support de l'interaction
●   Image : PNG, PDF, SVG
●   Style XML Mapnik 2
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
Moulons ?

Mais conteúdo relacionado

Semelhante a Introduction à TileMill

Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs csspefringant
 
Chapitre 2 - Programmation web - 3) Le CSS.pdf
Chapitre 2 - Programmation web - 3) Le CSS.pdfChapitre 2 - Programmation web - 3) Le CSS.pdf
Chapitre 2 - Programmation web - 3) Le CSS.pdfAnouAr42
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleKaelig Deloumeau-Prigent
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3davrous
 
Cassandra techniques de modelisation avancee
Cassandra techniques de modelisation avanceeCassandra techniques de modelisation avancee
Cassandra techniques de modelisation avanceeDuyhai Doan
 
Le web mapping pour tous
Le web mapping pour tousLe web mapping pour tous
Le web mapping pour tousLoïc Haÿ
 
Slides de la Localisation
Slides de la LocalisationSlides de la Localisation
Slides de la LocalisationCocoaHeads.fr
 
CSS-MECHID.pdfhhhhhhhhhhhhhhhhhhhhhhhhhh
CSS-MECHID.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhCSS-MECHID.pdfhhhhhhhhhhhhhhhhhhhhhhhhhh
CSS-MECHID.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhmistersmile053
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
 
Web Map Service (WMS)
Web Map Service (WMS)Web Map Service (WMS)
Web Map Service (WMS)BIG
 
L’atout cartographie en mobilité : implémentation pratique et cas concrets
L’atout cartographie en mobilité : implémentation pratique et cas concretsL’atout cartographie en mobilité : implémentation pratique et cas concrets
L’atout cartographie en mobilité : implémentation pratique et cas concretsMicrosoft
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8davrous
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsMicrosoft
 
Exemple d'utilisation de la génération GWT
Exemple d'utilisation de la génération GWTExemple d'utilisation de la génération GWT
Exemple d'utilisation de la génération GWTFrédéric Menou
 

Semelhante a Introduction à TileMill (20)

Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
Dijkstra kshortest
Dijkstra kshortestDijkstra kshortest
Dijkstra kshortest
 
Chapitre 2 - Programmation web - 3) Le CSS.pdf
Chapitre 2 - Programmation web - 3) Le CSS.pdfChapitre 2 - Programmation web - 3) Le CSS.pdf
Chapitre 2 - Programmation web - 3) Le CSS.pdf
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
Cassandra techniques de modelisation avancee
Cassandra techniques de modelisation avanceeCassandra techniques de modelisation avancee
Cassandra techniques de modelisation avancee
 
L'animation newschool en html5
L'animation newschool en html5L'animation newschool en html5
L'animation newschool en html5
 
Symbologie complexe avec Mapserver
Symbologie complexe avec MapserverSymbologie complexe avec Mapserver
Symbologie complexe avec Mapserver
 
Le web mapping pour tous
Le web mapping pour tousLe web mapping pour tous
Le web mapping pour tous
 
Slides de la Localisation
Slides de la LocalisationSlides de la Localisation
Slides de la Localisation
 
CSS-MECHID.pdfhhhhhhhhhhhhhhhhhhhhhhhhhh
CSS-MECHID.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhCSS-MECHID.pdfhhhhhhhhhhhhhhhhhhhhhhhhhh
CSS-MECHID.pdfhhhhhhhhhhhhhhhhhhhhhhhhhh
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
Web Map Service (WMS)
Web Map Service (WMS)Web Map Service (WMS)
Web Map Service (WMS)
 
Web Map Service (WMS)
Web Map Service (WMS)Web Map Service (WMS)
Web Map Service (WMS)
 
L’atout cartographie en mobilité : implémentation pratique et cas concrets
L’atout cartographie en mobilité : implémentation pratique et cas concretsL’atout cartographie en mobilité : implémentation pratique et cas concrets
L’atout cartographie en mobilité : implémentation pratique et cas concrets
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
 
Exemple d'utilisation de la génération GWT
Exemple d'utilisation de la génération GWTExemple d'utilisation de la génération GWT
Exemple d'utilisation de la génération GWT
 
WPF.pptx
WPF.pptxWPF.pptx
WPF.pptx
 

Mais de Frédéric Rodrigo

Cartography: Vector Tiles From an Open Initiative To an Industry Standard
Cartography: Vector Tiles  From an Open Initiative To an Industry StandardCartography: Vector Tiles  From an Open Initiative To an Industry Standard
Cartography: Vector Tiles From an Open Initiative To an Industry StandardFrédéric Rodrigo
 
Osmose-QA, OpenData, Mapillary and MapCSS
Osmose-QA, OpenData, Mapillary and MapCSSOsmose-QA, OpenData, Mapillary and MapCSS
Osmose-QA, OpenData, Mapillary and MapCSSFrédéric Rodrigo
 
Automatic Enhancement of Pedestrian Route using extracted Landmarks from OSM
Automatic Enhancement of Pedestrian Route using extracted Landmarks from OSMAutomatic Enhancement of Pedestrian Route using extracted Landmarks from OSM
Automatic Enhancement of Pedestrian Route using extracted Landmarks from OSMFrédéric Rodrigo
 
Annoter automatiquement un itinéraire piéton avec des repères issus d'OSM
Annoter automatiquement un itinéraire piéton avec des repères issus d'OSMAnnoter automatiquement un itinéraire piéton avec des repères issus d'OSM
Annoter automatiquement un itinéraire piéton avec des repères issus d'OSMFrédéric Rodrigo
 
OSRM - Open Source Routing Machine
OSRM - Open Source Routing MachineOSRM - Open Source Routing Machine
OSRM - Open Source Routing MachineFrédéric Rodrigo
 
Addok, BAN et BANO dans un bateau
Addok, BAN et BANO dans un bateauAddok, BAN et BANO dans un bateau
Addok, BAN et BANO dans un bateauFrédéric Rodrigo
 
Osmose : la conquête du monde
Osmose : la conquête du mondeOsmose : la conquête du monde
Osmose : la conquête du mondeFrédéric Rodrigo
 
5/5 Osm 20141118-l2.3-réutilisation
5/5 Osm 20141118-l2.3-réutilisation5/5 Osm 20141118-l2.3-réutilisation
5/5 Osm 20141118-l2.3-réutilisationFrédéric Rodrigo
 
4/5 Osm 20141118-l2.2-collecte et contribution
4/5 Osm 20141118-l2.2-collecte et contribution4/5 Osm 20141118-l2.2-collecte et contribution
4/5 Osm 20141118-l2.2-collecte et contributionFrédéric Rodrigo
 
3/5 Osm 20141118-l2.1-être à l'aise avec open streetmap
3/5 Osm 20141118-l2.1-être à l'aise avec open streetmap3/5 Osm 20141118-l2.1-être à l'aise avec open streetmap
3/5 Osm 20141118-l2.1-être à l'aise avec open streetmapFrédéric Rodrigo
 
2/5 Osm 20141106-l1.2-initiation à la contribution
2/5 Osm 20141106-l1.2-initiation à la contribution2/5 Osm 20141106-l1.2-initiation à la contribution
2/5 Osm 20141106-l1.2-initiation à la contributionFrédéric Rodrigo
 
1/5 Osm 20141106-l1.1-présentation
1/5 Osm 20141106-l1.1-présentation1/5 Osm 20141106-l1.1-présentation
1/5 Osm 20141106-l1.1-présentationFrédéric Rodrigo
 

Mais de Frédéric Rodrigo (20)

OSXP 2021 - MAKINA MAPS
OSXP 2021 - MAKINA MAPSOSXP 2021 - MAKINA MAPS
OSXP 2021 - MAKINA MAPS
 
Cartography: Vector Tiles From an Open Initiative To an Industry Standard
Cartography: Vector Tiles  From an Open Initiative To an Industry StandardCartography: Vector Tiles  From an Open Initiative To an Industry Standard
Cartography: Vector Tiles From an Open Initiative To an Industry Standard
 
Osmose-QA, OpenData, Mapillary and MapCSS
Osmose-QA, OpenData, Mapillary and MapCSSOsmose-QA, OpenData, Mapillary and MapCSS
Osmose-QA, OpenData, Mapillary and MapCSS
 
Automatic Enhancement of Pedestrian Route using extracted Landmarks from OSM
Automatic Enhancement of Pedestrian Route using extracted Landmarks from OSMAutomatic Enhancement of Pedestrian Route using extracted Landmarks from OSM
Automatic Enhancement of Pedestrian Route using extracted Landmarks from OSM
 
Annoter automatiquement un itinéraire piéton avec des repères issus d'OSM
Annoter automatiquement un itinéraire piéton avec des repères issus d'OSMAnnoter automatiquement un itinéraire piéton avec des repères issus d'OSM
Annoter automatiquement un itinéraire piéton avec des repères issus d'OSM
 
Open Traffic
Open TrafficOpen Traffic
Open Traffic
 
Osmose-QA
Osmose-QAOsmose-QA
Osmose-QA
 
OSRM L'état du routage
OSRM L'état du routageOSRM L'état du routage
OSRM L'état du routage
 
OSRM - Open Source Routing Machine
OSRM - Open Source Routing MachineOSRM - Open Source Routing Machine
OSRM - Open Source Routing Machine
 
Addok, BAN et BANO dans un bateau
Addok, BAN et BANO dans un bateauAddok, BAN et BANO dans un bateau
Addok, BAN et BANO dans un bateau
 
Osmose-QA
Osmose-QAOsmose-QA
Osmose-QA
 
Osmose-QA OpenData
Osmose-QA OpenDataOsmose-QA OpenData
Osmose-QA OpenData
 
20150607 sotm-us-osmose-qa
20150607 sotm-us-osmose-qa20150607 sotm-us-osmose-qa
20150607 sotm-us-osmose-qa
 
Mapotempo
MapotempoMapotempo
Mapotempo
 
Osmose : la conquête du monde
Osmose : la conquête du mondeOsmose : la conquête du monde
Osmose : la conquête du monde
 
5/5 Osm 20141118-l2.3-réutilisation
5/5 Osm 20141118-l2.3-réutilisation5/5 Osm 20141118-l2.3-réutilisation
5/5 Osm 20141118-l2.3-réutilisation
 
4/5 Osm 20141118-l2.2-collecte et contribution
4/5 Osm 20141118-l2.2-collecte et contribution4/5 Osm 20141118-l2.2-collecte et contribution
4/5 Osm 20141118-l2.2-collecte et contribution
 
3/5 Osm 20141118-l2.1-être à l'aise avec open streetmap
3/5 Osm 20141118-l2.1-être à l'aise avec open streetmap3/5 Osm 20141118-l2.1-être à l'aise avec open streetmap
3/5 Osm 20141118-l2.1-être à l'aise avec open streetmap
 
2/5 Osm 20141106-l1.2-initiation à la contribution
2/5 Osm 20141106-l1.2-initiation à la contribution2/5 Osm 20141106-l1.2-initiation à la contribution
2/5 Osm 20141106-l1.2-initiation à la contribution
 
1/5 Osm 20141106-l1.1-présentation
1/5 Osm 20141106-l1.1-présentation1/5 Osm 20141106-l1.1-présentation
1/5 Osm 20141106-l1.1-présentation
 

Introduction à TileMill