LgLeafletMap

LgLeafletMap affiche une carte Leaflet dans une application Lagoon. Le composant Blazor rend uniquement le conteneur ; toutes les interactions avec la carte, les couches, les marqueurs, les dessins, la géolocalisation, les contrôles de recherche et les itinéraires passent par l'objet LeafletMap fourni au paramètre Map.

<LgLeafletMap Map="@_map" CssClass="leaflet-map" />

Espace de noms : Lagoon.UI.Leaflet.Components
Hérite de : LgComponentBase
Package NuGet : Lagoon.UI.Leaflet

Module séparé

LgLeafletMap n'est pas dans le package principal Lagoon.UI. Ajoutez le module Lagoon.UI.Leaflet au projet client, puis référencez le script d'initialisation :

<script src="_content/Lagoon.UI.Leaflet/js/app-init.js"></script>

Ce script charge les ressources Leaflet embarquées : Leaflet, Leaflet Draw, Geocoder, Routing Machine, Overpass Layer et MarkerCluster, avec leurs feuilles de style.

Taille obligatoire

Le composant occupe 100% de son conteneur interne. La classe transmise par CssClass doit donc définir au moins une hauteur.

Démonstration

Essayez ce composant dans le showcase Lagoon.

Installation / intégration

Ajoutez une référence au package ou au projet Lagoon.UI.Leaflet dans l'application cliente.
Ajoutez le script _content/Lagoon.UI.Leaflet/js/app-init.js dans la page hôte de l'application.
Importez les espaces de noms utilisés par la carte :
- Lagoon.UI.Leaflet.Components
- Lagoon.UI.Leaflet.Components.Models
Si les tuiles, le routage ou Overpass appellent des services externes, autorisez leurs domaines dans la CSP de l'application.

Exemple pour des tuiles OpenStreetMap :

{
  "CSP": {
    "img-src-add": "https://a.tile.openstreetmap.org"
  }
}

Les URL de tuiles OpenStreetMap, OSRM, MapBox ou Overpass sont des services externes : elles ne constituent pas un endpoint applicatif Lagoon.

Utilisation

Carte simple avec tuiles et marqueurs

LeafletDemoPage.razor
@inherits LgPage
@using Lagoon.UI.Leaflet.Components
@using Lagoon.UI.Leaflet.Components.Models

<LgLeafletMap Map="@_map" CssClass="leaflet-map" />

<LgButton Text="#LeafletPanToParis" OnClick="PanToParis" />
<LgButton Text="#LeafletLocateMe" OnClick="LocateUser" />

<style>
  .leaflet-map {
    height: 600px;
  }
</style>

LeafletDemoPage.razor.cs
using System.Drawing;
using Lagoon.UI.Leaflet.Components;
using Lagoon.UI.Leaflet.Components.Models;

public partial class LeafletDemoPage : LgPage
{
    // Instance pilotée par le composant ; elle centralise les couches et les appels JS Leaflet.
    private LeafletMap _map;

    // Coordonnées initiales affichées au premier rendu de la carte.
    private readonly LatLng _initialCenter = new(46.227638f, 2.213749f);

    protected override void OnInitialized()
    {
        _map = new LeafletMap(JS)
        {
            Center = _initialCenter,
            Zoom = 5,
            MinZoom = 3,
            MaxZoom = 18,
        };

        // Attend que Leaflet soit créé côté JavaScript avant d'ajouter des couches.
        _map.OnInitialized += InitializeMapLayers;
    }

    // Ajoute les tuiles et les marqueurs après l'initialisation réelle de la carte.
    private void InitializeMapLayers()
    {
        TileLayer openStreetMap = new()
        {
            UrlTemplate = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
            Attribution = "&copy; OpenStreetMap contributors",
        };

        _map.AddLayer(openStreetMap);
        _map.AddBaseLayer(openStreetMap.Id, "OpenStreetMap");

        Marker marker = new(new PointF(48.8566f, 2.3522f))
        {
            Tooltip = new Tooltip { Content = "#LeafletParisTooltip" },
            Popup = new Popup { Content = "#LeafletParisPopup" },
        };

        _map.AddLayer(marker);
    }

    // Déplace la vue vers Paris avec une animation Leaflet.
    private void PanToParis()
    {
        _map.PanTo(new PointF(48.8566f, 2.3522f), animate: true, duration: 1.5f);
    }

    // Demande la position navigateur ; le résultat arrive dans l'événement OnLocationFound.
    private void LocateUser()
    {
        _map.Locate(setView: true, maxZoom: 16);
    }
}

Dessin et GeoJSON

AddDrawControl() ajoute la barre d'outils Leaflet Draw. Les dessins créés, modifiés ou supprimés sont remontés par OnDrawCreated, OnDrawEdited et OnDrawDeleted. ToGeoJSON(string layerId) sérialise une couche existante.

LeafletDrawPage.razor.cs
using Lagoon.UI.Leaflet.Components;
using Lagoon.UI.Leaflet.Components.Models;

public partial class LeafletDrawPage : LgPage
{
    // Carte utilisée pour activer le dessin et récupérer les couches produites par l'utilisateur.
    private LeafletMap _map;

    // Dernier GeoJSON extrait d'une couche dessinée.
    private string _lastGeoJson;

    protected override void OnInitialized()
    {
        _map = new LeafletMap(JS)
        {
            Center = new LatLng(46.227638f, 2.213749f),
            Zoom = 5,
        };

        // Les contrôles et événements de dessin ne sont disponibles qu'après le premier rendu Leaflet.
        _map.OnInitialized += InitializeDrawTools;
    }

    // Active Leaflet Draw et abonne les événements de création, modification et suppression.
    private void InitializeDrawTools()
    {
        _map.AddDrawControl();
        _map.OnDrawCreated += OnDrawCreated;
        _map.OnDrawEdited += OnDrawEdited;
        _map.OnDrawDeleted += OnDrawDeleted;
    }

    // Conserve la nouvelle couche et extrait immédiatement sa représentation GeoJSON.
    private void OnDrawCreated(LeafletMap sender, Layer createdLayer)
    {
        _lastGeoJson = sender.ToGeoJSON(createdLayer.Id);
    }

    // Parcourt les couches modifiées pour récupérer le dernier état GeoJSON.
    private void OnDrawEdited(LeafletMap sender, List<Layer> editedLayers)
    {
        if (editedLayers.Count > 0)
        {
            _lastGeoJson = sender.ToGeoJSON(editedLayers[0].Id);
        }
    }

    // Nettoie l'état local quand les couches dessinées sont supprimées.
    private void OnDrawDeleted(LeafletMap sender, List<Layer> deletedLayers)
    {
        _lastGeoJson = null;
    }
}

Recherche, itinéraires et Overpass

AddSearchControl() ajoute le contrôle de recherche d'adresse.
AddOsrmRoutingControl(RoutingControlOptions) ajoute un itinéraire via OSRM.
AddMapBoxRoutingControl(string accessToken, RoutingControlOptions) ajoute un itinéraire MapBox.
AddOverPassLayer(string query, string endPoint = "https://overpass-api.de/api/") ajoute le résultat d'une requête Overpass QL.
GetDataFromOverpassAPIAsync(string query) renvoie le résultat Overpass au format JSON.

LeafletRoutingPage.razor.cs
using Lagoon.UI.Leaflet.Components.Models;

public partial class LeafletRoutingPage : LgPage
{
    // Carte initialisée ailleurs dans la page ; les méthodes ci-dessous ajoutent des contrôles externes.
    private LeafletMap _map;

    // Ajoute un calcul d'itinéraire OSRM entre Rennes et Nantes.
    private void AddOsrmRoutingControl()
    {
        _map.AddOsrmRoutingControl(new RoutingControlOptions
        {
            Collapsible = true,
            Waypoints = new[]
            {
                new LatLng(48.117266f, -1.6777926f),
                new LatLng(47.218371f, -1.553621f),
            },
            Router = new Router
            {
                ServiceUrl = "https://router.project-osrm.org/route/v1",
                Profile = "driving",
            },
        });
    }

    // Ajoute les hôpitaux proches d'Aix-en-Provence depuis Overpass.
    private void AddHospitalsLayer()
    {
        _map.AddOverPassLayer("[out:json][timeout:25];nwr(around:10000,43.529742,5.447427)[\"amenity\"=\"hospital\"];out center;");
    }
}

Clusters de marqueurs

MarkerClusterGroup est une couche Leaflet gérée par le même composant. Elle regroupe des Marker, peut recevoir des marqueurs dynamiquement et expose des événements de cluster.

LeafletClusterPage.razor.cs
using System.Drawing;
using Lagoon.UI.Leaflet.Components.Models;

public partial class LeafletClusterPage : LgPage
{
    // Groupe de clusters conservé pour ajouter ou retirer des marqueurs après le rendu.
    private MarkerClusterGroup _clusterGroup;

    // Ajoute le groupe de clusters à la carte après l'initialisation Leaflet.
    private void AddClusterGroup(LeafletMap map)
    {
        _clusterGroup = new MarkerClusterGroup
        {
            Options = new MarkerClusterOptions
            {
                IncludeClusterBoundsInEvents = true,
                IncludeTargetZoomInEvents = true,
                IconPreset = ClusterIconPreset.SmallMediumLarge,
            },
        };

        _clusterGroup.Markers.Add(new Marker(new PointF(48.8566f, 2.3522f))
        {
            Tooltip = new Tooltip { Content = "#LeafletParisTooltip" },
        });

        _clusterGroup.OnClusterClick += OnClusterClick;
        map.AddLayer(_clusterGroup);
    }

    // Réagit au clic sur un cluster ; ChildCount vient du plugin MarkerCluster.
    private void OnClusterClick(MarkerClusterGroup sender, MarkerClusterGroup.ClusterEventArgs e)
    {
        ShowInformation("#LeafletClusterClicked");
    }

    // Ajoute un marqueur au groupe déjà attaché à la carte.
    private void AddMarkerToCluster()
    {
        Marker marker = new(new PointF(45.7640f, 4.8357f))
        {
            Tooltip = new Tooltip { Content = "#LeafletLyonTooltip" },
        };

        _clusterGroup.AddMarker(JS, marker);
    }
}

API du composant

Propriété	Type	Défaut	Description
`CssClass`	`string`	`null`	Classe CSS ajoutée au conteneur externe du composant.
`Map`	`LeafletMap`	`null`	Instance utilisée pour créer la carte et piloter Leaflet.

Aucun événement n'est exposé directement par LgLeafletMap. Les événements sont portés par LeafletMap et par les couches.

Objet `LeafletMap`

Propriétés

Propriété	Type	Défaut	Description
`Center`	`LatLng`	`new LatLng()`	Centre géographique initial.
`Zoom`	`float`	`0`	Zoom initial.
`MinZoom`	`float?`	`null`	Zoom minimal autorisé.
`MaxZoom`	`float?`	`null`	Zoom maximal autorisé.
`MaxBounds`	`LatLngBound`	`null`	Limites géographiques de navigation.
`ZoomControl`	`bool`	`true`	Indique si le contrôle de zoom Leaflet est ajouté.
`Id`	`string`	généré	Identifiant technique utilisé par l'interopérabilité JavaScript.

Méthodes principales

Méthode	Description
`AddLayer(Layer layer)`	Ajoute une couche à la carte après l'initialisation.
`RemoveLayer(Layer layer)`	Retire une couche existante.
`GetLayers()`	Renvoie les couches actuellement connues côté .NET.
`FitBounds(PointF corner1, PointF corner2, PointF? padding = null, float? maxZoom = null)`	Ajuste la vue pour contenir deux coins géographiques.
`PanTo(PointF position, bool animate = false, float duration = 0.25f, float easeLinearity = 0.25f, bool noMoveStart = false)`	Déplace le centre de la carte.
`GetCenter()`	Lit le centre courant depuis Leaflet.
`GetZoom()`	Lit le zoom courant depuis Leaflet.
`ZoomIn(MouseEventArgs e)`	Augmente le zoom.
`ZoomOutAsync(MouseEventArgs e)`	Diminue le zoom.
`Locate(...)`	Lance la géolocalisation navigateur.
`StopLocate()`	Arrête la géolocalisation en mode suivi.
`AddDrawControl()`	Ajoute la barre d'outils de dessin.
`AddSearchControl()`	Ajoute le contrôle de recherche.
`AddOsrmRoutingControl(RoutingControlOptions routingControlOptions)`	Ajoute un contrôle de routage OSRM.
`AddMapBoxRoutingControl(string accessToken, RoutingControlOptions routingControlOptions)`	Ajoute un contrôle de routage MapBox.
`ToGeoJSON(string layerId)`	Renvoie la représentation GeoJSON d'une couche.
`SetMaxBounds(LatLngBound bounds)`	Définit les limites de navigation.
`AddBaseLayer(string layerId, string name)`	Ajoute une couche de base dans le sélecteur de couches.
`AddOverlay(string layerId, string name)`	Ajoute une superposition dans le sélecteur de couches.
`AddOverPassLayer(string query, string endPoint = "https://overpass-api.de/api/")`	Ajoute une couche issue d'Overpass QL.
`GetDataFromOverpassAPIAsync(string query)`	Appelle Overpass et renvoie le JSON brut.

Événements de carte

Événement	Type	Description
`OnInitialized`	`Action`	Déclenché après le premier rendu et la création de la carte côté JavaScript.
`OnZoomLevelsChange`	`MapEventHandler`	Déclenché lorsque les niveaux de zoom changent.
`OnResize`	`MapResizeEventHandler`	Déclenché lors du redimensionnement de la carte.
`OnUnload`	`MapEventHandler`	Déclenché lors du déchargement de la carte.
`OnViewReset`	`MapEventHandler`	Déclenché lors de la réinitialisation de la vue.
`OnLoad`	`MapEventHandler`	Déclenché lorsque la carte est chargée.
`OnZoomStart`	`MapEventHandler`	Déclenché au début d'un zoom.
`OnMoveStart`	`MapEventHandler`	Déclenché au début d'un déplacement.
`OnZoom`	`MapEventHandler`	Déclenché pendant un zoom.
`OnMove`	`MapEventHandler`	Déclenché pendant un déplacement.
`OnZoomEnd`	`MapEventHandler`	Déclenché à la fin d'un zoom.
`OnMoveEnd`	`MapEventHandler`	Déclenché à la fin d'un déplacement.
`OnMouseMove`	`MouseEventHandler`	Déclenché lors du déplacement de la souris sur la carte.
`OnKeyPress`	`MapEventHandler`	Déclenché lors d'une touche produisant un caractère.
`OnKeyDown`	`MapEventHandler`	Déclenché lors de l'appui sur une touche.
`OnKeyUp`	`MapEventHandler`	Déclenché lors du relâchement d'une touche.
`OnPreClick`	`MouseEventHandler`	Déclenché avant le clic Leaflet.
`OnClick`	`MouseEventHandler`	Déclenché lors d'un clic sur la carte.
`OnDblClick`	`MouseEventHandler`	Déclenché lors d'un double-clic.
`OnMouseDown`	`MouseEventHandler`	Déclenché lors de l'appui souris.
`OnMouseUp`	`MouseEventHandler`	Déclenché lors du relâchement souris.
`OnMouseOver`	`MouseEventHandler`	Déclenché lorsque la souris entre dans la carte.
`OnMouseOut`	`MouseEventHandler`	Déclenché lorsque la souris quitte la carte.
`OnContextMenu`	`MouseEventHandler`	Déclenché lors du menu contextuel Leaflet.
`OnLocationFound`	`LocationEventHandler`	Déclenché lorsque la géolocalisation réussit.
`OnDrawCreated`	`DrawCreatedEventHandler`	Déclenché lorsqu'une couche est dessinée.
`OnDrawEdited`	`DrawEditedEventHandler`	Déclenché lorsqu'une ou plusieurs couches sont modifiées.
`OnDrawDeleted`	`DrawDeletedEventHandler`	Déclenché lorsqu'une ou plusieurs couches sont supprimées.

Couches prises en charge

AddLayer accepte les types suivants :

Couche	Usage
`TileLayer`	Tuiles raster via `UrlTemplate`, attribution et bornes de zoom.
`MbTilesLayer`	Tuiles MBTiles.
`ShapefileLayer`	Données Shapefile.
`Marker`	Marqueur ponctuel avec icône, popup et tooltip.
`Rectangle`	Rectangle vectoriel.
`Circle`	Cercle vectoriel avec centre et rayon.
`Polygon`	Polygone vectoriel.
`Polyline`	Ligne vectorielle.
`ImageLayer`	Image géoréférencée.
`GeoJsonDataLayer`	Couche créée depuis une chaîne GeoJSON.
`MarkerClusterGroup`	Groupe de marqueurs clusterisés.

Les couches héritent de Layer, qui fournit Id, Pane, Attribution, Tooltip, Popup et les événements OnAdd, OnRemove, OnPopupOpen, OnPopupClose, OnTooltipOpen, OnTooltipClose. Les couches interactives héritent aussi de InteractiveLayer, qui fournit IsInteractive, IsBubblingMouseEvents et les événements souris usuels.

Options de routage

Propriété	Type	Défaut	Description
`RoutingControlOptions.Waypoints`	`LatLng[]`	`null`	Points de passage initiaux.
`RoutingControlOptions.Router`	`Router`	`new Router()`	Routeur utilisé pour calculer les itinéraires.
`RoutingControlOptions.Collapsible`	`bool?`	`null`	Affiche ou non le bouton de repli du contrôle.
`RoutingControlOptions.ShowAlternatives`	`bool`	`false`	Affiche les itinéraires alternatifs lorsqu'ils existent.
`Router.ServiceUrl`	`string`	`https://router.project-osrm.org/route/v1`	URL du service de routage.
`Router.Timeout`	`float`	`30000`	Délai maximal du calcul d'itinéraire en millisecondes.
`Router.Profile`	`string`	`driving`	Profil OSRM utilisé.
`Router.PolylinePrecision`	`float`	`5`	Précision de décodage des polylignes.
`Router.UseHints`	`bool`	`false`	Indique si les hints sont envoyés au service.

Clusters

Options

Propriété	Type	Défaut	Description
`ShowCoverageOnHover`	`bool`	`true`	Affiche le polygone de couverture au survol.
`ZoomToBoundsOnClick`	`bool`	`true`	Zoome sur les limites du cluster au clic.
`SpiderfyOnMaxZoom`	`bool`	`true`	Déplie le cluster au zoom maximal.
`MaxClusterRadius`	`int?`	`null`	Rayon maximal d'un cluster.
`MaxClusterRadiusFunction`	`string`	`null`	Nom d'une fonction JavaScript globale calculant le rayon.
`IconCreateFunction`	`string`	`null`	Nom d'une fonction JavaScript globale créant l'icône.
`IconPreset`	`ClusterIconPreset`	`None`	Preset d'icône intégré.
`CustomIcons`	`List<ClusterIconRange>`	`null`	Plages personnalisées pour générer les icônes.
`PolygonOptions`	`ClusterPolygonOptions`	`null`	Style du polygone de couverture.
`DisableClusteringAtZoom`	`int?`	`null`	Zoom à partir duquel les marqueurs ne sont plus groupés.
`SingleMarkerMode`	`bool?`	`null`	Affiche les marqueurs isolés avec une icône de cluster.
`SpiderfyOnEveryZoom`	`bool?`	`null`	Conserve l'état déplié pendant les zooms.
`SpiderfyDistanceMultiplier`	`double?`	`null`	Multiplie l'écart entre les marqueurs dépliés.
`RemoveOutsideVisibleBounds`	`bool?`	`null`	Retire les clusters hors vue pour les performances.
`Animate`	`bool?`	`null`	Anime les transitions de cluster.
`AnimateAddingMarkers`	`bool?`	`null`	Anime l'ajout individuel de marqueurs.
`ChunkedLoading`	`bool?`	`null`	Active le chargement progressif des marqueurs.
`ChunkInterval`	`int?`	`null`	Durée d'un chunk en millisecondes.
`ChunkDelay`	`int?`	`null`	Pause entre deux chunks en millisecondes.
`SpiderLegPolylineOptions`	`ClusterSpiderLegPolylineOptions`	`null`	Style des jambes de spiderfy.
`SpiderfyShapePositionsFunction`	`string`	`null`	Nom d'une fonction JavaScript globale pour la position spiderfy.
`IncludeClusterBoundsInEvents`	`bool`	`false`	Ajoute les limites du cluster aux arguments d'événement.
`IncludeChildMarkerIdsInEvents`	`bool`	`false`	Ajoute les identifiants des marqueurs enfants aux arguments d'événement.
`IncludeTargetZoomInEvents`	`bool`	`false`	Ajoute le zoom cible aux arguments d'événement.

Méthodes et événements

Membre	Type	Description
`Markers`	`List<Marker>`	Marqueurs contenus dans le groupe.
`Options`	`MarkerClusterOptions`	Options du plugin MarkerCluster.
`AddMarker(IJSInProcessRuntime jsRuntime, Marker marker)`	méthode	Ajoute un marqueur dynamiquement.
`RemoveMarker(IJSInProcessRuntime jsRuntime, string markerId)`	méthode	Retire un marqueur dynamiquement.
`Clear(IJSInProcessRuntime jsRuntime)`	méthode	Vide le groupe.
`OnChunkProgress`	événement	Déclenché pendant le chargement progressif.
`OnClusterClick`	événement	Déclenché lors du clic sur un cluster.
`OnClusterMouseOver`	événement	Déclenché quand la souris entre dans un cluster.
`OnClusterMouseOut`	événement	Déclenché quand la souris quitte un cluster.
`OnClusterAnimationEnd`	événement	Déclenché à la fin d'une animation de cluster.
`OnClusterSpiderfied`	événement	Déclenché après le dépliage d'un cluster.
`OnClusterUnspiderfied`	événement	Déclenché après le repliage d'un cluster.

Énumérations associées

ClusterIconPreset

ClusterIconPreset n'est pas décorée avec [Flags].

Valeur	Description
`None`	Aucun preset : le comportement par défaut du plugin ou `IconCreateFunction` est utilisé.
`SmallMediumLarge`	Style standard basé sur des seuils petit, moyen et grand.

Interopérabilité JavaScript

LgLeafletMap crée une référence .NET vers l'objet Map au premier rendu et appelle window.leafletBlazor.create. Les actions suivantes passent ensuite par LgLeafletInterops : création de la carte, ajout ou suppression de couches, zoom, déplacement, géolocalisation, dessin, recherche, routage, Overpass et clusters. Les callbacks JavaScript appellent les méthodes [JSInvokable] des objets .NET pour déclencher les événements listés ci-dessus.

Démonstration​

Installation / intégration​

Utilisation​

Carte simple avec tuiles et marqueurs​

Dessin et GeoJSON​

Recherche, itinéraires et Overpass​

Clusters de marqueurs​

API du composant​

Objet LeafletMap​

Propriétés​

Méthodes principales​

Événements de carte​

Couches prises en charge​

Options de routage​

Clusters​

Options​

Méthodes et événements​

Énumérations associées​

ClusterIconPreset​

Interopérabilité JavaScript​