Session 4: Customization and control in Leaflet

Objective: enhance the user experience (UX) and customize the appearance of interactive maps.

Loading…

Taking too long?

Reload document

| Open in new tab

Diapo 1: Customizing markers

1. Introduction: Why customize markers?

By default, Leaflet uses a standard blue icon for markers. In many cases, however, it is preferable to replace this icon with a customized image. This allows the type of location or point of interest to be better represented on the map.

Benefits of customizing markers:

Categorizing points: Each type of point (restaurant, museum, hotel, emergency point…) can be associated with a different icon. For example, an icon representing a plate for a restaurant, a bed for a hotel, etc.

Visual consistency: You can adapt icons to a specific graphic charter or theme, creating a more aesthetic and professional experience.

Enhanced user experience: Custom icons enable users to quickly locate different types of points of interest on the map. This makes the map more intuitive and accessible.

2. How do I customize a marker in Leaflet?

Here’s an example of code to customize a marker with a personalized icon: improve the user experience (UX) and customize the appearance of interactive maps.

// Créer une icône personnalisée
const myIcon = L.icon({
    iconUrl: 'images/restaurant.png', // URL de l'image de l'icône
    iconSize: [32, 32], // Taille de l'icône (en pixels)
    iconAnchor: [16, 32], // Point de l'icône qui correspond à la position du marqueur (le centre du marqueur ici)
    popupAnchor: [0, -32] // Position du popup par rapport au marqueur
});

// Ajouter un marqueur avec l'icône personnalisée sur la carte
L.marker([48.8566, 2.3522], { icon: myIcon })
    .addTo(map) // Ajouter à la carte
    .bindPopup("Restaurant Parisien"); // Ajouter un popup

Explanations of the icon options:

• iconUrl: the URL or relative path of the image you wish to use as an icon (here, images/restaurant.png).
• iconSize: specifies the size of the icon in pixels. Here, the icon is 32×32 pixels.
• iconAnchor: the point on the icon that corresponds to the position of the marker. For example, if iconAnchor: [16, 32], this means that the marker anchor will be the bottom center of the icon.
• popupAnchor : the position of the popup relative to the icon. In this example, the popup will appear 32 pixels above the icon.

3. Compatible image formats

Leaflet lets you use different image formats for icons:

• PNG, JPG: standard image formats. Make sure the image is of good quality, so as not to impair legibility.
• SVG: this vector format is particularly useful if you want icons that don’t lose quality when resized.

Images must be accessible from your project folder or from a public URL.

4. Examples of custom icons

• Restaurant icon: an image representing a plate or cutlery.
• Museum icon: an image of a painting or monument.
• Icon for a gas station: an image of a gas pump.

Conclusion

Customizing markers in Leaflet is a great way to make your maps more legible, visually consistent and tailored to the user experience. It allows you to better categorize the different types of points of interest and reinforce the visual impact of the map.

Slide 2-Custom styles for vector shapes

Custom styles for vector shapes

1. Introduction: What is a vector shape?

In Leaflet, a vector shape is a geographic feature represented on the map from geometric data. This includes :

• Polylines: lines drawn between several points (e.g. a route).
• Polygons: closed shapes delimiting areas (e.g. parcels of land, regions).
• Circles: a special form of polygon, based on a radius around a point.

These shapes can be stylized to better integrate with the map’s appearance and provide a better user experience.

2. Why customize styles?

Customizing vector shape styles enables you to ::

• Améliorer la lisibilité : Des couleurs et des épaisseurs de ligne distinctes aident à mieux visualiser les données.
• Adapter l’apparence à une charte graphique : Vous pouvez définir des couleurs, des bordures et des ombres spécifiques pour que la carte corresponde au style de votre projet.
• Mettre en valeur certaines zones ou itinéraires : Par exemple, vous pouvez utiliser une couleur différente pour un itinéraire conseillé ou une zone protégée.

3. How to customize styles

Leaflet lets you customize the styles of vector shapes using JavaScript objects. Here are examples for polylines, polygons and circles.

Example of polyline customization :

const polyline = L.polyline([
    [48.8566, 2.3522],  // Point de départ
    [48.8584, 2.2945],  // Point d'arrivée
], {
    color: 'blue',       // Couleur de la ligne
    weight: 4,           // Epaisseur de la ligne
    opacity: 0.7         // Opacité de la ligne
}).addTo(map);

Explanations of style options:

• color: defines the line color (here, blue).
• weight: specifies the line thickness (here, 4 pixels).
• opacity: sets the line opacity (here, 70%).

Example of polygon customization:

const polygon = L.polygon([
    [48.8566, 2.3522], 
    [48.8584, 2.2945], 
    [48.8600, 2.2920]
], {
    color: 'green',      // Couleur du contour
    fillColor: 'lightgreen',  // Couleur de remplissage
    fillOpacity: 0.5,    // Opacité du remplissage
    weight: 3            // Epaisseur du contour
}).addTo(map);

Explanations of style options:

color: outline color (here, green).

fillColor: fill color inside the polygon (here, light green).

fillOpacity: fill opacity (here, 50%).

weight: outline thickness (here, 3 pixels).

Example of how to customize a circle:

const circle = L.circle([48.8566, 2.3522], {
    radius: 500,        // Rayon du cercle en mètres
    color: 'red',       // Couleur du contour
    fillColor: 'red',   // Couleur de remplissage
    fillOpacity: 0.2,   // Opacité du remplissage
    weight: 2           // Epaisseur du contour
}).addTo(map);

Explanations of style options:

• radius: defines the radius of the circle (here, 500 meters).
• color: outline color (here, red).
• fillColor: fill color (here, light red).
• fillOpacity: fill opacity (here, 20%).
• weight: outline thickness (here, 2 pixels).

4.Dynamic style updates

It is also possible to dynamically modify the styles of a shape after it has been added to the map. For example, to change the color of a polygon on mouseover:

polygon.on('mouseover', function () {
    this.setStyle({
        color: 'orange',   // Nouvelle couleur du contour
        fillColor: 'yellow', // Nouvelle couleur de remplissage
    });
});
polygon.on('mouseout', function () {
    this.setStyle({
        color: 'green',    // Couleur de contour d'origine
        fillColor: 'lightgreen', // Couleur de remplissage d'origine
    });
});

5.Conditional styling

Styles can also be dynamically defined according to data. For example, you can color a polygon according to its population or type:

const getStyle = (feature) => {
    return {
        color: feature.properties.type === 'parc' ? 'green' : 'blue',
        fillColor: feature.properties.type === 'parc' ? 'lightgreen' : 'lightblue',
        weight: 2
    };
};

L.geoJSON(data, { style: getStyle }).addTo(map);

In this example, polygons representing parks will have a green outline and fill, while others will be blue.

Conclusion

Customizing vector shape styles in Leaflet makes maps more informative, visually appealing and tailored to the specific needs of your project. You can adjust parameters such as color, thickness and opacity to tailor shapes to your preferences or to the project’s graphic charter. You can even add dynamic interactions to further enhance the user experience.

Slide 3 : Additional controls to enhance the interface

Additional controls to enhance the interface

1. Introduction : Why add additional controls?

Leaflet offers a wide range of built-in controls to enhance map legibility and navigation. These controls make the interface more interactive and convenient, offering a better user experience. Among these controls, adding a scale, a mini-map and customizing the attribution are elements often used to enhance the map’s comprehensibility and professional appearance.

2. Add a scale

A scale control displays a graphical scale on the map, allowing users to see the actual distance corresponding to a portion of the map, while taking into account the zoom level.

Code to add scale :

L.control.scale().addTo(map);

Feature:

• The scale automatically adjusts to the zoom level of the map. For example, when zooming in on a smaller area, the scale will display a more precise unit of measurement (e.g. 100 meters instead of 10 km).
• It can display metric (meters, kilometers) or imperial (feet, miles) units, depending on user or map preferences.

Benefits:

• Accuracy: Users can quickly visualize the actual distance between two points.
• Accessibility: Improves the navigation experience for those unfamiliar with the map.

3. Add a mini-map

A mini-map is a reduced version of the main map that provides a quick overview of the geographical context, allowing the user to easily find their way around the area.

Code to add the mini-map :

const miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,  // Permet de basculer la mini-carte
    minimized: false      // Définit si la mini-carte est minimisée au départ
}).addTo(map);

Feature:

The mini-map is usually placed in a corner of the main map (often at the top left or right).

• It shows an overview of the map at a larger scale, allowing users to better situate themselves in relation to the overall area.
• Toggle option: users can choose to hide or show the mini-map at any time.

Benefits:

• Overview: Provides a global perspective on the map, while allowing users to zoom in and focus on specific areas.
• Accessibility: Helps users maintain an overview without losing their position on the main map.

Important note: Adding a mini-map requires installation of the Leaflet MiniMap plugin, which we’ll look at in the next slide.

4. Customize attribution

Attribution indicates the source of the data used to display the map, and is important for compliance with data licenses (e.g. OpenStreetMap). Leaflet provides a default attribution control, but it can be customized to display specific information.

Code to customize attribution :

map.attributionControl.setPrefix('');  // Retire le texte par défaut
map.attributionControl.addAttribution('Carte personnalisée © 2025');  // Ajoute une attribution personnalisée

Feature:

• You can modify or add additional attribution mentions, for example, a mention of your own map or a particular data source.
• This feature is useful for respecting the licenses of the data used (such as those of OpenStreetMap) or for adding a personalized attribution (for example, “Map made by [Your Name]”).

Benefits:

• License compliance: Ensures compliance with copyright and data licenses, such as those of OpenStreetMap.
• Personalization: Allows you to add an element of personalization or recognition for the map’s creators.

5. Summary of additional controls

• Scale: Displays a dynamic scale for measuring distances.
• Mini-map: Displays an overview in a corner of the main map for easy orientation.
• Attribution: Customize attribution to respect data licenses or add specific information.

Conclusion

The addition of a scale control, a mini-map and custom attribution are small improvements that make the interface more professional, informative and accessible. These controls are easy to implement with Leaflet, and their use greatly enhances the user experience by making the map more intuitive and compliant with best practice. These tools also help to respect the licenses of the geospatial data used, and offer smoother navigation.

Slide 4 : Installing and using the Leaflet MiniMap plugin

Installing and using the Leaflet MiniMap plugin

1. Introduction : What is a mini-map?

A mini-map is a reduced and usually interactive version of the main map, allowing the user to keep an overview of the geographical area while navigating on the main map. It is often placed in a corner of the main map, allowing the user to see his position in relation to the whole map and to move around more easily.

Mini-maps are particularly useful in applications where it is necessary to visualize a large area while still being able to zoom in on local details. They are frequently used in navigation maps, route maps or thematic maps.

2. Why use Leaflet MiniMap?

Although Leaflet doesn’t provide mini-maps as standard, you can easily add this functionality with the Leaflet MiniMap plugin. This plugin lets you add a small interactive map in a corner of the main map, while offering the option of zooming in and out.

Benefits of the mini-map:

• Overview: Allows the user to easily find their way around the entire area.
• Improved navigation: Users can quickly see the area they are in without losing their position on the main map.
• Clear interface: The mini-map offers a compact view that doesn’t interfere with the main map display.

3 Installing the Leaflet MiniMap plugin

Before you can use the Leaflet MiniMap plugin, you need to install it in your project. If you haven’t already included the plugin, here’s how to do it.

Add the plugin’s JavaScript file: You can include the MiniMap plugin by adding the corresponding JavaScript file to your project. Here’s the line you need to add to your HTML file to load the plugin from a CDN:

<script src=”https://unpkg.com/leaflet-minimap@3.0.0/leaflet-minimap.min.js”></script>

Add the plugin’s CSS file: The plugin also requires a CSS file for the MiniMap styles to display correctly. Add this line to your <head> tag:

<link rel=”stylesheet” href=”https://unpkg.com/leaflet-minimap@3.0.0/leaflet-minimap.css” />

4. Using the Leaflet MiniMap plugin

Once the plugin has been installed, you can easily add it to your Leaflet map. The following code shows how to integrate the mini-map into your project:

Example code for adding a mini-map :

// Définir la couche de la mini-carte (vous pouvez utiliser n'importe quelle carte de base)
const miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

// Créer un contrôle de mini-carte
const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,  // Permet d'afficher/masquer la mini-carte
    minimized: false      // Si la mini-carte est affichée de manière réduite au début
}).addTo(map);

Code explanation:

• L.tileLayer: We use a tile layer as a background for the mini-map. Here we use OpenStreetMap, but you can also use other tile services.
• L.Control.MiniMap: This control adds the mini-map to the main map.

  • toggleDisplay: This option allows the user to toggle between showing and hiding the mini-map using a button.
  • minimized: Determines whether the mini-map is minimized or fully displayed when the map is loaded.

5. Customizing the mini-map

The Leaflet MiniMap plugin offers several customization options to suit your specific needs. Here are just some of the options available:

• Positioning : You can choose where to display the mini-map (e.g. top right, bottom left, etc.). By default, it’s at the top right, but you can adjust its position with the position option.
• Zoom: You can also set the zoom level of the mini-map with the zoomLevel option if you want the mini-map to display a different zoom than the main map.
• Dimensions : By default, the mini-map is a fixed size, but you can adjust its size to suit your needs.

Here’s an example of customization:

const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,
    minimized: false,
    position: 'bottomright',   // Placer la mini-carte en bas à droite
    zoomLevel: 6,              // Niveau de zoom de la mini-carte
    width: 150,                // Largeur de la mini-carte
    height: 150                // Hauteur de la mini-carte
}).addTo(map);

6. Conclusion: The importance of the mini-map

Adding a mini-map to your Leaflet project enhances interaction and navigation on the map. It enables users to find their way around more easily and to see the whole area, while remaining focused on the local area of the main map. With the Leaflet MiniMap plugin, integrating this feature is quick and easy, while offering numerous customization options to suit your needs.

Summary

• Mini-map: Displays a reduced, interactive version of the main map for a quick overview.
• Installation: Load the JavaScript and CSS plugin into your project.
• Customization: Choose the position, zoom and size of the mini-map according to your preferences.
• Improved UX: The mini-map enhances the user experience by enabling fluid navigation and better spatial location.

This plugin is a great way to add usability to your Leaflet maps while giving users a practical tool for navigating and finding their way around large areas.

Slide 5:Zoom controls & custom buttons

1. Introduction: The importance of zoom controls

Zoom controls allow the user to adjust the scale of the map to explore in more detail or to get an overview. By default, Leaflet provides a zoom control at the top right of the map. However, it is possible to customize the appearance and functionality of these controls to best suit the needs of a project.

In addition to the standard zoom buttons, you can also add custom buttons to perform specific actions on the map, such as centering the map on a particular location, activating a drawing mode, or automatically zooming in on an area of interest.

2. Default zoom control

The default zoom control is simple and practical. It offers plus and minus buttons to zoom in and out, and a reset button to return to the default zoom level. Leaflet adds it automatically when the map is created, but you can configure it as you wish.

Code to add the default zoom control :

const map = L.map('map', {
    zoomControl: true // Active le contrôle de zoom par défaut
}).setView([48.8566, 2.3522], 13);  // Exemple avec Paris

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

Feature:

• Zoom in/out: Allows you to change the map scale to explore more or less detail.
• Reset: Allows you to return to an initial default zoom level.

Customize:

You can position the zoom control elsewhere on the map, or even remove it if you don’t need to.

3. Customize zoom buttons

By default, Leaflet offers a standard zoom button layout (top right). However, you can easily modify their appearance, position or even the buttons themselves to better match your project’s interface.

Code to move the zoom control :

L.control.zoom({
    position: 'bottomleft' // Place le contrôle de zoom en bas à gauche
}).addTo(map);

Available options:

• position: You can move the zoom control to the corners of the map, such as topright, topleft, bottomleft, or bottomright.
• zoomInText and zoomOutText: Customize the text of the buttons (for example, use icons rather than text).

4. Add custom buttons

In addition to zoom controls, Leaflet lets you add custom buttons to add specific functionality to the map, such as recentering the map on a location, changing layers or launching a drawing mode.

Example of a custom button for centering the map :

L.control.custom({
    position: 'topright',
    content: '<button>Recentrer</button>',
    onclick: function() {
        map.setView([48.8566, 2.3522], 13);  // Centrer sur Paris
    }
}).addTo(map);

Feature:

• You can define a button with text, an image or even an icon (for example, a button with a custom logo).
• When a user clicks on this button, you can associate a specific action, such as recentering the map, changing the zoom level, or making changes to the map.

Example of a button to activate a drawing mode:

You can add a button to activate the drawing or editing mode on the map, for example with Leaflet.draw, a plugin for drawing shapes (polygons, polylines, etc.).

const drawControl = new L.Control.Draw({
    draw: {
        polygon: true, // Permet de dessiner des polygones
        polyline: true  // Permet de dessiner des polylignes
    }
});
map.addControl(drawControl);

// Bouton personnalisé pour activer le mode de dessin
L.control.custom({
    position: 'topright',
    content: '<button>Dessiner</button>',
    onclick: function() {
        map.addControl(drawControl);  // Ajoute les outils de dessin à la carte
    }
}).addTo(map);

Benefits of custom buttons:

• Flexibility: You can associate any action with a button, such as displaying a message, changing layers, or interacting with the map in a unique way.
• Accessibility: Enhances ergonomics by offering additional functionality without overloading the map interface.

5. Combine zoom and custom buttons

You can easily combine default zoom controls with custom buttons to offer a richer, more interactive interface. For example, you could have a custom button to recenter the map, while keeping the classic zoom buttons.

Example of a combination of the two:

L.control.zoom({ position: 'bottomright' }).addTo(map); // Zoom classique

L.control.custom({
    position: 'topright',
    content: '<button>Recentrer</button>',
    onclick: function() {
        map.setView([48.8566, 2.3522], 13);  // Recentre sur Paris
    }
}).addTo(map);

advantages of this combination:

• Smooth navigation: Users can zoom in easily, while still having the option of adding custom actions.
• Intuitive interface: Offer the user more control without cluttering the interface.

6. Summary and best practices

• Zoom controls: Add, customize and position zoom controls to make navigation more fluid and intuitive.
• Custom buttons: Add buttons to perform specific actions on the map, such as recentering the map or changing layers.
• Accessibility and ergonomics: Combine zoom controls and custom buttons to enhance the user experience without overloading the interface.

Conclusion

Zoom controls and custom buttons are essential elements in making navigation on a Leaflet map more interactive and convenient. Not only do they allow users to adjust the scale of the map, they also offer the possibility of triggering specific actions using custom buttons. With these features, you can create map interfaces that are rich, accessible and well adapted to your specific needs.

Slide 6 : Adding widgets : Scale and custom legend

Adding widgets : Scale and custom legend

1. Introduction : What is a widget in Leaflet?

Widgets are user interface elements that add extra functionality and information to a Leaflet map. Among the most common widgets are scale and legend. These elements are essential for providing users with contextual information, such as distance (scale) or the meaning of colors and symbols (legend).

Leaflet makes it easy to add these widgets thanks to built-in, customizable controls.

2 Scale widget: display a dynamic scale

The scale widget displays a distance scale that dynamically adjusts according to the map’s zoom level. This allows the user to better understand the actual distance on the map, which is particularly useful in geolocation or thematic mapping applications.

Adding a scale to the map:

Leaflet provides an integrated control for adding a scale to the map, which is very easy to set up.

Sample code for adding a scale :

L.control.scale({
    metric: true,  // Affiche l'échelle en mètres et kilomètres
    imperial: false, // Désactive l'échelle en miles et yards
    maxWidth: 200  // Largeur maximale de l'échelle
}).addTo(map);

Code explanation :

• metric: If enabled, the scale will display distance in meters and kilometers.
• imperial: If enabled, the scale will display distance in miles and yards.
• maxWidth: Allows you to define the maximum width of the scale, useful for adjusting the display on screens of different sizes.
• Scale control is dynamic: it adjusts automatically when the user zooms in or out on the map. The more you zoom in, the smaller the distance represented by the scale segments becomes.

Scale benefits :

• Accuracy: Allows the user to accurately visualize distances on the map.
• Interactivity: The scale updates automatically as the map zooms, making it easy and intuitive to use.

Legend widget: display a custom legend

The legend is a very useful widget for explaining the meaning of colors, symbols or patterns used in a map. For example, if you have thematic layers (e.g. to display soil types, risk zones, etc.), a legend will help the user understand what each color or icon represents.

Add a legend to the map :

You can create a custom legend with HTML and add it to the map using L.control().

Sample code for adding a legend :

const legend = L.control({ position: 'bottomright' });

legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    const grades = [0, 10, 20, 30, 40];  // Plages de valeurs (ex : température)
    const labels = [];

    // Boucle pour générer les couleurs et labels de la légende
    for (let i = 0; i < grades.length; i++) {
        labels.push(
            '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] : '+')
        );
    }
    div.innerHTML = labels.join('<br>');
    return div;
};

legend.addTo(map);

// Fonction pour déterminer la couleur en fonction de la valeur
function getColor(d) {
    return d > 30 ? '#800026' :
           d > 20 ? '#BD0026' :
           d > 10 ? '#E31A1C' :
           d > 0  ? '#FC4E2A' :
                    '#FFEDA0';
}

Code explanation :

• L.control(): Creates a custom control for the legend and defines its position on the map (here bottom right).
• legend.onAdd: This function defines how the legend is generated. Here, we use ranges of values (grades) and associate each range with a color via the getColor() function.
• getColor(): This function returns a color according to the value (for example, a darker color for higher values).

Legend customization :

• Position: You can change the position of the legend by adjusting the value of the position option (for example, ‘topright’, ‘bottomleft’).
• Content: The legend can contain icons, text and even images, depending on your needs.
• Colors and symbols: You can customize the legend to match the cartography used (for example, associate specific zone colors with categories).

Legend benefits :

• Clarity: Helps make the map more understandable by explaining the symbols and colors used.
• Interactivity: It helps the user interpret the data on the map, which is essential when working with thematic maps.

4.Combining scale and legend

It’s common practice to add both a scale and a legend to a map, as these two widgets serve different but complementary purposes. While the scale provides an idea of actual distances, the legend helps to understand the data represented graphically.

Sample code for adding both :

L.control.scale({
    metric: true,
    imperial: false
}).addTo(map);

const legend = L.control({ position: 'bottomright' });
legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = '<i style="background:' + getColor(35) + '"></i> 35-40°C';
    return div;
};
legend.addTo(map);

Advantages of this combination:

• The user benefits from a complete overview with the ability to measure distances while having an explanation of the map data.
• This enhances the user experience by providing clear tools for interacting with the map.

5.Summary and best practices

• Scale Widget: Add a dynamic scale to allow users to easily visualize distances on the map. This is an essential tool for interactive maps.
• Legend widget: Use a legend to provide an explanation of symbols and colors, especially when working with complex thematic or geospatial data.
• Customization: Both widgets can be customized (colors, content, position) to match your project’s graphic style.
• Enhanced UX: These widgets enrich the map interface by offering additional information, making the map more interactive and easier to understand.

Conclusion

Adding scale and custom legend widgets to Leaflet enriches the user experience and makes the map more informative. The scale lets you measure distances in real time, while the legend provides clear explanations of the data represented. By combining these two elements, you can create a more professional, functional and accessible map.

Exercise: Thematic map with styles and legend

Objective: Create a complete map with custom visual elements and controls to enhance the user experience.

Instructions

• Create a map centered on an area of your choice
  → Choose a background map (e.g. OpenStreetMap, Esri, etc.)
• Add a GeoJSON layer representing thematic data
  → Ex.: natural areas, buildings, neighborhoods…
• Apply a conditional style (color according to a property)
• Create a custom legend to match styles
• Add markers with custom icons
  → For example, to locate points of interest

  • Add widgets :
    A scale
    A moving zoom control
    A custom button (e.g. recenter)

Bonus

• Add a mini-map for tracking purposes
• Add a dynamic popup for each zone/point

See the result in a new tab.

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois