Merge pull request #34

Leaflet.MarkerCluster Plugin Added

BlazorLeafletInterop/Components/Layers/Misc/GeoJson.cs

@@ -2,6 +2,7 @@
 using BlazorLeafletInterop.Models.Basics;
 using BlazorLeafletInterop.Models.Options.Layer.Misc;
 using BlazorLeafletInterop.Models.Options.Layer.Vector;
+using BlazorLeafletInterop.Plugins.Leaflet.MarkerCluster.Components;
 using GeoJSON.Text.Feature;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
@@ -17,6 +18,9 @@ public class GeoJson : FeatureGroup
     [Parameter] public Action<Feature?, IJSObjectReference>? OnEachFeature { get; set; }
     [Parameter] public Func<Feature?, bool>? Filter { get; set; }
 
+    [CascadingParameter(Name = "MarkerClusterGroup")]
+    public MarkerClusterGroup? MarkerClusterGroup { get; set; }
+
     [JSInvokable]
     public void OnEachFeatureCallback(string feature, IJSObjectReference layer)
     {
@@ -59,11 +63,11 @@ public bool FilterCallback(string feature)
 
     protected override async Task OnInitializedAsync()
     {
-        await base.OnInitializedAsync();
         DotNetRef = DotNetObjectReference.Create(this);
         JsObjectReference = await CreateGeoJson(Data, GeoJsonOptions.MarkersInheritOptions);
         if (Map is null || JsObjectReference is null) return;
-        await AddTo<GeoJson>(Map.MapRef, JsObjectReference);
+        if (MarkerClusterGroup is not null) await MarkerClusterGroup.AddLayer(JsObjectReference);
+        else await AddTo<GeoJson>(Map.MapRef, JsObjectReference);
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -73,6 +77,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (EachLayerCallbackSet) { EachLayerCallbackSet = false; return; }
         await ClearLayers();
         await AddData(Data);
+        if (MarkerClusterGroup is not null)
+        {
+            await MarkerClusterGroup.ClearLayers();
+            await MarkerClusterGroup.AddLayer(JsObjectReference);
+        }
     }
 
     public async Task<IJSObjectReference> CreateGeoJson(FeatureCollection geoJsonData, bool markersInheritOptions)

BlazorLeafletInterop/Plugins/Leaflet.MarkerCluster/Components/MarkerClusterGroup.razor

@@ -0,0 +1,32 @@
+@using BlazorLeafletInterop.Components.Layers.Misc
+@using BlazorLeafletInterop.Components.Layers.Misc;
+@using BlazorLeafletInterop.Plugins.Leaflet.MarkerCluster.Models.Options;
+@using Microsoft.AspNetCore.Components;
+@using Microsoft.JSInterop;
+
+@namespace BlazorLeafletInterop.Plugins.Leaflet.MarkerCluster.Components
+
+@inherits FeatureGroup
+
+<CascadingValue Name="MarkerClusterGroup" Value="@this">
+	@ChildContent	
+</CascadingValue>
+
+@code {
+	[Parameter]
+	public MarkerClusterGroupOptions Options { get; set; } = new();
+
+	protected override async Task OnInitializedAsync()
+	{
+		await base.OnInitializedAsync();
+		JsObjectReference = await CreateMarkerClusterGroup();
+		if (Map is null || JsObjectReference is null) return;
+		await AddTo<MarkerClusterGroup>(Map.MapRef, JsObjectReference);
+	}
+
+	private async Task<IJSObjectReference> CreateMarkerClusterGroup()
+	{
+		var module = await LayerFactory.GetModule();
+		return await module.InvokeAsync<IJSObjectReference>("createMarkerClusterGroup", Options);
+	}
+}

BlazorLeafletInterop/Plugins/Leaflet.MarkerCluster/Models/Options/MarkerClusterGroupOptions.cs

@@ -0,0 +1,18 @@
+namespace BlazorLeafletInterop.Plugins.Leaflet.MarkerCluster.Models.Options;
+
+public class MarkerClusterGroupOptions
+{
+    public int MaxClusterRadius { get; set; } = 80;
+    public bool SpiderfyOnEveryZoom { get; set; } = true;
+    public bool ShowCoverageOnHover { get; set; } = true;
+    public bool ZoomToBoundsOnClick { get; set; } = true;
+    public bool SingleMarkerMode { get; set; } = false;
+    public int? DisableClusteringAtZoom { get; set; } = null;
+    public bool RemoveOutsideVisibleBounds { get; set; } = true;
+    public bool Animate { get; set; } = true;
+    public bool AnimateAddingMarkers { get; set; } = false;
+    public int SpiderfyDistanceMultiplier { get; set; } = 1;
+    public bool ChunkedLoading { get; set; } = true;
+    public int ChunkInterval { get; set; } = 200;
+    public int ChunkDelay { get; set; } = 50;
+}

BlazorLeafletInterop/TypeScript/Plugins/leaflet-markercluster.ts

@@ -0,0 +1,5 @@
+import type * as L from "leaflet";
+export function createMarkerClusterGroup(options: L.MarkerClusterGroupOptions): L.MarkerClusterGroup {
+    // @ts-ignore
+    return L.markerClusterGroup(options);
+}

BlazorLeafletInterop/TypeScript/index.ts

@@ -13,6 +13,7 @@ export * from "./map";
 export * from "./vectorLayer";
 export * from "./control"
 export * from "./Plugins/leaflet-minimap";
+export * from "./Plugins/leaflet-markercluster";
 
 export function getLatLng(divOverlay: L.DivOverlay | L.Marker): string {
     return JSON.stringify(divOverlay.getLatLng());

BlazorLeafletInterop/package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@types/blazor__javascript-interop": "^3.1.6",
     "@types/leaflet": "^1.9.6",
+    "@types/leaflet.markercluster": "^1.5.4",
     "esbuild": "^0.19.4",
     "typescript": "^5.2.2"
   },

ExampleApp/Pages/GeoJsonTest.razor

@@ -5,14 +5,17 @@
 @using BlazorLeafletInterop.Components
 @using BlazorLeafletInterop.Components.Layers.Raster
 @using BlazorLeafletInterop.Components.Layers.Misc
+@using BlazorLeafletInterop.Plugins.Leaflet.MarkerCluster.Components
 @using BlazorLeafletInterop.Models.Basics
 @using GeoJSON.Text.Feature
 @using GeoJSON.Text.Geometry
 @using Point = GeoJSON.Text.Geometry.Point
 
 <Map @ref="Map" Class="map" MapOptions="Options">
 	<TileLayer @ref="TileLayer" UrlTemplate="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-	<GeoJson @ref="GeoJsonLayer" Data="FeatureCollection" OnEachFeature="_onEachFeature" />
+	<MarkerClusterGroup>
+		<GeoJson @ref="GeoJsonLayer" Data="FeatureCollection" OnEachFeature="_onEachFeature" />
+	</MarkerClusterGroup>
 </Map>
 <div style="position: absolute; top: 5%; left: 5%; z-index: 10000; background-color: aquamarine; padding: 10px; border-radius: 10px;">
 	<h3>Blazor Leaflet Interop GeoJson Test</h3>

ExampleApp/wwwroot/index.html

@@ -7,14 +7,14 @@
     <base href="/" />
     <link href="css/app.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.css" integrity="sha512-efbAfGnrnjA+hLwOLu91W034fBGPsMwZMVCTwLUI2PDX/m7rOiuhYZ+D2mZ8rKcpC/I/7pdgoL8T4eYvMHNoQg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <!-- If you add any scoped CSS files, uncomment the following to load them
-    <link href="ExampleApp.styles.css" rel="stylesheet" /> -->
 </head>
 
 <body>
     <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.min.js" integrity="sha512-WL3nAJlWFKoDShduxQRyY3wkBnQsINXdIfWIW48ZaPgYz1wYNnxIwFMMgigzSgjNBC2WWZ8Y8/sSyUU6abuF0g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
     <div id="app">Loading...</div>
 
     <div id="blazor-error-ui">