### Install Carte Facile and MapLibre GL JS via npm

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/premiers-pas/installation.md

Installs the Carte Facile and MapLibre GL JS libraries using npm. Requires Node.js and a project setup with npm. This is the recommended method for professional projects.

```bash
npm install carte-facile maplibre-gl
```

--------------------------------

### Callout Component Example

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-adresse.md

Example of using a Jinja2 component for a callout box, linking to external API documentation.

```Nunjucks
{
    title: "Documentation officielle",
    description: "Le site national des adresses présente plus de détails sur les paramètres et points de terminaison de l'API Adresse.",
    link: {
        url: "https://adresse.data.gouv.fr/api-doc/adresse",
        title: "Consulter la documentation"
    }
}
```

--------------------------------

### Carte Facile Installation (NPM)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/index.md

Instructions for installing the Carte Facile library via npm, enabling its use in JavaScript projects. This is the recommended method for most web applications.

```bash
npm install carte-facile
```

--------------------------------

### Install Carte Facile and MapLibre GL JS via CDN

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/premiers-pas/installation.md

Includes Carte Facile and MapLibre GL JS libraries directly in an HTML page using CDN links. This method is suitable for simple projects or quick tests and does not require Node.js.

```html
<link href="https://unpkg.com/maplibre-gl@^{{ data.versions.maplibre }}/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@^{{ data.versions.maplibre }}/dist/maplibre-gl.js"></script>

<!-- Importation des bibliothèques Carte Facile -->
<link href="https://unpkg.com/carte-facile@^{{ data.versions.carteFacile }}/dist/carte-facile.css" rel="stylesheet" />
<script src="https://unpkg.com/carte-facile@^{{ data.versions.carteFacile }}/dist/carte-facile.js"></script>
```

--------------------------------

### Nunjucks Alert Rendering Examples

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/alerte.md

Provides various examples of rendering the alert component with different types ('info', 'warning', 'success', 'error') and content structures in Nunjucks. The 'type' parameter defaults to 'info' if omitted.

```njk
{% from "components/component.njk" import component with context %}
{{ component("alert", {
    type: "warning",
    title: "Titre d'avertissement",
    description: "<p>Le contenu de l'alerte</p>"
}) }}
```

```njk
{% from "components/component.njk" import component with context %}
{{ component("alert", {
    type: "success",
    description: "Contenu de l'alerte seule"
}) }}
```

```njk
{% from "components/component.njk" import component with context %}
{{ component("alert", {
    type: "error",
    title: "Titre d'une erreur simple"
}) }}
```

--------------------------------

### Unstyled JavaScript Snippet

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/en/blog/posts/thirdpost.md

Presents the same JavaScript code as the styled example, but without any syntax highlighting. It includes a simple function and console log statement.

```javascript
// this is a command
function myCommand() {
	let counter = 0;
	counter++;
}

// Test with a line break above this line.
console.log('Test');
```

--------------------------------

### JavaScript Command Example with Diff

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/en/blog/posts/firstpost.md

Demonstrates a simple JavaScript function with lines added and removed, often used to show code changes or differences. This snippet illustrates basic function definition and variable manipulation.

```diff-js
// this is a command
 function myCommand() {
+  let counter = 0;
-  let counter = 1;
   counter++;
 }

 // Test with a line break above this line.
 console.log('Test');
```

--------------------------------

### Carte Facile Installation (CDN)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/index.md

Instructions for including Carte Facile in web projects using a Content Delivery Network (CDN) link. This method is suitable for simpler projects or quick prototyping.

```html
<script src="https://cdn.example.com/carte-facile/latest/carte-facile.js"></script>
```

--------------------------------

### Nunjucks Callout Component with Link

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/mise-en-avant.md

Illustrates how to use the 'callout' component in a Nunjucks template. This example includes a title, HTML-formatted description, and an optional button link with a URL and label.

```njk
{% raw %}
{% from "components/component.njk" import component with context %}
{{ component("callout", {
    title: "Titre mise en avant",
    description: "Contenu <strong>HTML</strong>",
    link: {
        url: "/",
        title: "Label bouton MD"
  }
})
}}
{% endraw %}
```

--------------------------------

### Ajouter une carte simple (MapLibre CDN)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/index.md

An example demonstrating how to add a basic map to a web page using Carte Facile and MapLibre GL JS via CDN links. This snippet shows the essential HTML structure and JavaScript initialization.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Carte Facile - Carte Simple</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
    var map = new maplibregl.Map({
        container: 'map',
        style: 'https://demotiles.maplibre.org/style.json',
        center: [-74.5, 40],
        zoom: 9
    });
</script>

</body>
</html>
```

--------------------------------

### Get Map Function

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/references/introduction.md

The primary function to obtain a map style. This function is central to initializing and configuring map instances within the Carte Facile library.

```APIDOC
getMap()
  - Retrieves a map style.
  - Purpose: To obtain a configuration or instance for map rendering.
  - Usage: Call this function to get the necessary map object or style configuration.
  - Related: Likely used in conjunction with other Carte Facile API functions for map manipulation and display.
```

--------------------------------

### Configure Slug Override for Internationalization

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/i18n.md

Example of setting `slugOverride` in YAML frontmatter to customize URL slugs for localized content in Eleventy. This helps in managing URL structures across different languages.

```yaml
---
slugOverride: a propos
---
```

--------------------------------

### Hide/Show Layers with Carte Facile

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/premiers-pas/masquer-des-couches.md

Demonstrates how to hide or show specific layers or groups of layers using the `hideLayer` and `showLayer` functions from the `carte-facile` library. It shows examples for hiding single layers and multiple layers simultaneously, and how to use `LayerGroup` enum.

```typescript
import { showLayer, hideLayer, LayerGroup } from 'carte-facile';

// Masquer uniquement les bâtiments
hideLayer(map, LayerGroup.buildings);

// Masquer les rues et leurs labels
hideLayer(map, [LayerGroup.streets, LayerGroup.street_labels]);


// Utiliser showLayers pour afficher des couches qui auraient été masquées
showLayer(map, [LayerGroup.cadastral_sections, LayerGroup.buildings]);
```

--------------------------------

### JavaScript Command with Syntax

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/en/blog/posts/thirdpost.md

Demonstrates a simple JavaScript function named myCommand that increments a counter. Includes console logging and comments, presented with syntax highlighting.

```javascript
// this is a command
function myCommand() {
	let counter = 0;
	counter++;
}

// Test with a line break above this line.
console.log('Test');
```

--------------------------------

### Configuration Fil d'Ariane (Markdown/YAML)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/fil-d-ariane.md

Exemple de configuration pour afficher un fil d'Ariane dans un article de blog ou une page en utilisant des métadonnées YAML. L'option 'showBreadcrumb: true' active l'affichage.

```yaml
---
segments:
    - url: "/blog/"
    - title: "Blog"
showBreadcrumb: true
---
```

--------------------------------

### Autocomplétion d'adresse avec Photon Geocoder (JavaScript)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-adresse.md

Exemples d'utilisation de la bibliothèque Photon Geocoder pour l'autocomplétion d'adresses, indépendamment des bibliothèques cartographiques comme Maplibre ou OpenLayers. Ces démos montrent l'intégration côté client.

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>Photon Autocomplete Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script src="https://unpkg.com/@mapbox/mapbox-gl-leaflet"></script>
  <script src="https://unpkg.com/photon-geocoder-autocomplete@1.0.0/dist/photon.js"></script>
  <style>
    #map { height: 400px; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <input type="text" id="searchbox" placeholder="Rechercher une adresse...">

  <script>
    // Initialisation de la carte (exemple avec Leaflet)
    var map = L.map('map').setView([48.8566, 2.3522], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // Initialisation de l'autocomplétion Photon
    var geocoder = new Photon.Geocoder();
    var searchControl = new Photon.SearchControl({
        geocoder: geocoder,
        placeholder: 'Rechercher une adresse...'
    });

    // Ajout du contrôle de recherche à la carte
    searchControl.addTo(map);

    // Gestion de la sélection d'un résultat
    searchControl.on('select', function(e) {
        map.setView(e.latlng, 15);
        L.marker(e.latlng).addTo(map).bindPopup(e.properties.name).openPopup();
    });
  </script>
</body>
</html>
```

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>Photon Autocomplete - No Map Demo</title>
  <script src="https://unpkg.com/photon-geocoder-autocomplete@1.0.0/dist/photon.js"></script>
  <style>
    body { font-family: sans-serif; }
    #searchbox { padding: 10px; width: 300px; margin-bottom: 10px; }
    #results { margin-top: 10px; border: 1px solid #ccc; padding: 10px; width: 300px; }
    .result-item { cursor: pointer; padding: 5px; border-bottom: 1px solid #eee; }
    .result-item:last-child { border-bottom: none; }
    .result-item:hover { background-color: #f0f0f0; }
  </style>
</head>
<body>
  <h1>Autocomplétion d'adresse sans carte</h1>
  <input type="text" id="searchbox" placeholder="Rechercher une adresse...">
  <div id="results"></div>

  <script>
    var geocoder = new Photon.Geocoder();
    var searchbox = document.getElementById('searchbox');
    var resultsDiv = document.getElementById('results');

    searchbox.addEventListener('input', function() {
      var query = this.value;
      if (query.length < 3) {
        resultsDiv.innerHTML = '';
        return;
      }

      geocoder.query(query)
        .then(function(results) {
          resultsDiv.innerHTML = '';
          results.forEach(function(result) {
            var item = document.createElement('div');
            item.className = 'result-item';
            item.textContent = result.properties.name;
            item.addEventListener('click', function() {
              alert('Adresse sélectionnée: ' + result.properties.name + '\nCoordonnées: ' + result.geometry.coordinates[1] + ', ' + result.geometry.coordinates[0]);
              searchbox.value = result.properties.name; // Optionnel: remplir la boîte de recherche
              resultsDiv.innerHTML = '';
            });
            resultsDiv.appendChild(item);
          });
        })
        .catch(function(error) {
          console.error('Erreur lors de la recherche:', error);
          resultsDiv.innerHTML = 'Erreur de recherche.';
        });
    });
  </script>
</body>
</html>
```

--------------------------------

### Callout Syntax

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/md-cheatsheet.md

Demonstrates the Markdown syntax for creating callout boxes, used for highlighting important information with a title and rich markdown content.

```markdown
:::callout Titre mise en avant
Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent <strong>automatiquement</strong> l’ARS aux familles déjà allocataires qui remplissent les conditions.
:::
```

--------------------------------

### Géocodage massif avec CSV via adresse.data.gouv.fr

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-adresse.md

Procédure pour réaliser un géocodage massif en utilisant l'interface graphique de adresse.data.gouv.fr. Cette méthode permet de soumettre des fichiers CSV pour traitement, avec une limite de taille de 50 Mo.

```text
1. Préparer votre fichier CSV avec les adresses à géocoder.
   Assurez-vous que le format est correct (par exemple, une colonne pour l'adresse).

2. Télécharger un fichier exemple si nécessaire :
   curl -O https://gist.githubusercontent.com/ThomasG77/32329a8557135f11cb5656e3bfd4d35c/raw/9bd7883be31d2c9758d4393d72e9dc1ae4c5bed3/annuaire-des-debits-de-tabac-2018-utf8-20lines.csv

3. Accéder à l'interface de géocodage CSV :
   Ouvrir votre navigateur web et aller sur https://adresse.data.gouv.fr/csv

4. Télécharger votre fichier CSV via l'interface.
   Respectez la limite de taille de 50 Mo.

5. Lancer le processus de géocodage et télécharger le résultat.
   L'interface fournit un retour visuel (GIF animé) montrant le processus.
```

--------------------------------

### Schéma de configuration du composant Tuile

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/tuile.md

Définit la structure attendue et les types de données pour l'objet de configuration utilisé par le composant 'tuile'. Les propriétés incluent url, externalUrl, title, description et pictogram.

```json
{
  "url": "string",
  "externalUrl": "string",
  "title": "string",
  "description": "string",
  "pictogram": "string"
}
```

--------------------------------

### Géocodage massif avec bulk-geocoding-python-client (Python)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-adresse.md

Ce projet Python propose un client pour effectuer du géocodage massif en utilisant des appels unitaires plutôt que le traitement direct de fichiers CSV. Il est utile pour des scénarios où un contrôle plus fin sur les appels est nécessaire.

```python
# Ce snippet est une illustration conceptuelle basée sur le projet.
# L'implémentation réelle dépendra de la structure du client.

# Assurez-vous d'avoir installé le client : pip install bulk-geocoding-python-client

# from bulk_geocoding import GeocodingClient

# def bulk_geocode_addresses(addresses):
#     """Effectue un géocodage massif en utilisant le client Python."""
#     # Initialiser le client avec l'URL de votre service de géocodage
#     # client = GeocodingClient(service_url="https://api-adresse.data.gouv.fr/1.0/search/")
#     
#     # Les adresses doivent être dans un format compatible avec le client
#     # Par exemple, une liste de dictionnaires avec une clé 'address'
#     # formatted_addresses = [{'address': addr} for addr in addresses]
#     
#     # results = client.geocode_bulk(formatted_addresses)
#     # return results
#     pass # Placeholder pour l'implémentation réelle

# if __name__ == "__main__":
#     # Liste d'adresses à géocoder
#     # my_addresses = [
#     #     "1 Rue de la Paix, Paris",
#     #     "Place de la Concorde, Paris",
#     #     "Champs-Élysées, Paris"
#     # ]
#     
#     # geocoded_results = bulk_geocode_addresses(my_addresses)
#     # print(geocoded_results)
#     pass

print("Ce code est un placeholder pour illustrer l'utilisation de 'bulk-geocoding-python-client'.")
print("Veuillez consulter la documentation du projet pour une implémentation complète.")

```

--------------------------------

### Open Vector Tile Schema Layers and Style Usage

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/references/schema-de-donnees-openmaptiles.md

Details the various layers within the Open Vector Tile schema and their implementation across different map styles. This documentation serves as a reference for data integration and visual styling in mapping applications.

```APIDOC
OpenVectorTileSchema:
  Description: A schema defining vector tile layers for geospatial data.
  Layers:
    - Name: aerodrome_label
      Description: Labels for aerodromes.
      Fields: Contains names, aerodrome classification (international, regional, etc.), IATA/ICAO codes, and elevations.
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ❌
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: aeroway
      Description: Polygons related to airport infrastructure.
      Fields: References runways, heliports, taxiways, and other airport facilities. Airport buildings are in the 'building' layer.
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ✅ All polygons without distinction and an identical color to the layer for the 'landuse' layer.
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: boundary
      Description: Lines of administrative boundaries and polygons of aboriginal lands.
      Fields: Identifies administrative levels, region names, and boundary statuses (disputed, maritime).
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ✅ Layer with country lines (admin_level==4).
                 ✅ Layer with country lines (admin_level<=3).
                 For both layers, exclusion of maritime boundaries (maritime==0).
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: building
      Description: Polygons of all buildings from OpenStreetMap.
      Fields: Provides precision on height for 3D rendering, color, and parts to be masked in 3D.
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ✅ All polygons without distinction.
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: housenumber
      Description: Building numbers for labeling on the map.
      Fields: Provides address numbers for buildings or areas.
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ❌
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: landcover
      Description: Land cover (forests, meadows, rocky areas, etc.). At low zoom, data comes from Natural Earth for glaciers and ice sheets. At high zoom, land cover is derived from OSM tags.
      Fields: Allows specifying the 'class' to assign natural colors to land cover: 'farmland', 'ice', 'wood', 'rock', 'grass', 'wetland', 'sand'. Subclasses specify certain layers (gardens, mangroves, parks, etc.). See complete list at https://openmaptiles.org/schema/#landcover.
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ✅ Layer to display glaciers (class==ice), layer for forests (class==wood), and layer for grass areas (class==grass).
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: landuse
      Description: Land use by humans. At low zoom, data comes from Natural Earth for urban areas. At high zoom, data comes from OSM tags.
      Fields: Use 'class' to assign colors to areas. See complete list at https://openmaptiles.org/schema/#landuse.
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ✅ All polygons without distinction.
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: mountain_peak
      Description: Hill or mountain peaks.
      Fields: Contains peak names, 'class' (peak, volcano, etc.), elevation, and relative importance.
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ✅ Display of points and associated names for class==peak.
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: park
      Description: Natural and protected areas.
      Fields: Groups parks, nature reserves, and protected areas with their names and classifications.
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ✅ All polygons without distinction.
        - Style: OSM aerial (OSM)
          Usage: 
        - Style: OSM enriched (OSM)
          Usage: 

    - Name: place
      Description: Places like countries, states, cities, and islands.
      Fields: Indicates place names, importance, whether they are capitals, and the type of place (country, city, etc.).
      StyleUsage:
        - Style: OSM clean (OSM)
          Usage: ✅ Differentiation and progressive display of place names for classes: country, state, 

```

--------------------------------

### Intégration du composant Carte avec Nunjucks

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/carte.md

Exemple d'utilisation du composant 'card' dans un fichier Nunjucks, montrant comment passer les données pour afficher une carte avec titre, description, tags, date et image. Inclut la structure des paramètres attendus par le composant.

```njk
{% from "components/component.njk" import component with context %}
{{ component("card", {
    url: "/",
    title: "Intitulé carte",
    description: "La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.",
    tags: ["label tag"],
    date: "2023-06-21" | jsDateObject,
    badges: ["label badge"],
    image: {
        src: "/img/placeholder.16x9.png",
        alt: ""
    },
    addClass: "fr-card--horizontal-tier"
}) }}
```

```APIDOC
Carte Component Parameters:

Defines the structure of the configuration object for the 'card' component, including optional and required fields for customization.

Parameters:
  url: string
    The URL for the card link. If externalUrl is used, this should be false.
  externalUrl: string
    An external URL for the card link.
  urlDescription: string
    A description for the URL, used when externalUrl is present.
  title: string
    The main title of the card.
  description: string
    A brief description or summary for the card content.
  tags: string[]
    An array of strings representing tags associated with the card.
  date | detail: Date | string
    The date to display, or a more detailed string. Cannot be used simultaneously.
  detailEnd: string
    Additional detail text, typically displayed at the end.
  badges: string[]
    An array of strings representing badges to display on the card.
  image: {
    src | path: string
      The source path for the card's image. 'path' allows relative paths benefiting Eleventy's image plugin.
    alt: string
      Alternative text for the card's image.
  }
  addClass: string
    Additional CSS classes to apply to the card element for custom styling.

Notes:
- If `card.externalUrl` is used, `card.url` must be `false`.
- `image.src` is the path within the site. `image.path` can be used instead for relative file paths.
- `date` and `detail` cannot be populated simultaneously as they share the same display area.
```

--------------------------------

### Nunjucks Alert Component Integration

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/alerte.md

Shows how to use the 'alert' component programmatically in Nunjucks templates. It accepts parameters like 'type', 'title', and 'description' for customizable alerts.

```njk
{% from "components/component.njk" import component with context %}
{{ component("alert", {
    type: "info",
    title: "Test d'alerte",
    description: "<p>Le contenu de l'alerte</p>"
}) }}
```

--------------------------------

### Eleventy Pagination for Tags

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/pagination.md

Configures level 2 pagination for blog posts, grouping them by tags. This snippet uses Eleventy's `paginateCollectionTags` function within a `before` callback to process collections and prepare paginated data for each tag. It requires the `collections.posts` data and filters by language.

```javascript
---
js
  {
    pagination: {
      data: "collections.posts",
      size: 1,
      alias: "tag",
      before: function(paginationData, fullData) {
        return this.paginateCollectionTags(this.filterCollectionLang(paginationData, fullData.lang), 6);
      }
    }
  }
---

```

--------------------------------

### Markdown Callout Component Usage

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/mise-en-avant.md

Demonstrates the integration of the 'callout' component within a Markdown file. This method allows for basic text content and a title to be displayed as a highlighted section.

```md
:::callout Titre mise en avant
Contenu **Mardown**
:::
```

--------------------------------

### Intégrer un système d'onglets avec Nunjucks

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/onglet.md

Ce snippet montre comment utiliser le composant Nunjucks `tabs` pour intégrer un système d'onglets dans une page. Il prend un objet de configuration avec un `ariaLabel` et une liste d' `items`, où chaque item définit un onglet avec son `id`, `label` et `content`. Ce composant est utile pour organiser le contenu de manière interactive.

```njk
{% raw %}
{% from "components/tab.njk" import tabs %}
{{ tabs({
    ariaLabel: "Titre du système d'onglets",
    items: [
        {
            id: "tab1",
            label: "Label",
            content: "<p>Contenu 1</p>"
        },
        {
            id: "tab2",
            label: "Label",
            content: "<p>Contenu 2</p>"
        }
    ]
}) }}
{% endraw %}
```

--------------------------------

### Utilisation du composant Tuile en Nunjucks

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/tuile.md

Démontre comment inclure un composant 'tuile' dans un template Nunjucks. Il accepte un objet de configuration avec des propriétés telles que url, title, description et pictogram. L'utilisation de `externalUrl` nécessite que `url` soit défini sur `false`.

```njk
{% from "components/component.njk" import component with context %}
{{ component("tile", {
    url: "/",
    title: "Intitulé de la tuile",
    description: "Lorem [...] elit ut.",
    pictogram: "buildings/city-hall.svg"
}) }}
```

--------------------------------

### Accordion Syntax

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/md-cheatsheet.md

Demonstrates the Markdown syntax for creating accordions, including group and individual accordion elements with rich markdown content.

```markdown
????accordionsgroup

??? Intitulé accordéon

Contenu **markdown** _riche_

???

????
```

--------------------------------

### Géocodage d'adresse unitaire avec Geopy (Python)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-adresse.md

Utilisation de la bibliothèque Geopy en Python pour le géocodage d'adresses. La classe `BANFrance` de Geopy est spécifiquement conçue pour interagir avec la Base d'Adresses Nationale française.

```python
from geopy.geocoders import BANFrance

def geocode_with_geopy_ban(address):
    """Géocode une adresse en utilisant la classe BANFrance de Geopy."""
    geolocator = BANFrance()
    try:
        location = geolocator.geocode(address)
        if location:
            return {
                "address": location.address,
                "latitude": location.latitude,
                "longitude": location.longitude,
                "raw": location.raw
            }
        else:
            return None
    except Exception as e:
        print(f"Erreur lors du géocodage avec Geopy : {e}")
        return None

# Exemple d'utilisation :
if __name__ == "__main__":
    address_to_geocode = "20 Avenue de Ségur, Paris"
    result = geocode_with_geopy_ban(address_to_geocode)
    
    if result:
        print(f"Adresse trouvée: {result['address']}")
        print(f"Coordonnées: Latitude {result['latitude']}, Longitude {result['longitude']}")
        # print(f"Données brutes: {result['raw']}") # Pour voir toutes les informations retournées
    else:
        print(f"Impossible de géocoder l'adresse : {address_to_geocode}")

```

--------------------------------

### Géocodage d'adresse unitaire avec Python

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-adresse.md

Ce snippet Python montre comment effectuer des appels unitaires pour géocoder des adresses en utilisant le script `geocode-addok-unit-call.py`. Il est conçu pour interagir avec un service de géocodage comme Addok.

```python
import requests
import json

# URL du service de géocodage (exemple avec Addok)
GEOCODING_URL = "https://api-adresse.data.gouv.fr/1.0/reverse/"

def geocode_address_unit(address):
    """Effectue un appel unitaire de géocodage pour une adresse donnée."""
    params = {
        "q": address,
        "limit": 1
    }
    try:
        response = requests.get(GEOCODING_URL, params=params)
        response.raise_for_status() # Lève une exception pour les codes d'erreur HTTP
        data = response.json()
        
        if data and data.get('features'):
            feature = data['features'][0]
            properties = feature.get('properties', {})
            geometry = feature.get('geometry', {})
            
            return {
                "address": properties.get('label'),
                "latitude": geometry.get('coordinates')[1] if geometry.get('coordinates') else None,
                "longitude": geometry.get('coordinates')[0] if geometry.get('coordinates') else None,
                "city": properties.get('city'),
                "postcode": properties.get('postcode')
            }
        else:
            return None
            
    except requests.exceptions.RequestException as e:
        print(f"Erreur lors de la requête : {e}")
        return None
    except json.JSONDecodeError:
        print("Erreur lors du décodage de la réponse JSON.")
        return None

# Exemple d'utilisation :
if __name__ == "__main__":
    address_to_geocode = "10 Rue de Rivoli, Paris"
    result = geocode_address_unit(address_to_geocode)
    
    if result:
        print(f"Adresse: {result['address']}")
        print(f"Ville: {result['city']}, Code Postal: {result['postcode']}")
        print(f"Coordonnées: Latitude {result['latitude']}, Longitude {result['longitude']}")
    else:
        print(f"Impossible de géocoder l'adresse : {address_to_geocode}")

```

--------------------------------

### List Available Overlays in Console

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/premiers-pas/ajouter-des-surcouches.md

Provides methods to inspect all available map overlays. It logs the `Overlay` object to the browser's console, allowing developers to see all possible overlay names and their corresponding values. This is useful for autocompletion or programmatic access.

```typescript
import { Overlay } from 'carte-facile';

console.log(Overlay);
```

```typescript
console.log(CarteFacile.Overlay);
```

--------------------------------

### Quote Syntax

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/md-cheatsheet.md

Illustrates the Markdown syntax for creating blockquotes, typically used for citations or emphasized text.

```markdown
:::quote
« Lorem [...] elit ut. »
:::
```

--------------------------------

### Alert Syntax

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/md-cheatsheet.md

Shows the Markdown syntax for displaying alerts with different types like 'info', including rich markdown content within the alert.

```markdown
:::info Test d'alerte
Contenu ** Mardown**
:::
```

--------------------------------

### Add Banner Image to Blog Post Layout

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/blog-post.md

This snippet demonstrates how to add a banner image to a blog post layout. It requires defining the `image.path` and `image.alt` properties within the YAML frontmatter of the post file. The `image.path` should be a relative path to the image file from the page's location.

```markdown
---
image:
  path: ./possum.png
  alt: A possum
---
```

--------------------------------

### Géocodage massif avec addok-geocode-stream (Node.js)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-adresse.md

Utilisation de la solution en ligne de commande `addok-geocode-stream` pour le géocodage massif via Node.js. Ce script traite les adresses à partir d'un flux d'entrée et génère un flux de sortie avec les résultats géocodés.

```bash
# Installer le package si ce n'est pas déjà fait :
npm install -g addok-geocode-stream

# Exemple d'utilisation avec un fichier CSV en entrée :
# Supposons que votre fichier CSV s'appelle 'adresses.csv' et contient une colonne 'adresse'.
# Le script lira le fichier, géocoderra chaque adresse et écrira le résultat dans la sortie standard.

cat adresses.csv | addok-geocode-stream --input-format csv --input-columns adresse --output-format csv > resultats_geocodes.csv

# Pour spécifier une URL de service Addok différente (si vous n'utilisez pas le service par défaut) :
# cat adresses.csv | addok-geocode-stream --endpoint http://votre-addok-instance.com/1.0/search --input-format csv --input-columns adresse --output-format csv > resultats_geocodes.csv

```

--------------------------------

### Markdown Alert Usage

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/alerte.md

Demonstrates how to render an alert component directly within a Markdown file using the ':::' directive. This allows for simple integration of informational messages.

```md
:::info Test d'alerte
Contenu **Mardown**
:::
```

--------------------------------

### Ajouter une carte de téléchargement

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/telechargement.md

Présente un téléchargement de fichier sous forme de carte. Inclut un titre, une description optionnelle, l'URL du fichier et des détails supplémentaires.

```njk
{% raw %}{% from "components/component.njk" import component with context %}
{{ component("download", {
    type: "card",
    title: "Nom du fichier",
    description: "Description du fichier",
    href: "/data/dossier/fichier.ext",
    detail: "Format ou extension - 850Ko"
})}{% endraw %}
```

--------------------------------

### Ajouter un lien de téléchargement

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/telechargement.md

Intègre un lien simple pour télécharger un fichier. Nécessite le nom du fichier et son URL. Peut inclure des détails comme le format et la taille.

```njk
{% raw %}{% from "components/component.njk" import component with context %}
{{ component("download", {
    title: "Nom du fichier",
    href: "/data/dossier/fichier.ext",
    detail: "Format ou extension - 850Ko"
}) }}{% endraw %}
```

--------------------------------

### Show Breadcrumbs in Blog Post Layout

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/blog-post.md

This snippet shows how to enable the display of breadcrumbs for a blog post layout. By setting the `showBreadcrumb` variable to `true` in the YAML frontmatter, the navigation trail will be automatically rendered.

```markdown
---
showBreadcrumb: true
---
```

--------------------------------

### Intégration Fil d'Ariane (Nunjucks)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/fil-d-ariane.md

Exemple d'utilisation du composant 'breadcrumb' dans un fichier Nunjucks (.njk). Il montre comment passer les segments du fil d'Ariane, incluant l'URL et le titre de chaque segment.

```njk
{% from "components/component.njk" import component with context %}
{{ component("breadcrumb", {
    segments: [{
        url: "/blog/",
        title: "Blog"
    }]
}) }}
```

--------------------------------

### Ajouter une tuile de téléchargement

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/blog/posts/telechargement.md

Affiche un téléchargement de fichier comme une tuile interactive. Permet d'ajouter un pictogramme pour une meilleure identification visuelle, en plus des informations de base.

```njk
{% raw %}{% from "components/component.njk" import component with context %}
{{ component("download", {
    type: "tile",
    title: "Nom du fichier",
    href: "/data/dossier/fichier.ext",
    detail: "Format ou extension - 850Ko",
    pictogram: "buildings/city-hall.svg"
})}{% endraw %}
```

--------------------------------

### Add Overlays to Map with Carte Facile

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/premiers-pas/ajouter-des-surcouches.md

Demonstrates how to add single or multiple map overlays using the `addOverlay` function from the 'carte-facile' library. The function automatically styles overlays based on the selected base map. It takes the map object and an overlay or an array of overlays as input.

```typescript
import { addOverlay, Overlay } from 'carte-facile';

// Ajouter une seule surcouche
addOverlay(map, Overlay.administrativeBoundaries);

// Ou ajouter plusieurs surcouches en même temps
addOverlay(map, [Overlay.administrativeBoundaries, Overlay.cadastre]);
```

```typescript
CarteFacile.addOverlay(map, ['levelCurves', 'administrativeBoundaries']);
```

--------------------------------

### API Découpage Administratif - Recherche et Récupération de Données

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-decoupage-administratif.md

Permet d'interroger l'API Découpage Administratif pour obtenir des informations sur les communes, départements et régions françaises. Les appels peuvent être filtrés par code postal, code INSEE, nom, coordonnées géographiques, ou liés à un département ou une région spécifique. Des liens directs vers des fichiers JSON globaux pour les départements et régions sont également disponibles.

```APIDOC
API Découpage Administratif

Base URL: https://geo.api.gouv.fr/

Fonctionnalités :

1.  **Recherche de Communes**
    *   Par code postal :
        `GET /communes?codePostal={codePostal}`
        Exemple : `https://geo.api.gouv.fr/communes?codePostal=78000`
    *   Par code INSEE :
        `GET /communes?code={code}`
        Exemple : `https://geo.api.gouv.fr/communes?code=44109`
    *   Par nom (avec boost par population et limite) :
        `GET /communes?nom={nom}&boost={boost}&limit={limit}`
        Exemple : `https://geo.api.gouv.fr/communes?nom=Nantes&boost=population&limit=5`
    *   Par coordonnées (latitude, longitude) :
        `GET /communes?lat={lat}&lon={lon}`
        Exemple : `https://geo.api.gouv.fr/communes?lat=47.0482944&lon=-1.1501568`
    *   Filtrer par département (pour éviter homonymie) :
        `GET /communes?nom={nom}&codeDepartement={codeDepartement}`
        Exemple : `https://geo.api.gouv.fr/communes?nom=Saint-Aubin&codeDepartement=21`
    *   Obtenir toutes les communes d'un département :
        `GET /departements/{codeDepartement}/communes`
        Exemple : `https://geo.api.gouv.fr/departements/44/communes`
    *   Obtenir toutes les communes d'une région :
        `GET /communes?codeRegion={codeRegion}`
        Exemple : `https://geo.api.gouv.fr/communes?codeRegion=84`
    *   Note : L'option `fields` permet de ne retourner que les champs nécessaires.

2.  **Recherche de Régions et Départements**
    *   Obtenir une région par son nom :
        `GET /regions?nom={nom}`
        Exemple : `https://geo.api.gouv.fr/regions?nom=Auvergne`
    *   Obtenir un département par son nom :
        `GET /departements?nom={nom}`
        Exemple : `https://geo.api.gouv.fr/departements?nom=Ain`

3.  **Données globales (sans géométrie)**
    *   Fichier JSON des départements :
        `https://unpkg.com/@etalab/decoupage-administratif@4.1.0/data/departements.json`
    *   Fichier JSON des régions :
        `https://unpkg.com/@etalab/decoupage-administratif@4.1.0/data/regions.json`

Paramètres courants :
- `codePostal`: Code postal de la commune.
- `code`: Code INSEE de la commune.
- `nom`: Nom de la commune, département ou région.
- `boost`: Critère de tri pour la recherche par nom (ex: 'population').
- `limit`: Nombre maximum de résultats.
- `lat`: Latitude pour la recherche par coordonnées.
- `lon`: Longitude pour la recherche par coordonnées.
- `codeDepartement`: Code du département pour filtrer les communes.
- `codeRegion`: Code de la région pour filtrer les communes.
- `fields`: Permet de spécifier les champs à retourner.
```

--------------------------------

### Display Available Layer Groups

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/premiers-pas/masquer-des-couches.md

Shows how to log all available layer group names to the browser console using the `LayerGroup` enum from the `carte-facile` library. This helps in discovering and using the correct group names.

```typescript
import { LayerGroup } from 'carte-facile';

console.log(LayerGroup);
```

--------------------------------

### Autocomplétion d'adresse avec Leaflet Geocoder BAN (JavaScript)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/aller-plus-loin/api-adresse.md

Exemples d'intégration du plugin Leaflet Geocoder BAN pour l'autocomplétion d'adresses françaises. Les démos montrent l'ajout d'une barre de recherche et d'un contrôle de recherche sur une carte Leaflet.

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Geocoder BAN Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@geocoding/leaflet-geocoder-ban/dist/leaflet-geocoder-ban.css" />
  <script src="https://unpkg.com/@geocoding/leaflet-geocoder-ban/dist/leaflet-geocoder-ban.js"></script>
  <style>
    #map { height: 400px; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    var map = L.map('map').setView([48.8566, 2.3522], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // Ajout du contrôle de recherche BAN
    var geocoderControl = L.geocoder.ban().addTo(map);

    // Gestion de la sélection d'un résultat
    geocoderControl.on('select', function(e) {
        map.setView(e.latlng, 15);
        L.marker(e.latlng).addTo(map).bindPopup(e.properties.label).openPopup();
    });
  </script>
</body>
</html>
```

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Geocoder BAN Search Bar Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@geocoding/leaflet-geocoder-ban/dist/leaflet-geocoder-ban.css" />
  <script src="https://unpkg.com/@geocoding/leaflet-geocoder-ban/dist/leaflet-geocoder-ban.js"></script>
  <style>
    body { font-family: sans-serif; }
    #search-container {
      position: absolute;
      top: 10px;
      left: 50px;
      z-index: 1000;
      background: white;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    #map { height: 400px; width: 100%; }
    .leaflet-geocoder-ban-control {
      position: relative !important;
      box-shadow: none;
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <div id="search-container">
    <div id="geocoder"></div>
  </div>

  <script>
    var map = L.map('map').setView([48.8566, 2.3522], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // Ajout de la barre de recherche BAN
    var geocoderSearchBar = L.geocoder.ban({
        placeholder: 'Rechercher une adresse...'
    }).addTo(map);

    // Cibler le conteneur spécifique pour la barre de recherche
    document.getElementById('geocoder').appendChild(geocoderSearchBar.getContainer());

    // Gestion de la sélection d'un résultat
    geocoderSearchBar.on('select', function(e) {
        map.setView(e.latlng, 15);
        L.marker(e.latlng).addTo(map).bindPopup(e.properties.label).openPopup();
    });
  </script>
</body>
</html>
```

--------------------------------

### MapLibre GL JS API Reference

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/index.md

Carte Facile leverages MapLibre GL JS, providing access to its full API for advanced customization and functionality. This section outlines key areas of the MapLibre GL JS API that can be utilized with Carte Facile.

```APIDOC
MapLibre GL JS API Overview:

Carte Facile is built upon MapLibre GL JS, a powerful open-source vector map rendering library. Developers can directly use the MapLibre GL JS API for advanced map interactions and styling.

Key Components & Concepts:

1. Map Instance:
   - Initialization: `new maplibregl.Map({...})`
   - Parameters: `container` (DOM element or ID), `style` (map style URL or object), `center`, `zoom`, `pitch`, `bearing`.
   - Methods: `on()`, `off()`, `flyTo()`, `easeTo()`, `setCenter()`, `setZoom()`, `addLayer()`, `removeLayer()`, `getSource()`, `getCanvas()`.
   - Events: `load`, `render`, `move`, `zoom`, `click`, `mousemove`.

2. Layers:
   - Adding Layers: `map.addLayer(layer, beforeLayerId)`
   - Layer Types: `fill`, `line`, `symbol`, `raster`, `circle`, `heatmap`, `fill-extrusion`, `hillshade`, `sky`.
   - Layer Properties: `id`, `type`, `source`, `layout`, `paint`.

3. Sources:
   - Adding Sources: `map.addSource(sourceId, source)`
   - Source Types: `vector`, `geojson`, `image`, `video`, `canvas`, `raster`, `model`.
   - Source Properties: `type`, `url` (for vector/tile sources), `data` (for GeoJSON), `coordinates` (for image sources).

4. Interactions:
   - Mouse Events: `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseover`, `mouseout`, `contextmenu`.
   - Touch Events: `touchstart`, `touchmove`, `touchend`.
   - Gestures: Panning, zooming, rotating, tilting.

5. Styling:
   - Map Styles: JSON objects defining layers, sources, sprites, glyphs, etc.
   - Expressions: Powerful data-driven styling using JSON expressions.

Related MapLibre GL JS APIs:
- Mapbox GL JS API (for conceptual similarity and migration)
- MapLibre GL Native (for mobile development)

Limitations:
- Requires a compatible browser environment.
- Performance depends on map complexity, data volume, and device capabilities.
```

--------------------------------

### Displaying Rail Network Layers in Map Styles (Nunjucks)

Source: https://github.com/fab-geocommuns/carte-facile-site/blob/main/content/fr/documentation/references/schema-de-donnees-plan-ign.md

This Nunjucks snippet defines the structure for a table displaying Réseau ferré (Rail Network) layers. It includes headers for layer name, description, fields, and availability across IGN map styles, though the data for this specific table is incomplete in the provided text.

```Nunjucks
{% from "components/component.njk" import component with context %}
{{ component("table", {
    title: "Réseau ferré",
    headers: [
        "Nom de la couche",
        "Description",
        "Champs",
        "Carte épurée (IGN)",

```