Dans un 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.

Démarrage du serveur de cartes

Il existe plusieurs façon d'héberger nos cartes. Vous pouvez déployer un clone du site OpenStreetMap lui même, en suivant cet article de Switch2OSM.

De mon côté, je préfère avoir un rendu vectoriel de mes cartes, j'ai donc préféré utiliser un serveur TileServer GL - qui a de plus l'avantage de pouvoir être déployé très simplement, grâce à une image Docker.
D'autres logiciels serveurs existent, une liste est disponible sur le wiki d'Openstreetmap

Ouvrez un terminal Powershell, aller dans un dossier vide (dans lequel les données de cartographie seront stockées), et tapez la commande suivante :

docker run --rm -it -v ($pwd.Path+":/data") -p 8080:80 maptiler/tileserver-gl

Le serveur démarre, et vous pouvez y accéder directement sur http://localhost:8080

Pour le moment, nous n'avons pas récupérées les données cartographiques d'OpenStreetMap, le serveur a donc du télécharger des données d'exemple. Si vous jetez un œil dans le répertoire de travail, il devrait donc y avoir un fichier zurich_switzerland.mbtiles, qui vous permets de visualiser la carte de la ville de Zurich.

Déploiement dans Azure

Pour mettre ça en ligne, j'ai créé un App Service sur Azure, dans lequel j'ai déployé l'image Docker.
Vous pouvez bien sûr déployer ça où vous voulez, tant que vous avez accès à du Docker ou du NodeJS. Je vous laisse vous adapter, l'important est de pouvoir écrire dans le répertoire data.

Pour que ça puisse démarrer, j'ai du modifier quelques options dans la configuration de l'App Service :

  • L'application démarre en interne sur le port 80, ce qui est bloqué pour raisons de sécurité. On va démarrer à la place sur le port 8080, en ajoutant en "commande de démarage" : -p 8080.
    Il faut aussi ajouter une variable d'environnement WEBSITES_PORT, avec la valeur 8080, pour qu'Azure sache où chercher notre site.

    • UPDATE (29 novembre 2022) : dans la dernière version de tileserver-gl, le port utilisé est maintenant 8080 par défaut

  • On va aussi avoir besoin d'un endroit pour stocker le fichier mbtiles. Commencez par créer un compte de stockage, et à l'intérieur ajouter un nouveau Partage de fichier.
    Revenez ensuite dans la Configuration de l'App Service, et dans Mappages de chemin d'accès, ajoutez le Partage de fichier que vous venez de créer, avec le chemin de montage /data

  • Et tant que vous êtes dans l'interface, pous pouvez aller dans la section CORS pour définir les domaines autorisés à utiliser votre serveur de carte

Téléchargement des données

En effet, maintenant que votre serveur tourne, il faut ajouter les données des cartes. Le format utilisé ici, avec les fichiers mbtiles, n'est pas le format natif d'OpenStreetMap. Vous pouvez télécharger les données converties 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 répertoire /data, et redémarrez : maintenant le serveur est prêt, et devrait afficher votre carte.

Sélection d'un style

Nous avons pu démarrer notre serveur, qui nous permets déjà d'afficher une carte, avec un style par défaut "Basic preview". Sur la page d'accueil, vous pouvez voir un lien noté "GL Styles", qui pointe vers un fichier Json. 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. Vous pouvez utiliser directement ce style, mais on peut aussi en ajouter d'autres.

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, vous pouvez 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-local.json, et cherchez les lignes suivantes :

"openmaptiles": {
  "type": "vector",
  "url": "mbtiles://{v3}"
}

Ici l'url correspond au fichier de données associé. Il faut la remplacer par le nom de notre fichier, mettez donc "url": "mbtiles://2017-07-03_france_toulouse.mbtiles"

Ensuite, il faut installer les polices utilisées pour l'affichage des textes sur la carte. Vous pouvez récupérer les fonts sur Github.

Maintenant que vous avez récupéré tout ce dont vous avez besoin, uploadez tout ça dans le dossier /data de votre serveur, les fonts dans un sous-dosser fonts, et tout les fichiers du style dans son sous-dossier styles/positron-gl.

Dernier point, on va devoir ajouter un fichier de configuration pour faire connaitre toutes ces informations à tileserver. Créez un fichier config.json avec le contenu suivant :

{
  "options": {
    "paths": {
      "root": "",
      "fonts": "fonts",
      "styles": "styles",
      "mbtiles": ""
    }
  },
  "styles": {
    "positron-gl": {
      "style": "positron-gl/style-local.json",
      "serve_rendered":false
    }
  },
  "data": {
    "toulouse": {
      "mbtiles": "2017-07-03_france_toulouse.mbtiles"
    }
  }
}

Ajoutez ce fichier dans /data et redémarrer une nouvelle fois le serveur. Cette fois on est bon, vous pouvez récupérer l'url du fichier "GL Style" et l'utiliser pour afficher vos cartes :

Si vous souhaitez aller plus vite dans l'installation de différents styles sur le serveur, j'ai partagé sur Github une configuration avec les différents styles et les fonts ; vous pouvez copier les fichiers directement dans votre répertoire /data, il vous faudra juste mettre à jour le fichier mbtiles et ses références.