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: #65a0ba; background: radial-gradient(circle, rgba(101, 160, 186, 1) 30%, rgba(11, 47, 71, 1) 80%) }
</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
  minZoom: 1.8, // niveau de zoom minimum (optionnel)
  maxZoom: 18.9, // niveau de zoom maximum, adapté aux cartes utilisant les données IGN
  zoom: 5, // niveau de zoom inital (optionnel)
  center: [2.5, 47], // placement initial de la carte (optionnel)
});

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
        minZoom: 1.8, // niveau de zoom minimum (optionnel)
        maxZoom: 18.9, // niveau de zoom maximum, adapté aux cartes utilisant les données IGN
        zoom: 5, // niveau de zoom inital (optionnel)
        center: [2.5, 47], // placement initial de la carte (optionnel)
    });
</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 :

---

Personnalisation de la carte #

Pour ajouter des contrôles de navigation :

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

Pour ajouter une échelle :

  const scale = new maplibregl.ScaleControl({
      maxWidth: 80,
      unit: 'imperial'
  });
  map.addControl(scale);

Pour changer le style d'une carte existante :

map.setStyle(mapStyles.aerial);

Prochaine étape #

Ajouter des surcouches