Foss4g-fr2014
Workshop
Créezvotreproprefonddeplanàpartirde
donnéesOSMenutilisantTileMill
Sylvainbeorchia
www.makina-corpus...
Desfondsdeplanpersonnalisés ?
openstreetmap.org
Styleslibresréutilisables
https://github.com/mapbox/osm-bright
http://thematicmapping.org
http://openstreetmap.fr/blogs/cq...
Charteetcarte !http://loir-et-cher-2020.makina-corpus.net
mapbox.com
stamen.com
Possibilitésinfinies...http://tolosa1680.makina-corpus.com
Etapes
●
InstallerTileMill
●
InstallerPostgres/Postgis
●
InstallerImposm
●
ChargerlesdonnéesOSMenbase
●
CréerunprojetTileM...
InstallerTileMill
Procédured'installation:
https://www.mapbox.com/tilemill/docs/install
Pourlinux :
https://www.mapbox.com...
InstallerPostgres/Postgis
Souslinux (debian/ubuntu) :
sudoapt-getinstallpostgresqlpostgresql-9.1-postgis
(
Souswindows :
h...
InstallerImposm
Outild'importdedonnéesOSMversPostgres/gis
(http://imposm.org/)
Enlignedecommande :
> sudo aptitude install...
ChargerlesdonnéesOSMenbase(1/3)
Créerlabase
sudosu-postgres
psql-Upostgres-c"createdatabaseosm;"
psql-Upostgres-dosm-c"cre...
ChargerlesdonnéesOSMenbase(2/3)
RécupérerlesdonnéesOSM:
http://metro.teczno.com
http://download.geofabrik.de/osm/
Téléchar...
ChargerlesdonnéesOSMenbase(3/3)
Chargerlesdonnéesdanslabase
imposm -U gisuser -d osm -m ~/Documents/mapbox-osm-
bright-86b...
OSMbrightcommeprojetdedépart(1/3)
TéléchargerleprojetOSMBright
https://github.com/mapbox/osm-bright/zipball/master
Enregis...
OSMbrightcommeprojetdedépart(2/3)
Configurerleprojet :
Copierconfigure.sample.pyversconfigure.py
Modifiercefichier:
-confi...
OSMbrightcommeprojetdedépart(3/3)
Générerleprojet :
cd~/Documents/mapbox-osm-bright-86bc63f
./make.py
Customiserlefonddeplan :lancerTileMill
LancerTileMill
Sélectionnerleprojetprécédemmentcréé
Au premier chargement des donné...
TileMill
Carte Styles
CouleursCouches/Aides/Fonts
Paramètresprojets
Export
Customiserlefonddeplan :modifierlasymbologie !
Documentationenligne :
https://www.mapbox.com/tilemill/docs/crashcourse/sty...
Customiserlefonddeplan :stylesconditionnels
Onaunecouchedesbatiments
Eneditantlacouche,onvoitqu'ils'agitdelatable osm_buil...
Customiserlefonddeplan :stylesconditionnels
Prenonsletype :school
Dans base.mss, on va modifier des lignes concernants l'a...
Customiserlefonddeplan :stylesextrêmes
Ajouterunstyle« dessiné »auxbatiments :
Téléchargerlatrame:
http://foss4g.2tokiisla...
Customiserlefonddeplan :stylesextrêmes
Batiments :avoirdescontours« crayonnés »
#buildings{
line-smooth:2;
line-color:#CCC...
Customiserlefonddeplan :modifierlesdonnées
Biensur il est possible de sélectionner / filtrer
/modifier les données dans po...
Customiserlefonddeplan :ajouterdesélémentsgraphiques(1/2)
Ajouteruneffet« papierplié » :
Copierlerépertoire textureduproje...
Customiserlefonddeplan :ajouterdesélémentsgraphiques(2/2)
AjouterlestyledansleCSS :
#paper[zoom<2]{
polygon-pattern-file:u...
Exporterlesdonnées
Utiliserlafonctiond'exportdeTileMill
Choisirleformat.MBtiles
Attention à la taille ! (réduire les nivea...
Extrairelestuiles
UtilitaireMButilpourextrairelestuiles
Installation
wgethttps://github.com/mapbox/mbutil/zipball/master-O...
Tester(websigutilisantlestuiles)
Librairiecliente(OpenLayers/Leaflet)
Chargementd'unecouchedetypeTile
Cfexemple
Quelqueslienssupplémentaires
https://www.mapbox.com/tilemill/docs/guides/advanced-map-design/
http://makina-corpus.com/blo...
Merci
Prochain SlideShare
Chargement dans…5
×

Créez votre propre fond de plan à partir de données OSM en utilisant TileMill

3 483 vues

Publié le

Foss4g-fr 2014 Workshop

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 483
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 802
Actions
Partages
0
Téléchargements
51
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Créez votre propre fond de plan à partir de données OSM en utilisant TileMill

  1. 1. Foss4g-fr2014 Workshop Créezvotreproprefonddeplanàpartirde donnéesOSMenutilisantTileMill Sylvainbeorchia www.makina-corpus.com sylvain.beorchia@makina-corpus.com
  2. 2. Desfondsdeplanpersonnalisés ?
  3. 3. openstreetmap.org
  4. 4. Styleslibresréutilisables https://github.com/mapbox/osm-bright http://thematicmapping.org http://openstreetmap.fr/blogs/cquest/visite-guidee
  5. 5. Charteetcarte !http://loir-et-cher-2020.makina-corpus.net
  6. 6. mapbox.com stamen.com
  7. 7. Possibilitésinfinies...http://tolosa1680.makina-corpus.com
  8. 8. Etapes ● InstallerTileMill ● InstallerPostgres/Postgis ● InstallerImposm ● ChargerlesdonnéesOSMenbase ● CréerunprojetTileMillàpartirduprojetOSMbright ● LancerTileMilletcustomiserlefonddeplan ● Exporterlesdonnées/extrairelestuiles ● Tester(websigutilisantlestuiles)
  9. 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. 10. InstallerPostgres/Postgis Souslinux (debian/ubuntu) : sudoapt-getinstallpostgresqlpostgresql-9.1-postgis ( Souswindows : http://www.postgresql.org/download/windows/ )
  11. 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. 12. ChargerlesdonnéesOSMenbase(1/3) Créerlabase sudosu-postgres psql-Upostgres-c"createdatabaseosm;" psql-Upostgres-dosm-c"createextensionpostgis;"
  13. 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. 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. 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. 16. OSMbrightcommeprojetdedépart(2/3) Configurerleprojet : Copierconfigure.sample.pyversconfigure.py Modifiercefichier: -config["importer"]="imposm" -connexionàlabase -nomduprojet -pathverslesprojetstilemill
  17. 17. OSMbrightcommeprojetdedépart(3/3) Générerleprojet : cd~/Documents/mapbox-osm-bright-86bc63f ./make.py
  18. 18. Customiserlefonddeplan :lancerTileMill LancerTileMill Sélectionnerleprojetprécédemmentcréé Au premier chargement des données complémentaires seront téléchargées(doncunchargementpluslonglapremièrefois)
  19. 19. TileMill Carte Styles CouleursCouches/Aides/Fonts Paramètresprojets Export
  20. 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. 21. Customiserlefonddeplan :stylesconditionnels Onaunecouchedesbatiments Eneditantlacouche,onvoitqu'ils'agitdelatable osm_buildings Dansunterminal : sudosu-postgres psql-dosm >selectdistinct(type)fromosm_buildings; Onvaprendreuntypeetlemettreenvaleur
  22. 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. 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. 24. Customiserlefonddeplan :stylesextrêmes Batiments :avoirdescontours« crayonnés » #buildings{ line-smooth:2; line-color:#CCCCCC; line-opacity:0.8; }
  25. 25. Customiserlefonddeplan :modifierlesdonnées Biensur il est possible de sélectionner / filtrer /modifier les données dans postgres, et ajouter de nouvellecouchedansleprojetTileMill...
  26. 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. 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. 28. Exporterlesdonnées Utiliserlafonctiond'exportdeTileMill Choisirleformat.MBtiles Attention à la taille ! (réduire les niveaux de zoom si nécessaire)
  29. 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. 30. Tester(websigutilisantlestuiles) Librairiecliente(OpenLayers/Leaflet) Chargementd'unecouchedetypeTile Cfexemple
  31. 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. 32. Merci

×