GeoLeaf JS — User Guide

Version produit : GeoLeaf Platform V2

Version : 2.0.0

Dernière mise à jour : mars 2026

Public cible : Développeurs intégrant GeoLeaf dans leurs applications

Convention de versioning : Platform V2 est le label produit ; le SemVer technique des packages/releases est en 2.0.x. Voir VERSIONING_POLICY.md.

Ce guide couvre toutes les fonctionnalités de GeoLeaf JS, de l'utilisation basique aux configurations avancées.

---

Table of Contents

1. Introduction & Overview
2. Installation
3. Quick Start
4. Understanding Profiles
5. Configuration Basics
6. Working with Maps
7. UI Components
   • 7.6 Responsive & Mobile Interface
8. Advanced Topics
9. Troubleshooting
10. Next Steps

---

1. Introduction & Overview

What is GeoLeaf?

GeoLeaf JS est une bibliothèque TypeScript de cartographie interactive construite sur MapLibre GL JS v5 (rendu WebGL, tuiles vectorielles natives). Elle offre une API haut-niveau pour gérer les POIs (Points d'Intérêt), les couches GeoJSON, les thèmes, les filtres et les intégrations de plugins — entièrement configurable via des profils JSON sans développement spécifique côté applicatif.

Key Features

• Multi-Profile System — Profils préconfigurés pour le Tourisme et cas d'usage personnalisés
• POI Management — Ajout, mise à jour, suppression, recherche de POIs avec métadonnées riches
• Theme System — Thèmes clair/sombre avec présets de visibilité de couches personnalisables
• GeoJSON Support — Affichage de polygones, lignes et données géographiques complexes
• WebGL Rendering — Rendu GPU via MapLibre GL JS v5 pour les performances
• Offline Cache (Plugin Premium) — Cache IndexedDB pour la fonctionnalité hors-ligne
• Label System — Labels dynamiques avec visibilité basée sur le zoom
• Advanced Filters — Filtrage multi-critères avec taxonomies et catégories
• Data Table — Vue tableau intégrée pour les données POI
• Security — Protection XSS via les helpers DOM sécurisés

When to Use GeoLeaf

Cas d'usage appropriés :

• Applications de cartographie touristique (attractions, hôtels, restaurants)
• Applications immobilières
• Gestion de lieux événementiels
• Portails géographiques avec configuration JSON

Non recommandé pour :

• Tracking GPS temps-réel avec mises à jour sub-seconde
• Visualisation de terrain 3D ou simulateurs de vol
• Applications nécessitant 10 000+ marqueurs simultanés

Browser Support

Navigateur	Version minimum
Chrome/Edge	90+
Firefox	88+
Safari	14+
Mobile Safari	iOS 14+
Chrome Android	90+

JavaScript requis : ES2022+ (async/await, Promises, ESM modules)

MapLibre GL JS v5 nécessite le support WebGL 2.0 (disponible dans tous les navigateurs modernes).

---

2. Installation

Option A : NPM (recommandé pour la production)

npm install @geoleaf/core maplibre-gl

import { Core } from "@geoleaf/core";
import "maplibre-gl/dist/maplibre-gl.css";
import "@geoleaf/core/dist/geoleaf-main.min.css";

Core.init({
    mapId: "map",
    center: [2.3522, 48.8566], // [longitude, latitude]
    zoom: 12,
});

Peer dependency : maplibre-gl ^5.0.0 doit être installé séparément.

Option B : CDN (démarrage rapide)

GeoLeaf v2 distribue exclusivement en ESM. Utiliser <script type="module"> :

<!-- MapLibre GL JS (peer dependency) -->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" />

<!-- GeoLeaf styles -->
<link rel="stylesheet" href="https://unpkg.com/@geoleaf/core@2.0.0/dist/geoleaf-main.min.css" />

Avant </body> :

<script type="module">
    import { Core } from "https://unpkg.com/@geoleaf/core@2.0.0/dist/geoleaf.esm.js";
    Core.init({ mapId: "map", center: [2.3522, 48.8566], zoom: 12 });
</script>

Ou via jsDelivr :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5/dist/maplibre-gl.css" />
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@geoleaf/core@2.0.0/dist/geoleaf-main.min.css"
/>

<script type="module">
    import { Core } from "https://cdn.jsdelivr.net/npm/@geoleaf/core@2.0.0/dist/geoleaf.esm.js";
    Core.init({ mapId: "map", center: [2.3522, 48.8566], zoom: 12 });
</script>

Option C : Auto-hébergé

Télécharger depuis les releases et héberger sur votre serveur :

<link rel="stylesheet" href="/assets/geoleaf/geoleaf-main.min.css" />
<script type="module">
    import { Core } from "/assets/geoleaf/geoleaf.esm.js";
    Core.init({ mapId: "map", center: [2.3522, 48.8566], zoom: 12 });
</script>

Vérifier l'installation

Ouvrir la console du navigateur :

console.log(GeoLeaf.version);
// Should output: "2.0.0"

---

3. Quick Start

Exemple minimal

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" />
        <link
            rel="stylesheet"
            href="https://unpkg.com/@geoleaf/core@2.0.0/dist/geoleaf-main.min.css"
        />

        <style>
            #map {
                width: 100%;
                height: 600px;
            }
        </style>
    </head>

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

        <script type="module">
            import { Core } from "https://unpkg.com/@geoleaf/core@2.0.0/dist/geoleaf.esm.js";

            const map = GeoLeaf.init({
                map: { target: "map", center: [2.2, 46.2], zoom: 6 },
            });

            GeoLeaf.POI.add({
                id: "paris",
                lnglat: [2.3522, 48.8566], // [longitude, latitude]
                title: "Paris",
                description: "Capitale de la France",
            });
        </script>
    </body>
</html>

Attention aux coordonnées : MapLibre GL JS utilise la convention [longitude, latitude] (ordre GeoJSON).

Tutoriel pas à pas

See GETTING_STARTED.md for a detailed 5-minute tutorial.

---

4. Understanding Profiles

What Are Profiles?

Les profils sont des configurations prédéfinies qui définissent :

• UI layout (layer manager, filter panel, cache controls)
• Basemaps (fonds de carte disponibles — styles MapLibre GL JS)
• POI configuration (catégories, icônes, recherche)
• File paths (où charger les données JSON)
• Taxonomy (hiérarchie de catégories et icônes)
• Default settings (zoom, centre, thème initiaux)

Profils intégrés

4.1 Profil Tourism

Objectif : Attractions touristiques, hôtels, restaurants, événements

Fonctionnalités :

• 35+ couches préconfigurées (climat, zones de conservation, villes, itinéraires)
• Taxonomie riche avec 50+ catégories (musées, monuments, hôtels, restaurants)
• Sprites d'icônes optimisés pour le tourisme
• Recherche par nom d'attraction, ville ou catégorie

Configuration : profiles/tourism/geoleaf.config.json

4.2 Profils Personnalisés

Vous pouvez créer des profils pour tout domaine métier. Voir PROFILES_GUIDE.md.

Switching Profiles

À l'initialisation

const map = GeoLeaf.init({
    map: { target: "map", center: [2.3, 48.8], zoom: 10 },
    data: {
        activeProfile: "tourism",
        profilesBasePath: "/profiles/",
    },
});

Charger un profil via URL

await GeoLeaf.loadConfig("/profiles/tourism/geoleaf.config.json");

Note : Le chargement d'un nouveau profil recharge toute la configuration et efface les POIs courants.

---

5. Configuration Basics

5.1 Fichier de Configuration Principal

Le point d'entrée est geoleaf.config.json :

{
    "debug": {
        "enabled": false,
        "modules": ["config", "poi", "storage"]
    },
    "data": {
        "activeProfile": "tourism",
        "profilesBasePath": "/profiles/"
    }
}

Champs clés :

• debug.enabled — Active le logging console détaillé
• debug.modules — Modules à déboguer (ou ["*"] pour tous)
• data.activeProfile — Profil à charger
• data.profilesBasePath — Chemin de base vers les répertoires de profils

5.2 Fichier de Configuration de Profil

Chaque profil possède un profile.json :

{
    "name": "Tourism",
    "version": "1.0",
    "ui": {
        "layerManager": { "enabled": true, "position": "topright" },
        "filterPanel": { "enabled": true, "position": "topleft" },
        "searchBar": { "enabled": true, "position": "topleft" },
        "cacheControls": { "enabled": true, "position": "bottomleft" }
    },
    "basemaps": [
        {
            "id": "osm",
            "name": "Street Map",
            "style": "https://tiles.openfreemap.org/styles/liberty",
            "default": true
        }
    ],
    "Files": {
        "taxonomy": "taxonomy.json",
        "themes": "themes.json",
        "layers": "layers/",
        "poi": "data/poi.json"
    },
    "poiAddConfig": {
        "categories": ["restaurant", "hotel", "museum"],
        "defaultCategory": "restaurant",
        "requiredFields": ["title", "lnglat"]
    },
    "defaultSettings": {
        "map": {
            "center": [2.3522, 48.8566],
            "zoom": 12,
            "minZoom": 5,
            "maxZoom": 18
        },
        "theme": "light"
    }
}

Note v2.0.0 : Les basemaps utilisent désormais le champ style (URL vers un style MapLibre GL JS) plutôt qu'un template d'URL de tuiles XYZ.

5.3 Configuration de Taxonomie

Définit les catégories, sous-catégories et icônes dans taxonomy.json :

{
    "icons": {
        "sprite": "assets/icons/tourism-sprite.png",
        "iconSize": [32, 32],
        "iconAnchor": [16, 32]
    },
    "categories": [
        {
            "id": "accommodation",
            "name": "Hébergement",
            "icon": "bed",
            "subcategories": [
                { "id": "hotel", "name": "Hôtel", "icon": "hotel" },
                { "id": "hostel", "name": "Auberge", "icon": "hostel" },
                { "id": "camping", "name": "Camping", "icon": "camping" }
            ]
        },
        {
            "id": "food",
            "name": "Restauration",
            "icon": "restaurant",
            "subcategories": [
                { "id": "restaurant", "name": "Restaurant", "icon": "restaurant" },
                { "id": "cafe", "name": "Café", "icon": "cafe" },
                { "id": "bar", "name": "Bar", "icon": "bar" }
            ]
        }
    ]
}

5.4 Configuration des Thèmes

Définit les présets de visibilité de couches dans themes.json :

{
    "config": {
        "defaultTheme": "default",
        "allowCustomThemes": true
    },
    "themes": [
        {
            "id": "default",
            "name": "Vue par Défaut",
            "type": "primary",
            "layers": {
                "climate": true,
                "cities": true,
                "poi": true,
                "conservation-zones": false
            }
        },
        {
            "id": "heritage",
            "name": "Sites Patrimoniaux",
            "type": "secondary",
            "layers": {
                "monuments": true,
                "conservation-zones": true,
                "museums": true,
                "cities": false
            }
        }
    ]
}

5.5 Configuration des Styles de Couches

Chaque couche peut avoir plusieurs styles dans layers/<layer-name>/styles/<style-id>.json :

{
    "id": "default",
    "description": "Default style for climate layer",
    "label": {
        "enabled": true,
        "visibleByDefault": false
    },
    "layerScale": {
        "minZoom": 5,
        "maxZoom": 18
    },
    "labelScale": {
        "minZoom": 10,
        "maxZoom": 18
    },
    "style": {
        "fillColor": "#3388ff",
        "fillOpacity": 0.2,
        "color": "#3388ff",
        "weight": 2
    },
    "legend": {
        "enabled": true,
        "items": [
            { "label": "Temperate", "color": "#3388ff" },
            { "label": "Mediterranean", "color": "#ff8833" }
        ]
    }
}

Champs clés :

• label.enabled — Si les labels sont supportés pour cette couche
• label.visibleByDefault — État initial de visibilité des labels
• layerScale — Plage de zoom pour la visibilité de la couche
• labelScale — Plage de zoom pour la visibilité des labels (généralement plus étroite)
• style — Options de style pour la couche
• legend — Configuration de la légende

---

6. Working with Maps

6.1 POI Management

Ajout de POIs

v2.0.0 : Les coordonnées suivent la convention MapLibre GL JS : lnglat: [longitude, latitude].

// Add single POI
GeoLeaf.POI.add({
    id: "eiffel-tower",
    lnglat: [2.2945, 48.8584], // [longitude, latitude]
    title: "Eiffel Tower",
    description: "Iconic iron tower",
    category: "monument",
    subcategory: "landmark",
    properties: {
        address: "Champ de Mars, Paris",
        phone: "+33 1 23 45 67 89",
        website: "https://www.toureiffel.paris",
        openingHours: "9:00-23:45",
    },
});

// Add multiple POIs
const pois = [
    { id: "poi-1", lnglat: [2.3, 48.8], title: "POI 1" },
    { id: "poi-2", lnglat: [2.4, 48.9], title: "POI 2" },
];
pois.forEach((poi) => GeoLeaf.POI.add(poi));

Rechargement de POIs

// Replace all markers with a new dataset
GeoLeaf.POI.reload(newPoisArray);

Recherche de POIs

// Get single POI by ID
const poi = GeoLeaf.POI.getPoiById("eiffel-tower");

// Get all POIs
const allPois = GeoLeaf.POI.getAllPois();

// Filter POIs programmatically
const filtered = GeoLeaf.Filters.filterPoiList(allPois, { category: "monument" });
GeoLeaf.POI.setFilteredDisplay(filtered);

6.2 Basemaps

Changer de Basemap

// Programmatically change basemap
GeoLeaf.Baselayers.setBaseLayer("satellite");

// Get current basemap key
const currentKey = GeoLeaf.Baselayers.getActiveKey();
console.log(currentKey); // "satellite"

// Get current basemap object
const currentLayer = GeoLeaf.Baselayers.getActiveLayer();

Basemaps Personnalisés

Ajouter dans profile.json :

{
    "basemaps": [
        {
            "id": "my-vector-map",
            "name": "Ma Carte Vectorielle",
            "style": "https://tiles.myserver.com/style.json",
            "default": false
        }
    ]
}

6.3 GeoJSON Layers

Les couches GeoJSON sont configurées via le profil (geojsonLayers dans geoleaf.config.json). La visibilité des couches est gérée via le panneau LayerManager (UI).

// Load layer manager
await GeoLeaf._loadModule("layerManager");

// Initialize the layer manager control on the map
GeoLeaf.LayerManager.init({ map });

// Add a custom section
GeoLeaf.LayerManager.addSection({ id: "custom", label: "Custom Layers", items: [] });

// Refresh the layer manager display
GeoLeaf.LayerManager.refresh();

6.4 Themes

Changer de Thème

Les thèmes dans GeoLeaf sont des présets de visibilité de couches par layer.

// Apply a theme to a specific layer
await GeoLeaf.Themes.applyTheme("rivers", "dark");

// Get current theme for a layer
const themeId = GeoLeaf.Themes.getCurrentTheme("rivers");

// Get available themes for a layer
const available = await GeoLeaf.Themes.getAvailableThemes("rivers");

Thème UI (clair/sombre)

Pour le thème d'interface (clair/sombre), utiliser Core.setTheme :

GeoLeaf.Core.setTheme("dark");
const current = GeoLeaf.Core.getTheme(); // "dark"

6.5 Labels

Les labels sont un module lazy-loaded configuré via les fichiers de style de couche (champ label). La visibilité des labels est gérée automatiquement via le panneau LayerManager (bouton toggle par couche).

Pour charger le module labels :

await GeoLeaf._loadModule("labels");

La configuration des labels se fait dans le fichier de style de la couche (voir section 5.5).

---

7. UI Components

7.1 Layer Manager

Objectif : Contrôle de la visibilité des couches (catégories POI, couches GeoJSON)

Configuration dans profile.json :

{
    "ui": {
        "layerManager": {
            "enabled": true,
            "position": "topright",
            "collapsed": false
        }
    }
}

Contrôle programmatique :

GeoLeaf.LayerManager.init({ map });
GeoLeaf.LayerManager.toggleCollapse();
GeoLeaf.LayerManager.refresh();

7.2 Filter Panel

Objectif : Filtrage des POIs par critères multiples

Configuration :

{
    "ui": {
        "filterPanel": {
            "enabled": true,
            "position": "topleft",
            "collapsed": true
        }
    }
}

Filtrage programmatique :

// Filter a POI array by criteria
const allPois = GeoLeaf.POI.getAllPois();
const filtered = GeoLeaf.Filters.filterPoiList(allPois, {
    category: "restaurant",
});

// Update the map display with filtered results
GeoLeaf.POI.setFilteredDisplay(filtered);

// Filter routes
const allRoutes = [...]; // your route data
const filteredRoutes = GeoLeaf.Filters.filterRouteList(allRoutes, {
    difficulty: "easy",
});

7.3 Search Bar

Objectif : Recherche de POIs par nom, catégorie ou adresse

Configuration :

{
    "ui": {
        "searchBar": {
            "enabled": true,
            "position": "topleft",
            "placeholder": "Rechercher...",
            "minChars": 2
        }
    }
}

Utilisation programmatique :

// Check if the search index is ready
if (GeoLeaf.Search.isReady()) {
    // Query returns a Set of matching POI IDs
    const matchingIds = GeoLeaf.Search.query("eiffel");
    console.log(matchingIds); // Set { "poi-123", "poi-456" }
}

// Rebuild the search index manually (e.g. after bulk POI update)
GeoLeaf.Search.build(GeoLeaf.POI.getAllPois());

// Check the active search engine
console.log(GeoLeaf.Search.getEngine()); // "flexsearch" or "native"

7.4 Cache Controls

Objectif : Gestion du cache hors-ligne (stockage IndexedDB) via le plugin Storage premium.

Licence : Les fonctionnalités de cache hors-ligne nécessitent le plugin commercial @geoleaf-plugins/storage. Elles ne font pas partie du core MIT.

L'API de cache est fournie par le plugin Storage. Consultez la documentation du plugin pour l'intégration.

// Verify the storage plugin is available
if (GeoLeaf.plugins.isLoaded("storage")) {
    // Storage plugin API is available via GeoLeaf.Storage
    console.log("Storage plugin ready");
}

7.5 Notifications

GeoLeaf.Notifications.success("POI ajouté avec succès !");
GeoLeaf.Notifications.error("Échec du chargement des données");
GeoLeaf.Notifications.warning("Connexion instable");
GeoLeaf.Notifications.info("Chargement en cours...");
GeoLeaf.Notifications.success("Sauvegardé", { duration: 2000 });

GeoLeaf.Notifications.notify("Message personnalisé", "info", 5000);

// Clear all visible notifications
GeoLeaf.Notifications.clearAll();

// Get current notification system status
const status = GeoLeaf.Notifications.getStatus();

---

7.6 Responsive & Mobile Interface

GeoLeaf embarque une interface entièrement responsive qui s'adapte à toutes les tailles d'écran — du smartphone au grand desktop — sans configuration supplémentaire.

Breakpoints

Plage	Appareils	Comportement
≤ 768 px	Smartphone, tablette 6"	Mode mobile — pill toolbar (côté gauche), sheets overlay
769 – 1 024 px	PC 10" / petit laptop	Layout desktop, panneau latéral 360 px
≥ 1 025 px	PC 13"+	Layout desktop, panneau latéral 420 px

Les valeurs de seuil sont exposées comme variables CSS dans geoleaf-theme.css (:root) :

--gl-bp-sm: 480px; /* smartphone    */
--gl-bp-md: 640px; /* phablet       */
--gl-bp-lg: 768px; /* tablet 6" / mobile threshold */
--gl-bp-xl: 1024px; /* PC 10"        */

Mobile pill toolbar (≤ 768 px)

Sur les viewports étroits, les contrôles desktop standard sont remplacés par une barre d'icônes en forme de pilule ancrée au côté gauche de la carte.

Icône	Action
Fullscreen	Basculer le mode plein écran
Legend	Afficher/masquer la légende
Zoom + / −	Zoom carte
My location	Basculer la géolocalisation
Search	Ouvrir la feuille de recherche
Proximity	Activer le mode recherche de proximité
Filters	Ouvrir la feuille de filtres. Indicateur Reset si filtres actifs
Themes	Ouvrir la feuille de sélection de thèmes
Layers	Ouvrir la feuille du gestionnaire de couches
Table	Ouvrir la feuille du tableau de données

Sheet overlay

Chaque panneau utilise un bottom sheet overlay (role="dialog", aria-modal="true", aria-labelledby). Support :

• Tap sur le fond sombre pour fermer
• Touche Escape pour fermer
• Focus trap complet : Tab/Shift-Tab restent dans la feuille
• Focus retourné au bouton déclencheur à la fermeture

Viewport meta tag

Assurez-vous que votre page HTML inclut :

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Ne pas utiliser user-scalable=no — cela bloque le pinch-zoom et nuit à l'accessibilité.

---

8. Advanced Topics

8.1 Custom Profiles

Créer votre propre profil en copiant la structure d'un profil existant :

profiles/
  my-custom-profile/
    geoleaf.config.json    # Optionnel, utilise la config racine si absent
    profile.json           # Requis
    taxonomy.json          # Requis
    themes.json            # Requis
    layers/                # Optionnel, pour les couches GeoJSON
    data/                  # Vos fichiers de données POI

8.2 Offline Mode

Nécessite le plugin commercial @geoleaf-plugins/storage.

Le cache offline est fourni par le plugin Storage premium (@geoleaf-plugins/storage). Consultez la documentation du plugin pour les détails d'intégration.

// Verify the storage plugin is loaded
const isLoaded = GeoLeaf.plugins.isLoaded("storage");
console.log("Storage plugin loaded:", isLoaded);

8.3 Custom Themes (CSS)

Surcharger les styles par défaut en chargeant un fichier CSS personnalisé après geoleaf-main.min.css :

<link rel="stylesheet" href="https://unpkg.com/@geoleaf/core@2.0.0/dist/geoleaf-main.min.css" />
<link rel="stylesheet" href="/my-custom-theme.css" />

/* Change primary color */
.geoleaf-button-primary {
    background-color: #e74c3c;
    border-color: #c0392b;
}

/* Change layer manager background */
.geoleaf-layer-manager {
    background-color: #2c3e50;
    color: #ecf0f1;
}

8.4 Events API

GeoLeaf utilise le bus d'événements GeoLeaf.Events (via CustomEvent sur document).

// POI events
GeoLeaf.events.on("geoleaf:poi:click", (e) => {
    console.log("POI clicked:", e.detail.poiId);
});

// Layer events
GeoLeaf.events.on("geoleaf:layer:toggle", (e) => {
    console.log("Layer:", e.detail.layerId, "visible:", e.detail.visible);
});

// Theme events
GeoLeaf.events.on("geoleaf:theme:applied", (e) => {
    console.log("Theme applied:", e.detail.themeName);
});

// Filter events
GeoLeaf.events.on("geoleaf:filter:apply", (e) => {
    console.log("Active filters:", e.detail.activeCount);
});

// One-time listener
GeoLeaf.events.once("geoleaf:app:ready", () => {
    console.log("App is ready!");
});

// Remove listener
const handler = (e) => console.log(e.detail);
GeoLeaf.events.on("geoleaf:poi:click", handler);
GeoLeaf.events.off("geoleaf:poi:click", handler);

Voir EVENTS_API.md pour la liste complète des événements.

8.5 Data Import/Export

Le module Table offre une fonctionnalité d'export de la sélection :

await GeoLeaf._loadModule("table");

// Export the current table selection (CSV/GeoJSON)
GeoLeaf.Table.exportSelection();

Pour l'import de POIs, utiliser l'API POI directement :

// Import POIs from JSON file
const fileInput = document.querySelector("#file-input");
fileInput.addEventListener("change", async (event) => {
    const file = event.target.files[0];
    const text = await file.text();
    const pois = JSON.parse(text);
    GeoLeaf.POI.reload(pois);
});

---

9. Troubleshooting

Problèmes Courants

9.1 La Carte N'Apparaît Pas

Symptômes : Espace blanc là où la carte devrait être

Solutions :

1. Vérifier que le div #map a une hauteur explicite en CSS :

   #map {
       height: 600px;
   }

2. S'assurer que les CSS MapLibre GL JS et GeoLeaf sont chargés

3. Vérifier les erreurs dans la console navigateur (F12)

4. S'assurer que l'ID du container correspond à mapId dans la config

5. Vérifier que WebGL est supporté : console.log(!!window.WebGLRenderingContext)

9.2 POIs Non Affichés

Symptômes : Carte visible mais pas de marqueurs

Solutions :

1. Vérifier que les coordonnées sont au format [longitude, latitude] (convention MapLibre GL JS)
2. Vérifier que la catégorie POI correspond aux catégories de la taxonomie
3. S'assurer que la couche est activée dans le gestionnaire de couches
4. Vérifier que le zoom est dans la plage layerScale de la couche

9.3 Profil Non Chargé

Symptômes : Erreur "Failed to load profile" dans la console

Solutions :

1. Vérifier profilesBasePath dans geoleaf.config.json
2. S'assurer que profile.json existe dans le répertoire du profil
3. Vérifier que les chemins dans profile.json sont corrects
4. S'assurer que les fichiers JSON sont valides (JSONLint.com)
5. Vérifier les erreurs 404 dans l'onglet Réseau des DevTools

9.4 Labels Non Affichés

Solutions :

1. Vérifier label.enabled: true dans le fichier de style de couche
2. Vérifier que le zoom est dans la plage labelScale
3. Activer le bouton label dans le gestionnaire de couches
4. S'assurer que label.visibleByDefault est présent dans le fichier de style

9.5 Cache Non Fonctionnel

Solutions :

1. Vérifier que le plugin @geoleaf-plugins/storage est chargé
2. Vérifier que le navigateur supporte IndexedDB
3. Vérifier que le quota de stockage navigateur n'est pas dépassé
4. S'assurer que HTTPS est utilisé
5. Le mode Privé/Incognito peut désactiver le cache dans certains navigateurs

Mode Debug

const map = GeoLeaf.init({
    map: { target: "map", center: [2.3, 48.8], zoom: 10 },
    debug: {
        enabled: true,
        modules: ["*"], // Or specific: ['poi', 'config', 'storage']
    },
});

---

10. Next Steps

Documentation

• Configuration Guide — Détail complet des fichiers JSON de configuration
• Profiles Guide — Créer des profils métier personnalisés
• Events API — Référence complète des événements GeoLeaf
• Cookbook — 10 recettes pratiques
• usage-cdn.md — Chargement CDN et NPM

Exemples

• Demo Application — Exécuter npm run build puis npm run build:deploy pour accéder à la démo
• Tourism Example — Voir profiles/tourism/ pour le showcase du profil tourisme

Community

• GitHub Repository — Code source, issues, discussions
• Contact : Mattieu Pottier — support@geonatwork.fr

---

Besoin d'aide ?
Consulter Cookbook · Signaler des Issues · Lire le Contributing Guide