Blog de Philippe Poisse

Étiquette : cartographie

  • Débuter avec MapLibre et MapTiler

    Le monde du WebMapping évolue, et, clairement, il n’y a pas que Leaflet dans la vie. Aujourd’hui, on va donc parler de tuiles vectorielles, de MapLibre et de MapTiler.
    En avant pour un petit tuto !

    La carte

    Objectif

    Depuis quelques années, il est possible d’utiliser des tuiles vectorielles pour les fonds de carte. Ce type de tuile permet notamment aux développeurs de personnaliser le style des cartes. Il est aussi possible d’auto-héberger les fichiers de styles, généralement au format JSON.

    Pour les débutants, le mieux est de commencer avec des fournisseurs en ligne, comme MapTiler.

    L’objectif ici sera simplement d’afficher une carte, avec un fond de carte utilisant des tuiles vectorielles. La gestion des données viendra un peu plus tard.

    MapLibre sert à afficher la carte. MapTiler fournit ici les ressources cartographiques.

    Le code

    Code pour le CDN

    <script src="https://unpkg.com/maplibre-gl@^5.24.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@^5.24.0/dist/maplibre-gl.css" rel="stylesheet" />

    Le code HTML

    <div id="map"></div>

    Le code CSS

    #map {
	display: block;
	width: 500px;
	height: 500px;
	border: solid 1px black;
}

    Le code JavaScript

        var map = new maplibregl.Map({
	container: 'map', // container id
	style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=####', //style MapTiler
	center: [2.895556, 42.698611], // starting position [lng, lat]
	zoom: 10 // starting zoom
    });

    Explication

    Le code est assez trivial. Les habitués de Leaflet n’auront aucun mal à le comprendre.

    D’abord, il fait créer une variable qui permettra d’instancier l’objet MapLibre.
    Le container correspond à la div qui accueille la carte. Son identifiant est utilisé ici.
    Le style permet de gérer le fond de carte. Ici j’utilise un fond fourni par MapTiler. Pour cela, il faut créer un compte sur le site de MapTiler et récupérer une clé API. La clé doit être passée à la fin de l’URL (les ####).
    Le center correspond aux coordonnées du centre de la carte. Il faudra évidemment les choisir en fonction de vos besoins. On verra dans d’autres tutoriels comment automatiser cette tâche.
    Le zoom définit, comme son nom l’indique, le niveau de zoom au chargement de la carte. Les valeurs vont de 0 (le monde entier) à 22 (quelques pâtés de maisons).

    Vous avez à présent le code nécessaire pour une première carte toute simple. Il ne reste plus qu’à la décorer et à la rendre interactive.
    La suite dans un prochain tutoriel.

    Liens