Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
-
Upload
makina-corpus -
Category
Technology
-
view
2.237 -
download
1
description
Transcript of Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
![Page 1: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/1.jpg)
Foss4g-fr 2014WorkshopCréez votre propre fond de plan à partir de données OSM en utilisant TileMill
Sylvain [email protected]
![Page 2: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/2.jpg)
Des fonds de plan personnalisés ?
![Page 3: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/3.jpg)
openstreetmap.org
![Page 4: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/4.jpg)
Styles libres réutilisables
https://github.com/mapbox/osm-bright
http://thematicmapping.org
http://openstreetmap.fr/blogs/cquest/visite-guidee
![Page 5: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/5.jpg)
Charte et carte !http://loir-et-cher-2020.makina-corpus.net
![Page 6: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/6.jpg)
mapbox.com
stamen.com
![Page 7: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/7.jpg)
Possibilités infinies...http://tolosa1680.makina-corpus.com
![Page 8: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/8.jpg)
Etapes● Installer TileMill● Installer Postgres/Postgis● Installer Imposm● Charger les données OSM en base● Créer un projet TileMill à partir du projet OSM bright● Lancer TileMill et customiser le fond de plan● Exporter les données / extraire les tuiles● Tester (websig utilisant les tuiles)
![Page 9: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/9.jpg)
Installer TileMill
Procédure d'installation :https://www.mapbox.com/tilemill/docs/installPour linux :https://www.mapbox.com/tilemill/docs/linux-install/
Suivre la procédure d'installation.
![Page 10: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/10.jpg)
Installer Postgres/Postgis
Sous linux (debian / ubuntu) :sudo apt-get install postgresql postgresql-9.1-postgis
(Sous windows :http://www.postgresql.org/download/windows/)
![Page 11: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/11.jpg)
Installer Imposm
Outil d'import de données OSM vers Postgres/gis(http://imposm.org/)En ligne de commande :> sudo aptitude install build-essential python-dev protobuf-compiler libprotobuf-dev libtokyocabinet-dev python-psycopg2 libgeos-c1 > sudo apt-get install python-pip> sudo pip install imposm
RQ : Il existe d'autres outils pour importer des données OSM, comme osm2pgsql
![Page 12: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/12.jpg)
Charger les données OSM en base (1/3)
Créer la basesudo su - postgrespsql -U postgres -c "create database osm;"psql -U postgres -d osm -c "create extension postgis;"
![Page 13: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/13.jpg)
Charger les données OSM en base (2/3)
Récupérer les données OSM :http://metro.teczno.comhttp://download.geofabrik.de/osm/
Télécharger les données au format .osm.pbf (Protocolbuffer Binary Format)
![Page 14: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/14.jpg)
Charger les données OSM en base (3/3)
Charger les données dans la base 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ées du Calvados, 20 minutes de traitement)
![Page 15: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/15.jpg)
OSM bright comme projet de départ (1/3)
Télécharger le projet OSM Brighthttps://github.com/mapbox/osm-bright/zipball/masterEnregistrer et décompresser dans un répertoireA télécharger en plus :http://tilemill-data.s3.amazonaws.com/osm/coastline-good.ziphttp://tilemill-data.s3.amazonaws.com/osm/shoreline_300.ziphttp://mapbox-geodata.s3.amazonaws.com/natural-earth-1.3.0/physical/10m-land.zip
A placer dans le répertoire de OSM Bright.
![Page 16: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/16.jpg)
OSM bright comme projet de départ (2/3)
Configurer le projet :Copier configure.sample.py vers configure.pyModifier ce fichier :
- config["importer"] = "imposm" - connexion à la base - nom du projet - path vers les projets tilemill
![Page 17: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/17.jpg)
OSM bright comme projet de départ (3/3)
Générer le projet :
cd ~/Documents/mapbox-osm-bright-86bc63f./make.py
![Page 18: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/18.jpg)
Customiser le fond de plan : lancer TileMill
Lancer TileMillSélectionner le projet précédemment crééAu premier chargement des données complémentaires seront téléchargées (donc un chargement plus long la première fois)
![Page 19: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/19.jpg)
TileMill
Carte Styles
CouleursCouches / Aides / Fonts
Paramètres projets
Export
![Page 20: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/20.jpg)
Customiser le fond de plan : modifier la symbologie !Documentation en ligne :https://www.mapbox.com/tilemill/docs/crashcourse/styling/
Changer la couleur de la mer : Dans le fichier palette.mss : @water: #C4DFF6;
Modifier la 3D des batiments :Fichier base.mss : building-height:3.25;
Ne pas oublier de sauver le projet pour voir les modifications !
![Page 21: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/21.jpg)
Customiser le fond de plan : styles conditionnels
On a une couche des batimentsEn editant la couche, on voit qu'il s'agit de la table osm_buildingsDans un terminal :
sudo su - postgrespsql -d osm> select distinct(type) from osm_buildings;
On va prendre un type et le mettre en valeur
![Page 22: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/22.jpg)
Customiser le fond de plan : styles conditionnelsPrenons le type : schoolDans base.mss, on va modifier des lignes concernants l'affichage des buildings par :
#buildings[zoom>=17][type != 'school'] { building-fill:@building; building-height:0.25; } #buildings[zoom>=17][type = 'school'] { building-fill:@wooded; building-height:10.25; }
![Page 23: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/23.jpg)
Customiser le fond de plan : styles extrêmesAjouter un style « dessiné » aux batiments :Télécharger la trame : http://foss4g.2tokiislands.com/trame.pngEt l'enregistrer dans le projet/img/Appliquer cette trame aux batiments : Base.mss , à la fin du bloc des buildings, rajouter : #buildings { polygon-pattern-file: url("img/trame.png"); }
![Page 24: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/24.jpg)
Customiser le fond de plan : styles extrêmes
Batiments : avoir des contours « crayonnés »#buildings { line-smooth:2; line-color: #CCCCCC; line-opacity:0.8; }
![Page 25: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/25.jpg)
Customiser le fond de plan : modifier les données
Biensur il est possible de sélectionner / filtrer /modifier les données dans postgres, et ajouter de nouvelle couche dans le projet TileMill...
![Page 26: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/26.jpg)
Customiser le fond de plan : ajouter des éléments graphiques (1/2)
Ajouter un effet « papier plié » :Copier le répertoire texture du projet geography-class dans notre projetCopier le fichier layers/world_extent_wgs84.geojson de geography-class dan notre projet
Ajouter une nouvelle couche nommée « paper », de type file :datasource : layers/world_extent_wgs84.geojson
srs: wgs84 id: paper
![Page 27: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/27.jpg)
Customiser le fond de plan : ajouter des éléments graphiques (2/2)
Ajouter le style dans le CSS :#paper[zoom<2] { polygon-pattern-file:url(textures/paperfolds_256.png);}#paper[zoom>1] { polygon-pattern-file:url(textures/paperfolds_512.png);}
![Page 28: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/28.jpg)
Exporter les données
Utiliser la fonction d'export de TileMillChoisir le format .MBtiles
Attention à la taille ! (réduire les niveaux de zoom si nécessaire)
![Page 29: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/29.jpg)
Extraire les tuiles
Utilitaire MButil pour extraire les tuilesInstallationwget https://github.com/mapbox/mbutil/zipball/master -O mbutil.zipunzip mbutilcd mapbox-mbutil*sudo python setup.py install
Utilisationcd /var/www/data/mb-util --scheme=xyz mon_fichier.mbtiles workshop
![Page 30: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/30.jpg)
Tester (websig utilisant les tuiles)
Librairie cliente (OpenLayers / Leaflet)Chargement d'une couche de type TileCf exemple
![Page 31: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/31.jpg)
Quelques liens supplé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-batimentshttp://tolosa1680.makina-corpus.com/http://makina-corpus.com/blog/societe/2014/dessine-moi-une-ville-image-of-the-week-du-wiki-osmhttp://stamen.com/http://www.openstreetmap.org
![Page 32: Créez votre propre fond de plan à partir de données OSM en utilisant TileMill](https://reader036.fdocuments.net/reader036/viewer/2022081403/5560b641d8b42a033c8b4a65/html5/thumbnails/32.jpg)
Merci