Dans votre html, ajoutez un conteneur pour votre carte :

<!-- Conteneur HTML qui accueillera la carte -->
<div id="map"></div>
<!-- Style CSS pour que la carte occupe tout l'espace disponible et avoir une couleur de fond. -->
<style>
    html,body, #map { height:100%; width: 100%; margin:0 }
    #map { background: #000120; }
</style>

Cas 1 : avec une installation via npm #

Dans votre fichier javascript, initialisez la carte avec :

// Importations nécessaires pour la carte
import { mapStyles } from 'carte-facile';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import 'carte-facile/carte-facile.css';

// Création la carte
let map = new maplibregl.Map({
  container: 'map', // id du conteneur de la carte
  style: mapStyles.simple, // style de carte
  maxZoom: 18.9, // niveau de zoom maximum, adapté aux cartes utilisant les données IGN
});

Cas 2 : avec une installation via liens CDN #

Ajoutez dans votre html :

<script>
    // Création la carte
    let map = new maplibregl.Map({
        container: 'map', // id du conteneur de la carte
        style: CarteFacile.mapStyles.simple, // style de carte
        maxZoom: 18.9, // niveau de zoom maximum, adapté aux cartes utilisant les données IGN
    });
</script>

Un exemple de code prêt à l'emploi est disponible ici : Carte simple

🗺️ Félicitations, vous avez maintenant une carte fonctionnelle ! 🗺️

Styles de carte disponibles #

CarteFacile propose plusieurs styles prédéfinis :

Pour afficher tous les styles disponibles, servez-vous de l’autocomplétion de votre IDE avec mapStyles., ou utilisez la méthode suivante pour afficher la liste dans la console du navigateur :

import { mapStyles } from 'carte-facile';

console.log(mapStyles);

Si vous utilisez les liens CDN :

console.log(CarteFacile.mapStyles);

---

Personnalisation de la carte #

Pour ajouter des contrôles de navigation :

  const nav = new maplibregl.NavigationControl();
  map.addControl(nav, 'top-right');

Pour changer le style d'une carte existante :

map.setStyle(mapStyles.aerial);

Prochaine étape #

Ajouter des surcouches