Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,630 views

Published on

Foss4g-fr 2014 Workshop

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×