Foss4g-fr 2014 Workshop

1. Foss4g-fr2014
Workshop
Créezvotreproprefonddeplanàpartirde
donnéesOSMenutilisantTileMill
Sylvainbeorchia
www.makina-corpus.com
sylvain.beorchia@makina-corpus.com

2. Desfondsdeplanpersonnalisés ?

3. openstreetmap.org

4. Styleslibresréutilisables
https://github.com/mapbox/osm-bright
http://thematicmapping.org
http://openstreetmap.fr/blogs/cquest/visite-guidee

5. Charteetcarte !http://loir-et-cher-2020.makina-corpus.net

6. mapbox.com
stamen.com

7. Possibilitésinfinies...http://tolosa1680.makina-corpus.com

8. Etapes
●
InstallerTileMill
●
InstallerPostgres/Postgis
●
InstallerImposm
●
ChargerlesdonnéesOSMenbase
●
CréerunprojetTileMillàpartirduprojetOSMbright
●
LancerTileMilletcustomiserlefonddeplan
●
Exporterlesdonnées/extrairelestuiles
●
Tester(websigutilisantlestuiles)

9. InstallerTileMill
Procédured'installation:
https://www.mapbox.com/tilemill/docs/install
Pourlinux :
https://www.mapbox.com/tilemill/docs/linux-install/
Suivrelaprocédured'installation.

10. InstallerPostgres/Postgis
Souslinux (debian/ubuntu) :
sudoapt-getinstallpostgresqlpostgresql-9.1-postgis
(
Souswindows :
http://www.postgresql.org/download/windows/
)

11. InstallerImposm
Outild'importdedonnéesOSMversPostgres/gis
(http://imposm.org/)
Enlignedecommande :
> sudo aptitude install build-essential python-dev protobuf-compiler
libprotobuf-devlibtokyocabinet-devpython-psycopg2libgeos-c1
>sudoapt-getinstallpython-pip
>sudopipinstallimposm
RQ :Ilexisted'autresoutilspourimporterdesdonnéesOSM,commeosm2pgsql

12. ChargerlesdonnéesOSMenbase(1/3)
Créerlabase
sudosu-postgres
psql-Upostgres-c"createdatabaseosm;"
psql-Upostgres-dosm-c"createextensionpostgis;"

13. ChargerlesdonnéesOSMenbase(2/3)
RécupérerlesdonnéesOSM:
http://metro.teczno.com
http://download.geofabrik.de/osm/
Télécharger les données au format .osm.pbf
(ProtocolbufferBinaryFormat)

14. ChargerlesdonnéesOSMenbase(3/3)
Chargerlesdonnéesdanslabase
imposm -U gisuser -d osm -m ~/Documents/mapbox-osm-
bright-86bc63f/imposm-mapping.py --read --write --optimize
--deploy-production-tables ~/Downloads/basse-normandie-
latest.osm.pbf
Cette commande peut prendre du temps. Sur notre exemple
(donnéesduCalvados,20minutesdetraitement)

15. OSMbrightcommeprojetdedépart(1/3)
TéléchargerleprojetOSMBright
https://github.com/mapbox/osm-bright/zipball/master
Enregistreretdécompresserdansunrépertoire
Atéléchargerenplus :
http://tilemill-data.s3.amazonaws.com/osm/coastline-good.zip
http://tilemill-data.s3.amazonaws.com/osm/shoreline_300.zip
http://mapbox-geodata.s3.amazonaws.com/natural-earth-1.3.0/physical/10m-land.zip
AplacerdanslerépertoiredeOSMBright.

16. OSMbrightcommeprojetdedépart(2/3)
Configurerleprojet :
Copierconfigure.sample.pyversconfigure.py
Modifiercefichier:
-config["importer"]="imposm"
-connexionàlabase
-nomduprojet
-pathverslesprojetstilemill

17. OSMbrightcommeprojetdedépart(3/3)
Générerleprojet :
cd~/Documents/mapbox-osm-bright-86bc63f
./make.py

18. Customiserlefonddeplan :lancerTileMill
LancerTileMill
Sélectionnerleprojetprécédemmentcréé
Au premier chargement des données complémentaires seront
téléchargées(doncunchargementpluslonglapremièrefois)

19. TileMill
Carte Styles
CouleursCouches/Aides/Fonts
Paramètresprojets
Export

20. Customiserlefonddeplan :modifierlasymbologie !
Documentationenligne :
https://www.mapbox.com/tilemill/docs/crashcourse/styling/
Changerlacouleurdelamer :
Danslefichierpalette.mss : @water:#C4DFF6;
Modifierla3Ddesbatiments :
Fichierbase.mss : building-height:3.25;
Ne pas oublier de sauver le projet pour voir les
modifications !

21. Customiserlefonddeplan :stylesconditionnels
Onaunecouchedesbatiments
Eneditantlacouche,onvoitqu'ils'agitdelatable osm_buildings
Dansunterminal :
sudosu-postgres
psql-dosm
>selectdistinct(type)fromosm_buildings;
Onvaprendreuntypeetlemettreenvaleur

22. Customiserlefonddeplan :stylesconditionnels
Prenonsletype :school
Dans base.mss, on va modifier des lignes concernants l'affichage
desbuildingspar :
#buildings[zoom>=17][type!='school']{
building-fill:@building;
building-height:0.25;
}
#buildings[zoom>=17][type='school']{
building-fill:@wooded;
building-height:10.25;
}

23. Customiserlefonddeplan :stylesextrêmes
Ajouterunstyle« dessiné »auxbatiments :
Téléchargerlatrame:
http://foss4g.2tokiislands.com/trame.png
Etl'enregistrerdansleprojet/img/
Appliquercettetrameauxbatiments:
Base.mss ,àlafindublocdesbuildings,rajouter:
#buildings{
polygon-pattern-file:url("img/trame.png");
}

24. Customiserlefonddeplan :stylesextrêmes
Batiments :avoirdescontours« crayonnés »
#buildings{
line-smooth:2;
line-color:#CCCCCC;
line-opacity:0.8;
}

25. Customiserlefonddeplan :modifierlesdonnées
Biensur il est possible de sélectionner / filtrer
/modifier les données dans postgres, et ajouter de
nouvellecouchedansleprojetTileMill...

26. Customiserlefonddeplan :ajouterdesélémentsgraphiques(1/2)
Ajouteruneffet« papierplié » :
Copierlerépertoire textureduprojetgeography-classdansnotreprojet
Copier le fichier layers/world_extent_wgs84.geojson de geography-
classdannotreprojet
Ajouterunenouvellecouchenommée« paper »,detypefile :
datasource:layers/world_extent_wgs84.geojson
srs:wgs84
id:paper

27. Customiserlefonddeplan :ajouterdesélémentsgraphiques(2/2)
AjouterlestyledansleCSS :
#paper[zoom<2]{
polygon-pattern-file:url(textures/paperfolds_256.png);
}
#paper[zoom>1]{
polygon-pattern-file:url(textures/paperfolds_512.png);
}

28. Exporterlesdonnées
Utiliserlafonctiond'exportdeTileMill
Choisirleformat.MBtiles
Attention à la taille ! (réduire les niveaux de zoom si
nécessaire)

29. Extrairelestuiles
UtilitaireMButilpourextrairelestuiles
Installation
wgethttps://github.com/mapbox/mbutil/zipball/master-Ombutil.zip
unzipmbutil
cdmapbox-mbutil*
sudopythonsetup.pyinstall
Utilisation
cd/var/www/data/
mb-util--scheme=xyzmon_fichier.mbtilesworkshop

30. Tester(websigutilisantlestuiles)
Librairiecliente(OpenLayers/Leaflet)
Chargementd'unecouchedetypeTile
Cfexemple

31. Quelqueslienssupplémentaires
https://www.mapbox.com/tilemill/docs/guides/advanced-map-design/
http://makina-corpus.com/blog/metier/2014/dessiner-une-ville-a-la-main-les-batiments
http://tolosa1680.makina-corpus.com/
http://makina-corpus.com/blog/societe/2014/dessine-moi-une-ville-image-of-the-week-du-wi
http://stamen.com/
http://www.openstreetmap.org

32. Merci