Carte simple avec MapLibre et liens CDN
L'exemple de code ci-dessous est un exemple complet de code pour afficher une carte sur une page web, en utilisant les liens CDN.
Vous pouvez simplement enregistrer ce code dans un fichier nommé index.html et l'ouvrir avec votre navigateur internet pour voir le résultat.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma carte</title>
<!-- Importation des bibliothèques MapLibre GL JS -->
<link href="https://unpkg.com/maplibre-gl@^5.2.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@^5.2.0/dist/maplibre-gl.js"></script>
<!-- Importation des bibliothèques Carte Facile -->
<link href="https://unpkg.com/carte-facile@^0.5.18/dist/carte-facile.css" rel="stylesheet" />
<script src="https://unpkg.com/carte-facile@^0.5.18/dist/carte-facile.js"></script>
<!-- Style pour afficher la carte en plein écran -->
<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>
</head>
<body>
<!-- Le conteneur de la carte -->
<div id="map"></div>
<!-- Le script qui initialise la carte -->
<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)
});
// Ajout d'un contrôle de navigation
const nav = new maplibregl.NavigationControl();
map.addControl(nav, 'top-right');
// Ajout d'une échelle
const scale = new maplibregl.ScaleControl({
maxWidth: 80,
unit: 'imperial'
});
map.addControl(scale);
// Ajouter des surcouches (dé-commenter les lignes en dessous pour ajouter ces surcouches)
//CarteFacile.addOverlay(map, 'administrativeBoundaries');
//CarteFacile.addOverlay(map, 'cadastre');
</script>
</body>
</html>