Cet article est la seconde partie de ma série sur OpenStreetMap :

Dans mon précédent article, j'ai montré comment on pouvait afficher des cartes grâce aux données d'OpenStreetMap. Mais même si ça a l'avantage indéniable de permettre de se passer de Google, on doit toujours passer par un service externe.
Nous allons voir maintenant comment nous pouvons héberger nous-même nos cartes, afin de supprimer cette dépendance.

Installation du serveur de cartes

Il existe plusieurs de serveurs. Étant donné que je souhaite utiliser mes cartes en mode vectoriel, j'ai décidé d'utiliser un serveur OpenMapTiles PHP.

Il existe aussi une version du serveur en NodeJS (déployable avec Docker), ou si vous préférez rester sur la version la plus classique d'OpenStreetMap, vous pouvez aussi suivre cet article de Switch2OSM.

Pour déployer mon serveur, j'ai créé un App Service sur Azure, au niveau gratuit (il vous faudra certainement une machine plus puissante en prod), avec la stack PHP.

Ensuite, il faut installer le serveur PHP. Il suffit de récupérer la dernière version de tileserver-php sur Github, et de copier les 2 fichiers tileserver.php ainsi que le .htaccess dans l'App Service.

Mettez à jour le .htaccess pour configurer les en-têtes CORS - décommentez les lignes ci-dessous, et mettez à jour avec vos domaines autorisés :

# Option: CORS header for cross-domain origin access to all data
<ifModule mod_headers.c>
  Header set Access-Control-Allow-Origin *
</ifModule>

Vous pouvez maintenant copier les 2 fichiers tileserver.php et .htaccess dans l'App Service.
C'est bon votre serveur fonctionne, même s'il est encore un peu vide.

Téléchargement des données

En effet, maintenant que votre serveur tourne, il faut ajouter les données des cartes. Vous pouvez les télécharger sur le site d'OpenMapTiles.

Il s'agit d'un service payant qui fournit les données avec des mises à jour hebdomadaires, mais vous pouvez récupérer des données gratuitement pour des projets non-commerciaux/open-source, ou pour vos tests. Si vous ne souhaitez pas vous inscrire, vous pouvez télécharger directement la carte de Toulouse.

Mettez ce fichier .mbtiles dans le même dossier que tileserver.php, et cette fois le serveur est prêt à être utilisé.

Sélection d'un style

Jusque là, nous avons réussi à mettre en place le serveur, mais il va nous fournir uniquement les objects vectoriels pour afficher la carte, il va nous manquer le style, c'est à dire un fichier json qui va définir de quelle manière doivent s'afficher chaque type d'objet. Si vous vous souvenez de l'article précédent, c'est ce fichier là qui est référencé lors de l'initialisation de la carte avec la librairie Mapbox GL.

Nous n'allons pas rentrer dans les détails de la définition du style, nous allons nous pour le moment prendre l'un des styles existant proposés par OpenMapTiles. Histoire de changer un peu de ce dont on a l'habitude, j'ai choisi le style Positron, et je suis allé télécharger sa branche gh-pages sur Github.

Une fois téléchargé, il va falloir le modifier un peu avant qu'il ne soit utilisable.

Première chose, prenez le fichier style-cdn.json, que vous pouvez renommer en style.json, et cherchez les lignes suivantes :

"sources": {
  "openmaptiles": {
    "type": "vector",
    "url": "https://maps.tilehosting.com/data/v3.json?key=SymbVzXrAD6Jmqe6yBOS"
  }
},

Ici l'url correspond au serveur de tuiles. Il faut la remplacer par un lien vers l'API de notre serveur : https://maps-lacasa.azurewebsites.net/tileserver.php?/2017-07-03_france_toulouse.json (il s'agit du lien vers le fichier php, dont la requête prend en paramètre le nom du fichier de données, et avec l'extension json)

Ensuite, plus bas se trouve le lien vers les sprites (les 2 fichiers sprite.png et sprite.json qui sont fournis avec le thème) - remplacez le par le lien vers vos fichiers sprite, sans extension : https://maps-lacasa.azurewebsites.net/positron/sprite (ici j'ai déployé le style sur le même serveur pour des raisons pratiques, mais les styles peuvent être déployés ailleurs).

Dernier point à mettre à jour : les fonts utilisées pour l'écriture du texte. Cherchez toutes les occurences de "text-font" dans le style.json :

"text-font": [
  "Metropolis Medium Italic",
  "Noto Sans Italic"
],

Et modifiez les pour n'en garder qu'une à chaque fois (car selon la documentation, ce système d'hébergement statique ne gère pas les font alternatives). Vous pouvez choisir celle que vous préférez, ou en choisir une tout autre.

"text-font": [ "Metropolis Medium Italic" ],

Vous pouvez récupérer les fonts sur Github, dans un repo dédié, et les copier sur votre hébergement web.

Maintenant vous pouvez faire un lien vers ces fichiers dans le style.json, dans la propriété glyphs :

"glyphs": "https://maps.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=SymbVzXrAD6Jmqe6yBOS",

Que vous pouvez remplacer par le chemin vers votre dossier de fonts, dans mon cas https://maps-lacasa.azurewebsites.net/fonts/{fontstack}/{range}.pbf. fontstack et range seront appelés dynamiquement selon le nom de la font défini dans le style, et le niveau de zoom affiché.

Et cette fois on est bon, tout est en place pour afficher notre carte sans aucun appel externe ; il suffit de remplacer dans notre javascript le lien vers le style par notre nouveau style modifié.