Créer, héberger et personnaliser une carte interactive

Comment concevoir de A à Z une carte géographique interactive pour un fonctionnement en ligne ou hors ligne ?

26 février 2015

Carte interactive de Lyon

Rappels

openstreetmap ou osm sont des données géographiques libres du monde.

base de données est un outil informatique qui permet de stocker et de retrouver des informations, cet outil est nécessaire à l'utilisation des données osm.

serveur de données est un ordinateur qui contient une base de données et qui répond aux demandes provenant d'autres ordinateurs appelés clients. Dans notre cas le client générera la carte en demandant les données géographiques au serveur de données.

virtualisation ou virtualiser permet de simuler plusieurs ordinateurs sur un seul, dans notre cas il permet de faire fonctionner le serveur de données et le client sur le même ordinateur.

Exemple d'utilisation

Nous avons utilisé cette méthode pour localiser les lieux, pour créer et administrer notre propre carte de la ville de Lyon, utilisable en ligne sans avoir recours à des services externes, comme google map ou viamichelin.

Nous avons mis en place deux versions d'utilisation de cette carte :

La première étape est la mise en place du serveur dans une machine virtuelle qui contient les données géographiques osm.

La seconde étape est la génération d'un fichier qui contiendra la représentation graphique de la carte.

La dernière étape est la mise en production de la carte.

Serveur de données osm

Pré-requis

Votre ordinateur doit posséder au moins 4 Go de mémoire vive et 20 Go libre sur votre disque dur.

virtualbox doit être installé, ce logiciel libre permet de virtualiser un serveur de données, sous windows ajouter le répertoire d'installation dans la variable d'environnement path.

Créer un répertoire de travail qui contiendra les différents fichiers nécessaires.

Linux Debian est le nom d'un système d'exploitation libre. Télécharger l'image de CD d'installation de Linux Debian version 7 wheezy pour processeur amd64 dans votre répertoire de travail.

Créer le serveur

Les lignes de commandes qui vont suivre doivent être exécutées depuis votre répertoire de travail.

La machine virtuelle devra avoir accès à Internet.

Afficher la liste des adaptateurs réseaux disponibles :

vboxmanage list bridgedifs

Cela affiche par exemple :

Name:            Intel(R) Centrino(R) Wireless-N 2230
GUID:            ea673549-d952-4681-b9c3-4991ab64ee3c
DHCP:            Enabled
IPAddress:       192.168.0.12
NetworkMask:     255.255.255.0
IPV6Address:     fe80:0000:0000:0000:6d96:9077:243b:3800
IPV6NetworkMaskPrefixLength: 64
HardwareAddress: 68:5d:43:2d:83:7c
MediumType:      Ethernet
Status:          Up
VBoxNetworkName: HostInterfaceNetworking-Intel(R) Centrino(R) Wireless-N 22

Name:            Realtek PCIe GBE Family Controller
GUID:            8959e535-7596-44ac-91a6-9b67d0f040fd
DHCP:            Enabled
IPAddress:       169.254.90.118
NetworkMask:     15.0.0.0
IPV6Address:     fe80:0000:0000:0000:d415:edf0:d214:5a76
IPV6NetworkMaskPrefixLength: 64
HardwareAddress: 10:bf:48:14:ae:b7
MediumType:      Ethernet
Status:          Down
VBoxNetworkName: HostInterfaceNetworking-Realtek PCIe GBE Family Controller

Noter le nom de l'adaptateur réseau qui correspond à votre connexion Internet, ici Intel(R) Centrino(R) Wireless-N 2230

Créer la machine virtuelle nommée OSM-Glicer-Server en exécutant la ligne de commande ci-dessous :

vboxmanage createvm --name OSM-Glicer-Server --ostype Debian_64 --register

Cela affiche :

Virtual machine 'OSM-Glicer-Server' is created and registered.
UUID: 91fc36b1-7dbe-4e3f-8887-995209b8a275
Settings file: 'C:\Users\crapoto\VirtualBox VMs\OSM-Glicer-Server\OSM-Glicer-Server.vbox'

Ajouter 2Go de Ram, 2 processeurs, autoriser le copier/coller, affecter 32Mo à la carte vidéo, activer l'accélération 3D, et la carte réseau avec le nom de l'adaptateur réseau précédemment noté :

vboxmanage modifyvm OSM-Glicer-Server --cpus 2 --memory 2048 --vram 32 --accelerate3d on --clipboard bidirectional --nic1 bridged --bridgeadapter1 "Intel(R) Centrino(R) Wireless-N 2230"

Créer un disque dur de 18Go nommé OSM-Glicer-Server.vdi :

vboxmanage createhd --filename OSM-Glicer-Server.vdi --size 18000 --format VDI

Cela affiche :

0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%
Disk image created. UUID: 548b290f-43f1-41a3-a6ba-b0d7ab242c56

Ajouter à la machine virtuelle un contrôleur de périphériques :

vboxmanage storagectl OSM-Glicer-Server --name "SATA Controller" --add sata --controller IntelAhci

Ajouter au contrôleur le disque dur OSM-Glicer-Server.vdi précédemment créé :

vboxmanage storageattach OSM-Glicer-Server --storagectl "SATA Controller" --port 0 --device 0 --type hdd --medium OSM-Glicer-Server.vdi

Ajouter un lecteur de dvd et charger le cd bootable de Linux Debian téléchargé auparavant dans les pré-requis :

vboxmanage storageattach OSM-Glicer-Server --storagectl "SATA Controller" --port 1 --device 0 --type dvddrive --medium debian-7.7.0-amd64-netinst.iso

Démarrer la machine virtuelle :

vboxmanage startvm OSM-Glicer-Server

Astuce : Pour libérer la souris de la machine virtuelle, il faut appuyer sur la touche ctrl de droite.

Après le démarrage de la machine virtuelle, sélectionner Advanced Options puis Graphical automated install.

Choisir la langue, la situation géographique et le clavier.

À la page Télécharger un fichier de préconfiguration, indiquer l'adresse internet de notre fichier de préconfiguration, il contient les options d'installations nécessaires :

http://dev.glicer.com/download/debian7preseed.cfg

Après plusieurs dizaines de minutes, une fois l'installation terminée, la machine virtuelle affiche la page de connexion.

Éteindre la machine virtuelle.

Créer un instantané de la machine virtuelle afin de revenir à l'état initial si nécessaire, en exécutant la ligne de commande ci-dessous :

vboxmanage snapshot OSM-Glicer-Server take init --description "Etat initial"

Démarrer et se connecter à la machine virtuelle :

vboxmanage startvm OSM-Glicer-Server

Le nom d'utilisateur standard est glicer et son mot de passe est glicer.

Le mot de passe de l'administrateur root est glicer.

Astuce : À partir de ce moment, le copier/coller entre la machine virtuelle et son hôte devrait fonctionner.

Installer PostgreSQL

PostgreSQL est un logiciel libre de gestion de base de données, il permet par exemple de stocker et d'accéder aux données osm.

Toutes les opérations de ce chapitre sont à effectuer dans la machine virtuelle.

Afficher une invité de commande en cliquant dans le menu Activités -> Applications -> Terminal.

Installer PostgreSQL en exécutant la ligne de commande ci-dessous :

sudo aptitude -y install postgresql-9.1-postgis

Cela affiche :

Les NOUVEAUX paquets suivants vont être installés :
  libgeos-3.3.3{a} libgeos-c1{a} libpq5{a} libproj0{a} postgis{a}
  postgresql-9.1{a} postgresql-9.1-postgis postgresql-client-9.1{a}
  postgresql-client-common{a} postgresql-common{a} proj-data{a} ssl-cert{a}
0 paquets mis à jour, 12 nouvellement installés, 0 à enlever et 0 non mis à jour.
Il est nécessaire de télécharger 9 879 ko d'archives. Après dépaquetage, 36,3 Mo seront utilisés.
Prendre :  1 http://ftp2.de.debian.org/debian/ wheezy/main libgeos-3.3.3 i386 3.3.3-1.1 [674 kB]
Prendre :  2 http://ftp2.de.debian.org/debian/ wheezy/main libgeos-c1 i386 3.3.3-1.1 [174 kB]
Prendre :  3 http://ftp2.de.debian.org/debian/ wheezy/main libpq5 i386 9.1.14-0+deb7u1 [138 kB]
Prendre :  4 http://ftp2.de.debian.org/debian/ wheezy/main postgis i386 1.5.3-2 [646 kB]
Prendre :  5 http://ftp2.de.debian.org/debian/ wheezy/main postgresql-client-common all 134wheezy4 [63,3 kB]
Prendre :  6 http://ftp2.de.debian.org/debian/ wheezy/main postgresql-client-9.1 i386 9.1.14-0+deb7u1 [979 kB]
Prendre :  7 http://ftp2.de.debian.org/debian/ wheezy/main ssl-cert all 1.0.32 [19,5 kB]
Prendre :  8 http://ftp2.de.debian.org/debian/ wheezy/main postgresql-common all 134wheezy4 [138 kB]
Prendre :  9 http://ftp2.de.debian.org/debian/ wheezy/main postgresql-9.1 i386 9.1.14-0+deb7u1 [3 281 kB]
Prendre :  10 http://ftp2.de.debian.org/debian/ wheezy/main proj-data i386 4.7.0-2 [2 935 kB]
Prendre :  11 http://ftp2.de.debian.org/debian/ wheezy/main libproj0 i386 4.7.0-2 [132 kB]
Prendre :  12 http://ftp2.de.debian.org/debian/ wheezy/main postgresql-9.1-postgis i386 1.5.3-2 [701 kB]
 9 879 ko téléchargés en 4s (2 397 ko/s)
Préconfiguration des paquets...
Sélection du paquet libgeos-3.3.3 précédemment désélectionné.
(Lecture de la base de données... 136260 fichiers et répertoires déjà installés.)
Dépaquetage de libgeos-3.3.3 (à partir de .../libgeos-3.3.3_3.3.3-1.1_i386.deb) ...
Sélection du paquet libgeos-c1 précédemment désélectionné.
Dépaquetage de libgeos-c1 (à partir de .../libgeos-c1_3.3.3-1.1_i386.deb) ...
Sélection du paquet libpq5 précédemment désélectionné.
Dépaquetage de libpq5 (à partir de .../libpq5_9.1.14-0+deb7u1_i386.deb) ...
Sélection du paquet postgis précédemment désélectionné.
Dépaquetage de postgis (à partir de .../postgis_1.5.3-2_i386.deb) ...
Sélection du paquet postgresql-client-common précédemment désélectionné.
Dépaquetage de postgresql-client-common (à partir de .../postgresql-client-common_134wheezy4_all.deb) ...
Sélection du paquet postgresql-client-9.1 précédemment désélectionné.
Dépaquetage de postgresql-client-9.1 (à partir de .../postgresql-client-9.1_9.1.14-0+deb7u1_i386.deb) ...
Sélection du paquet ssl-cert précédemment désélectionné.
Dépaquetage de ssl-cert (à partir de .../ssl-cert_1.0.32_all.deb) ...
Sélection du paquet postgresql-common précédemment désélectionné.
Dépaquetage de postgresql-common (à partir de .../postgresql-common_134wheezy4_all.deb) ...
Ajout de « détournement de /usr/bin/pg_config en /usr/bin/pg_config.libpq-dev par postgresql-common »
Sélection du paquet postgresql-9.1 précédemment désélectionné.
Dépaquetage de postgresql-9.1 (à partir de .../postgresql-9.1_9.1.14-0+deb7u1_i386.deb) ...
Sélection du paquet proj-data précédemment désélectionné.
Dépaquetage de proj-data (à partir de .../proj-data_4.7.0-2_i386.deb) ...
Sélection du paquet libproj0 précédemment désélectionné.
Dépaquetage de libproj0 (à partir de .../libproj0_4.7.0-2_i386.deb) ...
Sélection du paquet postgresql-9.1-postgis précédemment désélectionné.
Dépaquetage de postgresql-9.1-postgis (à partir de .../postgresql-9.1-postgis_1.5.3-2_i386.deb) ...
Traitement des actions différées (« triggers ») pour « man-db »...
Paramétrage de libgeos-3.3.3 (3.3.3-1.1) ...
Paramétrage de libgeos-c1 (3.3.3-1.1) ...
Paramétrage de libpq5 (9.1.14-0+deb7u1) ...
Paramétrage de postgis (1.5.3-2) ...
Paramétrage de postgresql-client-common (134wheezy4) ...
Paramétrage de postgresql-client-9.1 (9.1.14-0+deb7u1) ...
update-alternatives: utilisation de « /usr/share/postgresql/9.1/man/man1/psql.1.gz » pour fournir « /usr/share/man/man1/psql.1.gz » (psql.1.gz) en mode automatique
Paramétrage de ssl-cert (1.0.32) ...
Paramétrage de postgresql-common (134wheezy4) ...
Ajout de l'utilisateur postgres au groupe ssl-cert
Building PostgreSQL dictionaries from installed myspell/hunspell packages...
  en_us
  fr
Paramétrage de postgresql-9.1 (9.1.14-0+deb7u1) ...
Creating new cluster (configuration: /etc/postgresql/9.1/main, data: /var/lib/postgresql/9.1/main)...
Moving configuration file /var/lib/postgresql/9.1/main/postgresql.conf to /etc/postgresql/9.1/main...
Moving configuration file /var/lib/postgresql/9.1/main/pg_hba.conf to /etc/postgresql/9.1/main...
Moving configuration file /var/lib/postgresql/9.1/main/pg_ident.conf to /etc/postgresql/9.1/main...
Configuring postgresql.conf to use port 5432...
update-alternatives: utilisation de « /usr/share/postgresql/9.1/man/man1/postmaster.1.gz » pour fournir « /usr/share/man/man1/postmaster.1.gz » (postmaster.1.gz) en mode automatique
[ ok ] Starting PostgreSQL 9.1 database server: main.
Paramétrage de proj-data (4.7.0-2) ...
Paramétrage de libproj0 (4.7.0-2) ...
Paramétrage de postgresql-9.1-postgis (1.5.3-2) ...

Par défaut, postgresql n'autorise pas les connections depuis un poste client.

Autoriser postgresql à écouter en modifiant le fichier de configuration postgresql.conf :

sudo gedit /etc/postgresql/9.1/main/postgresql.conf

Modifier la ligne contenant listen_addresses = 'localhost' par listen_addresses = '*' comme ci-dessous :

#------------------------------------------------------------------------------
# CONNECTIONS AND AUTHENTICATION
#------------------------------------------------------------------------------

# - Connection Settings -

listen_addresses = '*'      # <------- ligne modifiée
                            # what IP address(es) to listen on;
                            # comma-separated list of addresses;
                            # defaults to 'localhost', '*' = all
                            # (change requires restart)
port = 5432                 # (change requires restart)
max_connections = 100       # (change requires restart)

Autoriser le client à interroger postgresql en modifiant le fichier de configuration pg_hba.conf :

sudo gedit /etc/postgresql/9.1/main/pg_hba.conf

Ajouter l'adresse IP du client, dans notre cas 192.168.0.12, en ajoutant la ligne host all all 192.168.0.12/32 trust, comme ci-dessous :

# TYPE  DATABASE        USER            ADDRESS                 METHOD

# "local" is for Unix domain socket connections only
local   all             all                                     peer
# IPv4 local connections:
host    all             all             127.0.0.1/32            md5
# IPv6 local connections:
host    all             all             ::1/128                 md5
host    all             all             192.168.0.12/32         trust   # <----- ligne ajoutée
# Allow replication connections from localhost, by a user with the
# replication privilege.
#local   replication     postgres                                peer

Redémarrer postgresql en exécutant la ligne de commande ci-dessous :

sudo service postgresql restart

Cela affiche :

[ ok ] Restarting PostgreSQL 9.1 database server: main.

Créer la base de données

Toutes les opérations de ce chapitre sont à effectuer dans la machine virtuelle.

Afficher une invité de commande en cliquant dans le menu Activités -> Applications -> Terminal.

Créer une base de données nommée gis en exécutant la ligne de commande ci-dessous :

sudo -u postgres createdb -e gis

Cela affiche :

CREATE DATABASE gis;

Ajouter à la base de données les fonctionnalités de géolocalisation, en exécutant successivement les commandes ci-dessous :

sudo -u postgres psql -d gis -f /usr/share/postgresql/9.1/contrib/postgis-1.5/postgis.sql
sudo -u postgres psql -d gis -f /usr/share/postgresql/9.1/contrib/postgis-1.5/spatial_ref_sys.sql

Cela affiche pour la première commande :

CREATE CAST
...
CREATE FUNCTION
...
DROP FUNCTION

et pour la seconde commande :

INSERT 0 1
...
INSERT 0 1
COMMIT
ANALYZE

Importer les données osm

osm2pgsql est un logiciel libre qui permet d'importer les données osm dans PostgreSQL.

Toutes les opérations de ce chapitre sont à effectuer dans la machine virtuelle.

Installer osm2pgsql en exécutant la ligne de commande ci-dessous :

sudo aptitude -y install osm2pgsql

Cela affiche :

Les NOUVEAUX paquets suivants vont être installés :
  libprotobuf-c0{a} osm2pgsql
0 paquets mis à jour, 2 nouvellement installés, 0 à enlever et 0 non mis à jour.
Il est nécessaire de télécharger 230 ko d'archives. Après dépaquetage, 475 ko seront utilisés.
Prendre :  1 http://ftp2.de.debian.org/debian/ wheezy/main libprotobuf-c0 i386 0.14-1+b1 [37,0 kB]
Prendre :  2 http://ftp2.de.debian.org/debian/ wheezy/main osm2pgsql i386 0.80.0+r27899-4 [193 kB]
 230 ko téléchargés en 0s (488 ko/s)
Sélection du paquet libprotobuf-c0 précédemment désélectionné.
(Lecture de la base de données... 136926 fichiers et répertoires déjà installés.)
Dépaquetage de libprotobuf-c0 (à partir de .../libprotobuf-c0_0.14-1+b1_i386.deb) ...
Sélection du paquet osm2pgsql précédemment désélectionné.
Dépaquetage de osm2pgsql (à partir de .../osm2pgsql_0.80.0+r27899-4_i386.deb) ...
Traitement des actions différées (« triggers ») pour « man-db »...
Paramétrage de libprotobuf-c0 (0.14-1+b1) ...
Paramétrage de osm2pgsql (0.80.0+r27899-4) ...

Choisir les données géographiques à afficher sur la carte depuis mapzen, exemple pour Lyon, télécharger le fichier lyon_france.osm.pbf en exécutant la ligne de commande ci-dessous :

wget https://s3.amazonaws.com/metro-extracts.mapzen.com/lyon_france.osm.pbf

Cela affiche :

--2014-12-08 22:40:12--  https://s3.amazonaws.com/metro-extracts.mapzen.com/lyon_france.osm.pbf
Resolving s3.amazonaws.com... 54.231.0.160
Connecting to s3.amazonaws.com|54.231.0.160|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 87399379 (83M) [binary/octet-stream]
Saving to: “lyon_france.osm.pbf”

100%[======================================>] 87,399,379  2.18M/s   in 38s

2014-12-08 22:40:50 (2.19 MB/s) - “lyon_france.osm.pbf” saved [87399379/87399379]

Importer les données osm dans postgresql en exécutant la commande ci-dessous :

sudo -u postgres osm2pgsql --create --database gis lyon_france.osm.pbf

Cela affiche :

osm2pgsql SVN version 0.80.0 (64bit id space)

Using projection SRS 900913 (Spherical Mercator)
Setting up table: planet_osm_point
NOTICE:  la table « planet_osm_point » n'existe pas, poursuite du traitement
NOTICE:  la table « planet_osm_point_tmp » n'existe pas, poursuite du traitement
Setting up table: planet_osm_line
NOTICE:  la table « planet_osm_line » n'existe pas, poursuite du traitement
NOTICE:  la table « planet_osm_line_tmp » n'existe pas, poursuite du traitement
Setting up table: planet_osm_polygon
NOTICE:  la table « planet_osm_polygon » n'existe pas, poursuite du traitement
NOTICE:  la table « planet_osm_polygon_tmp » n'existe pas, poursuite du traitement
Setting up table: planet_osm_roads
NOTICE:  la table « planet_osm_roads » n'existe pas, poursuite du traitement
NOTICE:  la table « planet_osm_roads_tmp » n'existe pas, poursuite du traitement
Allocating memory for dense node cache
Allocating dense node cache in block sized chunks
Node-cache: cache=800MB, maxblocks=0*102401, allocation method=8192
Mid: Ram, scale=100

Reading in file: lyon_france.osm.pbf
Processing: Node(11157k 1394.7k/s) Way(1679k 60.00k/s) Relation(15210 245.32/s)  parse time: 98s

Node stats: total(11157423), max(2146519304) in 8s
Way stats: total(1679887), max(314493613) in 28s
Relation stats: total(15218), max(4222924) in 62s
Committing transaction for planet_osm_point
Committing transaction for planet_osm_line
Committing transaction for planet_osm_polygon
Committing transaction for planet_osm_roads

Writing way (1679k)
Committing transaction for planet_osm_point
Committing transaction for planet_osm_line
Committing transaction for planet_osm_polygon
Committing transaction for planet_osm_roads

Writing relation (15201)
node cache: stored: 11157423(100.00%), storage efficiency: 11.10% (dense blocks: 98124, sparse nodes: 0), hit rate: 0.00%
Sorting data and creating indexes for planet_osm_roads
Sorting data and creating indexes for planet_osm_polygon
Sorting data and creating indexes for planet_osm_line
Sorting data and creating indexes for planet_osm_point
Analyzing planet_osm_roads finished
Analyzing planet_osm_point finished
Analyzing planet_osm_line finished
Copying planet_osm_roads to cluster by geometry finished
Creating indexes on  planet_osm_roads finished
All indexes on  planet_osm_roads created  in 19s
Completed planet_osm_roads
Copying planet_osm_point to cluster by geometry finished
Analyzing planet_osm_polygon finished
Copying planet_osm_line to cluster by geometry finished
Creating indexes on  planet_osm_point finished
All indexes on  planet_osm_point created  in 78s
Completed planet_osm_point
Creating indexes on  planet_osm_line finished
All indexes on  planet_osm_line created  in 84s
Completed planet_osm_line
Copying planet_osm_polygon to cluster by geometry finished
Creating indexes on  planet_osm_polygon finished
All indexes on  planet_osm_polygon created  in 346s
Completed planet_osm_polygon

Osm2pgsql took 769s overall

Générer la carte

Pré-requis

tilemill doit être installé, ce logiciel libre permet de personnaliser visuellement les cartes.

cartocss est un langage proche du css et utilisé par tilemill pour décrire le style d'une carte.

python doit être installé, ce langage libre est utilisé par osm-bright.

osm-bright doit être téléchargé, au format zip, ce kit libre permet de créer automatiquement un projet type dans tilemill.

Pour se repérer plus facilement sur la carte lors de sa conception, il est préférable d'y intégrer une carte générale du monde, pour cela il faut télécharger les 2 fichiers ci-dessous :

Configurer tilemill

L'adresse IP de la machine virtuelle est nécessaire, à partir d'une ligne de commande depuis la machine virtuelle exécuter :

sudo ifconfig

Cela affiche par exemple :

eth0      Link encap:Ethernet  HWaddr 08:00:27:58:10:2c
          inet adr:192.168.0.33  Bcast:192.168.0.255  Masque:255.255.255.0
          adr inet6: fe80::a00:27ff:fe58:102c/64 Scope:Lien
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:614 errors:0 dropped:0 overruns:0 frame:0
          TX packets:187 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 lg file transmission:1000
          RX bytes:166364 (162.4 KiB)  TX bytes:18987 (18.5 KiB)

lo        Link encap:Boucle locale
          inet adr:127.0.0.1  Masque:255.0.0.0
          adr inet6: ::1/128 Scope:Hôte
          UP LOOPBACK RUNNING  MTU:16436  Metric:1
          RX packets:67 errors:0 dropped:0 overruns:0 frame:0
          TX packets:67 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 lg file transmission:0
          RX bytes:24469 (23.8 KiB)  TX bytes:24469 (23.8 KiB)

L'adresse IP est ici : 192.168.0.33

Décompresser osm-bright dans un répertoire.

Renommer le fichier configure.py.sample en configure.py.

Décompresser les fichiers simplified-land-polygons-complete-3857.zip et land-polygons-split-3857.zip dans un nouveau répertoire shp créé dans osm-bright.

La structure du répertoire d'osm-bright est maintenant :

│   configure.py
│   make.py
│   ...

├───build
│   ...

├───lib
│   ...

├───osm-bright
│   ...

└───shp
    ├───land-polygons-split-3857
    │       land_polygons.shp
    │       ...

    └───simplified-land-polygons-complete-3857
            simplified_land_polygons.shp
            ...

Ouvrir le fichier configure.py avec un éditeur de texte et modifier les lignes :

comme ci-dessous :

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from os import path, getcwd
from collections import defaultdict
config = defaultdict(defaultdict)

config["importer"] = "osm2pgsql" # either 'imposm' or 'osm2pgsql'

# The name given to the style. This is the name it will have in the TileMill
# project list, and a sanitized version will be used as the directory name
# in which the project is stored
config["name"] = "OSM Glicer Lyon"              # <-------- nom du projet

# The absolute path to your MapBox projects directory. You should
# not need to change this unless you have configured TileMill specially
config["path"] = path.expanduser("~/Documents/MapBox/project")

# PostGIS connection setup
# Leave empty for Mapnik defaults. The only required parameter is dbname.
config["postgis"]["host"]     = "192.168.0.33"  # <-------- adresse ip du serveur
config["postgis"]["port"]     = "5432"          # <-------- port de PostgreSQL
config["postgis"]["dbname"]   = "gis"           # <-------- nom de la base de données
config["postgis"]["user"]     = "postgres"      # <-------- nom de l'utilisateur autorisé
config["postgis"]["password"] = ""

Créer le projet dans tilemill en exécutant, depuis le répertoire d'osm-bright, la ligne de commande ci-dessous :

python make.py

Cela affiche par exemple :

installing to C:\Users\emmanuel/Documents/MapBox/project\OSMLyon

Modifier le style de la carte

Lancer tilemill, cliquer sur le nom du projet OSM Glicer Lyon, après plusieurs secondes la carte du monde apparaît.

Vous pouvez zoomer sur la zone géographique importée préalablement dans la machine virtuelle et modifier son style en modifiant les fichiers .mss dans les différents onglets à droite de l'interface. L'affichage n'est pas instantané, attendre quelques secondes entre chaque zoom ou chaque modification.

Les styles sont décris dans le langage cartocss, langage proche du css.

Cliquer sur save pour appliquer les modifications et attendre quelques secondes pour qu'elles soient appliquées visuellement.

Exporter la carte pour production

Cliquer sur Export et sélectionner MBTiles.

Zoomer sur la zone géographique que vous souhaitez exporter.

Sélectionner la zone à exporter en appuyant sur la touche shift tout en déplaçant la souris, une zone rectangulaire plus lumineuse indique la zone sélectionnée.

Cliquer au centre de la zone pour indiquer automatiquement les coordonnées utilisées pour centrer la carte en production, noter ces coordonnées indiquées sur la partie droite pour les réutiliser en production, dans notre exemple tilemill affiche 4.8482,45.7581,13 ce qui correspond à longitude : 4.841293 latitude : 45.7573082, le dernier chiffre n'est pas utilisé.

Indiquer sur la partie droite, le zoom minimal et le zoom maximal autorisés en production.

Renseigner les autres informations utiles.

Cliquer sur Export, l'exportation peut prendre plusieurs dizaines de minutes. Une fois l'exportation terminée, enregistrer le fichier.

Dans notre cas, le fichier exporté se nomme OSMGlicerLyon.mbtiles, représente le centre de Lyon et a une taille de 78 Mo.

L'extension du fichier est mbtiles mais le fichier est compatible avec le moteur de base de données sqlite.

Mise en production de la carte sur Internet

Pré-requis

un serveur http du type apache, nginx ou lighttpd doit être installé, ce sont des logiciels libres.

php doit être installé, ce langage libre est utilisé pour rendre disponible notre carte et utilise sqlite. (Si vous êtes sous windows, vous pouvez installer un package wamp qui contient apache et php.)

leaflet doit être téléchargé, cet outil libre en javascript permet d'interroger le serveur et d'afficher la carte sur le navigateur du client.

Exécution côté serveur internet

Copier le fichier OSMGlicerLyon.mbtiles exporté par tilemill sur votre serveur http.

Créer un fichier mbtiles.php dans le même répertoire que OSMGlicerLyon.mbtiles qui contiendra le code source permettant d'interroger la base de données.

Pour une connexion native à la base de données SQLite (solution plus rapide), utiliser le code ci-dessous :

<?php
    $zoom   = $_GET['z'];
    $column = $_GET['x'];
    $row    = $_GET['y'];
    $dbname = "OSMGlicerLyon.mbtiles"; //nom de la base de données

    $handle = new SQLite3($dbname);
    $data   = $handle->querySingle(
        "SELECT tile_data FROM tiles WHERE zoom_level = $zoom AND tile_column = $column AND tile_row = $row"
    );
    if (isset($data) && $data !== false) {
        header("Content-Type: image/png");
        print $data;
    }

Ou, pour une connexion utilisant PDO (solution plus flexible), utiliser le code ci-dessous :

<?php
    $zoom = $_GET['z'];
    $column = $_GET['x'];
    $row =  $_GET['y'];
    $db = "OSMGlicerLyon.mbtiles"; // nom de la base de données
    try
    {
        // Ouvre la base de données
        $conn = new PDO("sqlite:$db");

        // Interroge la base de données
        $sql = "SELECT * FROM tiles WHERE zoom_level = $zoom AND tile_column = $column AND tile_row = $row";
        $q = $conn->prepare($sql);
        $q->execute();

        $q->bindColumn(1, $zoom_level);
        $q->bindColumn(2, $tile_column);
        $q->bindColumn(3, $tile_row);
        $q->bindColumn(4, $tile_data, PDO::PARAM_LOB);

        while($q->fetch())
        {
            header("Content-Type: image/png"); //renvoi comme résultat les tuiles au format png
            echo $tile_data;
        }
    }
    catch(PDOException $e)
    {
        print 'Exception : '.$e->getMessage();
    }

Exécution côté navigateur internet

Copier les fichiers leaflet.js et leaflet.css dans leur répertoire respectif js et css du serveur http.

Créer un fichier index.html contenant le code ci-dessous :

<html>
    <head>
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <style>
            #map { height: 180px; }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script>
        var mbTiles = new L.tileLayer('mbtiles.php?z={z}&x={x}&y={y}', { //demande aux serveurs les tuiles à afficher
            tms: true,
            attribution: 'Tiles Courtesy of <a href="http://www.openstreetmap.org" target="_blank">OpenStreetMap</a>'
        });

        mymap = new L.Map('map', {          //affiche dans l'élément avec l'id map
            zoom: 18,                       //zoom par défaut
            minZoom: 13,                    //zoom minimal autorisé indiqué lors de l'exportation avec tilemill
            maxZoom: 18,                    //zoom maximal autorisé indiqué lors de l'exportation avec tilemill
            center: [45.7573082, 4.841293], //position par défaut noté lors de l'exportation avec tilemill, latitude : 45.7573082 et longitude : 4.841293
            layers: [mbTiles]
        });
    </script>
</html>

Structure finale du répertoire

js
    leaflet.js
css
    leaflet.css
mbtiles.php
OSMGlicerLyon.mbtiles
index.html

Depuis un navigateur internet, afficher la page index.html de votre serveur http, la carte créée s'affiche.

Versions des logiciels et langages utilisés


Laisser un commentaire

tmeunier - 29/05/2015 06:22

Bon article toutefois cela soulève deux critiques :
- Pourquoi travailler sur une copie des données alors qu'en utilisant le flux WMS d'openstreetmap vous seriez en permanence sur la connaissance la plus à jour du territoire et vous économiseriez du stockage et de la CPU.
- La logique de constituer sa propre base d'information est contestable : pourquoi ne pas alimenter OSM de vos données sur les lieux ?


dev_glicer - 30/05/2015 17:53

@tmeunier : merci pour ce commentaire.
Il y a plusieurs objectifs derrière cet article :
- pouvoir utiliser la carte en offline, par exemple sur un ipad qui n'a pas internet
- pouvoir totalement personnaliser l'apparence de la carte à son goût, pour par exemple se différencier des autres sites
- on aime le "Do It Yourself", et être le plus indépendant possible d'un service tiers


ayikouotou - 02/07/2015 21:47

bonjour deja merci pour votre tuto il est tres génial encor merci svp jai un seul probleme votre serveur est accessible depuis une application web je veux parler du moment ou est ecris le code HTML et le code PHP c pour interoger la base de données depuis une application web moi je code une application mobile en android a l''exemple de OSMAND et jaimerai savoir si le serveur est accessible depuis une application mobile si oui comment merci de votre reponse


dev_glicer - 03/07/2015 13:33

@ayikouotou : merci pour ce commentaire et bonne question.
Il y a peut être 3 solutions :
- Nous avons jailbreaké un ipad, installé dessus un serveur apache/php et nous interrogeons ce serveur localement, ça ne fait pas une vraie application mais ça suffit pour une utilisation perso.
- L'autre solution que nous avions étudié mais pas réalisé, est d'utiliser cordova avec un plugin sqlite pour interroger la base cartographique (.mbtiles).
- Ou, étudier le code source de Osmand puisqu'il est open.


ayikouotou - 07/07/2015 02:32

jaimerai savoir codova est utilisé à quel niveau? merci


ayikouotou - 07/07/2015 10:55

jessaie d'examiner le code de osmand deja merci pour le tuyaux assez enrichissant mais jai du mal a trouver ou il a etabli la communication avec le serveur osm si tu peux aider dans cette examination et menvoi a une ligne precise ou alors me dir kel code regarder il y en tellement


dev_glicer - 09/07/2015 15:03

Nous n'avons pas étudié le code de Osmand, on ne peut pas t'aider.