🗺️ Mettre en place MapLibre avec notre API de basemap vectorielles

Dans ce tutoriel, vous allez apprendre à configurer MapLibre avec notre API de basemap vectorielles.

HTML

📝 HTML

Pour intégrer MapLibre à votre page, ajoutez le code suivant à votre fichier HTML :

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

<div id="map" style="height: 300px; width: 100%;"></div>

JavaScript

💻 JavaScript

Ensuite, ajoutez le code suivant à votre fichier JavaScript pour mettre en place la carte :

var map = new window.maplibregl.Map({
    container: 'map',
    style: 'https://cartopixel.com/styles/default/style.json',
    center: [-2.33, 48.3],
    zoom: 5
});