Dans l'article précédent je vous ai montré comment il était possible d'héberger son propre serveur de carte, et donc de ne plus être dépendant de services externes pour afficher des cartes sur un site web. À un détail près, puisque même si on peut être autonome avec le serveur, il fallait quand même passer par un service payant pour pouvoir récupérer et mettre à jour les données cartographiques. Nous allons voir maintenant comment faire ça nous même.

Pourquoi les données cartographiques sont-elles payantes ?

On peut légitimement se poser cette question : puisque les données cartographiques viennent d'OpenStreetMap, leur usage est censé être libre - dans ce cas, pourquoi le téléchargement des données pour le serveur de tuile est-il payant ?

La réponse est toute simple : parce que les données OpenStreetMap ne peuvent pas être utilisées directement, et nécessitent donc une phase de conversion.

Il est tout à fait possible d'héberger une copie du site OpenStreetMap, avec son serveur de tuiles «images», et donc d'utiliser directement les données existantes. J'ai déjà mentionné le site Switch2OSM si le sujet vous intéresse.

Mais le rendu de ces tuiles images se fait vieillot, et je préfère proposer un affichage vectoriel, qui n'a que des avantages, maintenant que c'est supporté correctement sur tous les appareils un peu récents : format plus léger, zooms et déplacements plus fluides.

Nous allons donc voir comment effectuer la conversion des données natives OpenStreetMap vers un format vectoriel.

Le format OpenMapTiles

Les équipes de MapTiler, le service qui propose de télécharger les données cartographiques, sont à l'origine du format de tuiles verctorielles OpenMapTiles, distribué sous licence libre et gratuit à utiliser.
C'est ce format que j'ai utilisé dans mes articles précédent lorsque je parlais de tuiles vectorielles.

Étant donné que le format est libre, nous avons donc pu avoir différentes initiatives pour proposer des serveurs compatibles, ainsi que des projets pour convertir les données OpenStreetMap vers ce format. Nous pouvons citer en vrac (liste non exhaustive) : Openmaptiles-tools, Tilerator, Tilemaker, ou Planetiler

C'est ce dernier projet que j'ai décidé d'utiliser et que je vais vous présenter

Génération d'un fichier mbtiles avec Planetiler

Après avoir essayé différents outils pour générer mes données cartographiques vectorielles, j'ai décidé d'utiliser Planetiler car il est le plus simple à utiliser : il suffit d'une ligne de commande pour obtenir un fichier de mbtiles, qu'il ne nous reste plus qu'à envoyer sur notre serveur.

Tout d'abord, il faut savoir quelle zone on veut convertir. Vous pouvez vous contenter d'une région ou d'un pays, mais si vous souhaitez la planète entière il vous faudra beaucoup de mémoire RAM, et quelques heures à attendre.

Les données par région sont fournies par le site Geofabrik, et seront téléchargées automatiquement par l'outil. De mon côté, je me contente de la carte de France (métropole + corse)

Pour lancer la conversion, 2 options.

Utilisation de l'outil Java :

wget https://github.com/onthegomap/planetiler/releases/latest/download/planetiler.jar
java -Xmx32g -jar planetiler.jar --download --area=france

Avec l'image Docker:

docker run -e JAVA_TOOL_OPTIONS="-Xmx32g" -v C:\data:/data ghcr.io/onthegomap/planetiler:latest --download --area=france

Ces lignes de commande viennent du REAMDE de l'outil, que j'ai très légèrement adaptées :

• l'option Java -Xmx32g représente la mémoire utilisable par l'outil. Elle est limitée à 1Go dans leur exemple, suffisant pour la principauté de Monaco, mais limite pour la France
• et j'ai remplacé la variable shell $(pwd) par un chemin en dur, car je le fait tourner sous Windows et que la syntaxe Powershell n'est pas exactement la même (j'avoue que je n'ai pas cherché comment l'écrire plus proprement)

Après trois quarts d'heure à mouliner sur mon PC, j'ai enfin obtenu ma carte, que j'ai pu mettre sur mon serveur de tuiles.

Si vous souhaitez convertir la planète entière, il vous faudra idéalement plus de 100Go de RAM, et de nombreux cœurs dans votre processeur. Vous pouvez lire une documentation spécifique dans laquelle je ne rentrerai pas en détail.
Personnellement, je n'ai même pas essayé de lancer ça sur mon PC, il faudra certainement préférer utiliser des machines virtuelles cloud pour ça. Pour exemple, la conversion complète de la planète a été effectuée en un peu plus de 3h sur une machine avec 16 cœurs et 128Go de ram.

Avec ce 3ème article, vous avez maintenant tout le nécessaire pour héberger vos cartes et les mettre à jour régulièrement, et j'espère vous avoir convaincu de le faire !

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.

Une décision de la CNIL a fait grand bruit hier dans les communautés d'informaticiens, puisqu'elle estime maintenant que l'utilisation de Google Analytics est illégale en Europe. En effet, lorsque un site web intègre ce service, Google récupère et analyse les données personnelles des visiteurs, sans aucun respect pour le RGPD.

Cette décision me donne l'occasion de reparler d'un sujet qui me tient à cœur : l'utilisation de services décentralisés et respectueux des utilisateurs.
La CNIL propose plusieurs solutions de mesure d'audience, je vous propose aujourd'hui de voir comment installer et configurer l'une d'entre elles : Matomo.

Installation de Matomo

Matomo est un outil de mesure d'audience open-source. Si vous ne souhaitez pas vous embêter avec la partie technique, vous pouvez directement vous inscrire sur le service Matomo Cloud, et passer directement à la partie "Conformité RGPD" plus bas.

De mon côté, je préfère utiliser la version on-premise, nous allons donc voir ça ensemble.
Pour installer Matomo, il faut un hébergement PHP avec une base de données MySQL. Si vous n'avez pas déjà ça sous la main, un hébergement de ce type commence à 2,99€ HT par mois chez OVH.

Commencez par télécharger Matomo, et vous aurez un fichier zip qu'il vous suffira de décompresser et d'envoyer par FTP sur votre hébergement.

Il vous suffit ensuite d'aller sur le site, et suivre les différentes étapes pour configurer l'accès à la base de données et ajouter votre premier site. Je ne vais pas rentrer dans les détails ici, il n'y a rien de compliqué - la documentation d'installation se trouve par là.

Configuration dans Clever Cloud

Update: Si vous souhaitez déployer Matomo dans Clever Cloud, c'est maintenant géré nativement. Choisissez simplement l'add-on Matomo Analytics et laissez vous guider.

Comme pour mon blog, j'ai décidé d'installer mon instance chez Clever Cloud, et nous allons vois ensemble comment optimiser notre déploiement sur ce cloud.

On va profiter de la configuration automatique de la base de données par des variables d'environnement. Pour ce faire, récupérer ce plugin EnvironmentVariablesCleverCloud, et dézippez son contenu dans le dossier /plugins de votre installation Matomo. Puis depuis l'interface d'administration, allez dans "Système" -> "Composants" pour l'activer.
Dès que c'est fait, Matomo récupèrera sa configuration MySQL directement depuis l'environnement Clever Cloud, ce qui sera utile si vous souhaitez plus tard prendre une instance plus grande.

Dernier point : le nombre de connexion simultanées à la base de données est limité, et si vous avez plusieurs utilisateurs en même temps, vous aurez des erreurs. Pour éviter ça, on va activer ProxySQL, qui va gérer un pool de connexions à la base de données, et s'assurer de ne pas dépasser les limites. Il suffit d'ajouter 2 variables d'environnement :

CC_ENABLE_MYSQL_PROXYSQL=true
CC_MYSQL_PROXYSQL_MAX_CONNECTIONS=10

La première pour activer ProxySQL, la seconde pour définir le nombre de connection maximum à ouvrir : mettez la valeur maximale autorisée par l'instance MySQL que vous avez choisie (ou un peu moins si vous souhaitez vous connecter directement à la base).

Conformité RGPD

Le fait d'utiliser Matomo ne suffit pas à lui seul à respecter le RGPD. Par contre, configuré correctement, vous pourrez l'ajouter à vos sites web sans avoir besoin d'ajouter un de ces horribles bandeau de consentement.

La CNIL décrit en détail comment faire dans son Guide de configuration Matomo Analytics, que je vous conseille de lire ; nous allons voir rapidement les principaux points ensemble :

• Désactiver les exports de données :
  dans l'administration, section "Système" -> "Paramètres généraux", cochez la cas «Désactiver le journal des visites et le profil du visiteur»
• Proposer un opt-out :
  il faut permettre aux visiteur de refuser le tracking, en ajoutant une iframe vers une url spéciale de Matomo :
  https://stats.monsite.com/index.php?module=CoreAdminHome&action=optOut

Le document de la CNIL propose aussi plusieurs points à vérifier, si vous n'avez pas touché aux paramètres par défaut de Matomo, ils sont déjà préconfigurés correctement.

Une fois que vous avez fait tout ça, il ne vous reste plus qu'à supprimer les scripts de Google Analytics, et vous pourrez enfin dire fièrement à vos utilisateurs que le respect de leur vie privée est une priorité.
Profitez-en aussi pour vérifier les autres dépendances à des services externes que vous pourriez avoir sur votre site. L'extension Kimetrak pour navigateurs peut vous aider à faire le point.
Je pense notamment à des Google Fonts que vous pourriez héberger sur vos serveurs plutôt que de pointer directement sur ceux de Google. Vous pouvez aussi remplacer l'affichage des cartes Google Maps par celles d'OpenStreetMap.