Comment créer une carte du monde interactive avec Protomaps et un simple code JavaScript. Un outil logiciel simple vous permet de générer une carte légère et rapide pour la zone géographique qui vous intéresse.
Nous avons l’habitude d’utiliser les principaux services de cartographie en ligne fournis par des sociétés bien connues telles que Google, Microsoft, Apple, etc. Il existe également des outils ouverts tels que OpenStreetMap qui se prêtent à une grande variété d’utilisations. Protomaps est une plateforme qui fournit des outils et des services pour visualiser une carte du monde interactive.
Contrairement aux services commerciaux, les cartes de Protonmaps sont open source et peuvent même être sauvegardées localement ou sur des serveurs cloud. Il n’est plus nécessaire de s’appuyer sur des plateformes développées par des tiers pour créer et gérer des applications utilisant des cartes actualisées : la carte du monde est à la disposition de tout développeur qui souhaite l’intégrer dans n’importe quel type de plateforme web.
Qu’est-ce que Protomaps et comment fonctionne la carte du monde interactive ?
Protomaps est conçu pour offrir des cartes interactives rapides à utiliser, très légères et hautement personnalisables. Ce dernier point est précisément la caractéristique phare de Protomaps : les cartes vectorielles sont constituées de données géométriques représentant des points, des lignes et des polygones, et peuvent être mises à l’échelle sans perte de qualité. Cette approche offre une plus grande flexibilité et une plus grande interactivité que les cartes matricielles traditionnelles basées sur des images.
Le fonctionnement de Protomaps est basé sur l’utilisation de données vectorielles et d’outils de rendu avancés pour visualiser les informations géographiques. Les développeurs peuvent accéder à la plateforme Protomaps via l’API (interface de programmation d’applications) pour intégrer des cartes personnalisées dans leurs projets.
Protomaps permet de modifier l’apparence, le style et les données affichées sur les cartes pour répondre aux besoins spécifiques de chaque projet. Il est notamment possible d’ajouter des données personnalisées, de définir des styles de visualisation uniques et de gérer l’interactivité des cartes.
Qu’est-ce que les PMTiles ?
Les PMTiles (Protomaps Tiles) sont un format de fichier conçu pour stocker et distribuer des données cartographiques vectorielles. Ils constituent un moyen efficace de stocker des informations de manière compacte et sont optimisés pour la distribution en ligne. Les fichiers sont structurés de manière que les cartes puissent être visualisées rapidement et de manière interactive en divisant les données en « tuiles » d’une taille prédéfinie.
Les différentes tuiles contiennent les données vectorielles géoréférencées, ce qui permet de ne charger que les parties nécessaires de la carte lorsqu’un utilisateur visualise ou explore une zone, réduisant ainsi la quantité totale de données à télécharger et améliorant les performances globales.
Quel est le lien entre Protomaps et OpenStreetMap ?
Protomaps et OpenStreetMap sont des entités distinctes, mais il existe un lien important entre les deux plateformes. Protomaps peut en effet utiliser les données d’OpenStreetMap pour créer et visualiser des cartes personnalisées.
Les développeurs qui choisissent d’utiliser Protomaps peuvent exploiter les données d’OpenStreetMap comme base pour créer leurs propres cartes : informations sur les routes, les points d’intérêt, les limites administratives et bien plus encore. L’accès aux informations partagées par OpenStreetMap se fait via l’API et les données peuvent être immédiatement utilisées pour compléter les cartes de Protomaps.
Une carte du monde sur ses propres serveurs
Nous l’avons dit, la technologie qui sous-tend le fonctionnement de Protomaps est vraiment intelligente. Ainsi, tout utilisateur peut disposer d’une carte du monde distribuable sur un stockage en cloud sous la forme d’un seul fichier statique au format PMTiles. Excusez-moi si cela ne suffit pas. En outre, les parties de la carte qui intéressent les utilisateurs de temps à autre peuvent être livrées à l’aide de simples requêtes HTTP.
Jetez un coup d’œil aux constructions quotidiennes de Protomaps : la carte du monde la plus récente pèse un peu moins de 110 Go. Il s’agit certes d’une taille importante, mais pas si disproportionnée si l’on considère que ce seul fichier contient les informations géographiques de l’ensemble de la planète Terre, avec un niveau de détail enviable.
Création d’un fichier PMTiles léger pour la zone d’intérêt
Protomaps fournit le programme PMTiles, qui vous permet de générer une carte de la zone qui vous intéresse. Pour extraire les coordonnées à transmettre à l’application PMTiles, on peut utiliser, par exemple, bbox finder. En dessinant un rectangle sur la zone que vous souhaitez utiliser, vous obtenez les coordonnées des deux extrémités du rectangle dessiné sur la carte dans la barre d’adresse.
Sur la page de téléchargement, PMTitles peut être téléchargé en versions pour Windows, Linux et MacOs, pour les plateformes x86 et ARM. La commande suivante génère un fichier PMTitles de la zone passée en utilisant les coordonnées extraites de bbox finder :
pmtiles extract https://build.protomaps.com/20231101.pmtiles mappa.pmtiles –bbox=9.613037,42.293564,12.524414,44.512176
Dans cet exemple, le fichier de la carte du monde publiée le 1er novembre 2023 est utilisé comme base pour générer un fichier PMTiles contenant les données géographiques de la région de Toscane et de ses environs. L’ensemble de la procédure ne prend que quelques minutes, y compris le téléchargement du fichier PMTiles résultant (environ 350 Mo pour la zone indiquée). Le fichier généré s’appelle map.pmtiles.
Par défaut, la carte PMTiles va du niveau 5 au niveau 1 (le niveau le plus bas). Cela signifie que la carte ainsi générée peut être agrandie jusqu’au niveau de la rue. Il suffit de dire que la carte du monde bloquée au niveau 5 (le plus général et le moins détaillé) ne pèse que 16 Mo (notez l’utilisation de l’option –maxzoom=5) :
pmtiles extract https://build.protomaps.com/20231101.pmtiles mondo.pmtiles –maxzoom=5
Comment explorer la carte générée
Protomaps intègre également une application web utile pour explorer la carte générée et vérifier son fonctionnement. Le fichier PMTiles peut être téléchargé sur un serveur en nuage, hébergé sur un service de stockage S3 ou compatible, ou même téléchargé manuellement. Pour le tester, il suffit de visiter PMTiles Viewer, d’indiquer une URL distante ou un fichier local.
En cliquant sur l’onglet Métadonnées, il est possible de vérifier que la zone couverte par PMTiles correspond exactement à la zone identifiée par le bbox finder.
Simon Willison, dans son billet intitulé Serving a custom vector web map using PMTiles and maplibre-gl, explique comment créer une page web contenant une version interactive de la carte Protomaps.
Le développeur a utilisé Vite comme bundler sans framework spécifique et MapLibre GL, une bibliothèque JavaScript pour la visualisation de cartes interactives, elle-même basée sur mapbox-gl-js. MapLibre GL offre une large gamme d’outils pour la visualisation de cartes personnalisées, prenant en charge des fonctionnalités telles que le zoom, la personnalisation du style de la carte, l’ajout de marqueurs, la gestion des interactions avec l’utilisateur et bien plus encore. En utilisant npm, il est possible d’installer MapLibre GL, PMTiles, les différentes dépendances et les styles prédéfinis pour les cartes Protomaps.
Le code JavaScript importe d’abord le code nécessaire, puis met en place un gestionnaire de protocole pmtiles qui permet à MapLibre GL de charger le format de carte vectorielle PMTiles. Ensuite, on configure un objet myMap avec les différentes configurations, on spécifie le conteneur dans lequel afficher la carte, on définit les sources et les styles de la carte en utilisant PMTiles et les thèmes fournis par Protomaps. Enfin, la limite maximale de la carte est fixée et le zoom et l’affichage de la zone définie dans le fichier PMTiles sont ajustés.