Feature. Add AdvancedMarkerElement Clustering #348

rungwiroon · Jul 29, 2024 · 86b707f · 86b707f
1 parent 0d5a478
commit 86b707f
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 29 deletions.
diff --git a/GoogleMapsComponents/GoogleMapsComponents.csproj b/GoogleMapsComponents/GoogleMapsComponents.csproj
@@ -15,7 +15,7 @@
 		<RazorLangVersion>3.0</RazorLangVersion>
 		<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
 		<PackageId>BlazorGoogleMaps</PackageId>
-		<Version>4.7.2</Version>
+		<Version>4.7.3</Version>
 		<Authors>Rungwiroon</Authors>
 		<Company>QueueStack Solution</Company>
 		<Product>BlazorGoogleMaps</Product>

diff --git a/GoogleMapsComponents/Maps/MarkerClustering.cs b/GoogleMapsComponents/Maps/MarkerClustering.cs
@@ -2,7 +2,6 @@
 using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
-using System.Linq;
 using System.Threading.Tasks;
 
 // ReSharper disable UnusedMember.Global
@@ -15,8 +14,6 @@ namespace GoogleMapsComponents.Maps;
 public class MarkerClustering : EventEntityBase, IJsObjectRef
 {
     public Guid Guid => _jsObjectRef.Guid;
-    private Map _map;
-    private readonly IEnumerable<Marker> _originalMarkers;
 
     public static async Task<MarkerClustering> CreateAsync(
         IJSRuntime jsRuntime,
@@ -30,14 +27,28 @@ public static async Task<MarkerClustering> CreateAsync(
         var guid = Guid.NewGuid();
         var jsObjectRef = new JsObjectRef(jsRuntime, guid);
         await jsRuntime.InvokeVoidAsync("blazorGoogleMaps.objectManager.createClusteringMarkers", guid.ToString(), map.Guid.ToString(), markers, options);
-        var obj = new MarkerClustering(jsObjectRef, map, markers);
+        var obj = new MarkerClustering(jsObjectRef);
         return obj;
     }
 
-    internal MarkerClustering(JsObjectRef jsObjectRef, Map map, IEnumerable<Marker> markers) : base(jsObjectRef)
+    public static async Task<MarkerClustering> CreateAsync(
+        IJSRuntime jsRuntime,
+        Map map,
+        IEnumerable<AdvancedMarkerElement> advancedMarkerElements,
+        MarkerClustererOptions? options = null
+    )
+    {
+        options ??= new MarkerClustererOptions();
+
+        var guid = Guid.NewGuid();
+        var jsObjectRef = new JsObjectRef(jsRuntime, guid);
+        await jsRuntime.InvokeVoidAsync("blazorGoogleMaps.objectManager.createClusteringMarkers", guid.ToString(), map.Guid.ToString(), advancedMarkerElements, options);
+        var obj = new MarkerClustering(jsObjectRef);
+        return obj;
+    }
+
+    internal MarkerClustering(JsObjectRef jsObjectRef) : base(jsObjectRef)
     {
-        _map = map;
-        _originalMarkers = markers;
     }
 
     /// <summary>
@@ -57,7 +68,6 @@ public virtual async Task AddMarkers(IEnumerable<Marker>? markers, bool noDraw =
 
     public virtual async Task SetMap(Map map)
     {
-        _map = map;
         await _jsObjectRef.InvokeAsync("setMap", map);
     }
 
@@ -77,22 +87,6 @@ public virtual async Task ClearMarkers(bool noDraw = false)
         await _jsObjectRef.InvokeAsync("clearMarkers", noDraw);
     }
 
-    /// <summary>
-    /// Fits the map to the bounds of the markers managed by the clusterer.
-    /// </summary>
-    /// <param name="padding"></param>
-    [Obsolete("Deprecated: Center map based on unclustered Markers before clustering. Latest js-markerclusterer lib doesn't support this. Workaround is slow. ")]
-    public virtual async Task FitMapToMarkers(int padding)
-    {
-        var newBounds = new LatLngBoundsLiteral(await _originalMarkers.First().GetPosition());
-        foreach (var marker in _originalMarkers)
-        {
-            newBounds.Extend(await marker.GetPosition());
-        }
-
-        await _map.FitBounds(newBounds, padding);
-    }
-
     /// <summary>
     /// https://googlemaps.github.io/js-markerclusterer/interfaces/Renderer.html#render
     /// </summary>

diff --git a/ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor b/ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor
@@ -12,6 +12,7 @@
 <button @onclick="@UpdateContent">Update content</button>
 <button @onclick="@AddMarkerWithPinElement">Add marker with pin element</button>
 <button @onclick="GetMarkerPosition">Get advanced markers position</button>
+<button @onclick="InvokeClustering">Invoke Clustering</button>
 <br/>
 <p>Marker list</p>
 <button @onclick="AddMarker1">Add advanced markers part 1</button>
@@ -299,4 +300,69 @@
         _events.Add($"Marker position {position.Lat} {position.Lng}");
         StateHasChanged();
     }
+
+    private async Task InvokeClustering()
+    {
+        var coordinates = GetClusterCoordinates();
+
+        var markers = await GetMarkers(coordinates, _map1.InteropObject);
+
+        var markerClustering = await MarkerClustering.CreateAsync(_map1.JsRuntime, _map1.InteropObject, markers, new()
+            {
+                //RendererObjectName = "customRendererLib.interpolatedRenderer",
+                ZoomOnClick = true,
+            });
+
+        //await markerClustering.FitMapToMarkers(1);
+    }
+
+    private async Task<IEnumerable<AdvancedMarkerElement>> GetMarkers(ICollection<LatLngLiteral> coords, Map map)
+    {
+        var result = new List<AdvancedMarkerElement>(coords.Count());
+        var index = 1;
+        foreach (var latLngLiteral in coords)
+        {
+            var marker = await AdvancedMarkerElement.CreateAsync(_map1.JsRuntime, new AdvancedMarkerElementOptions()
+                {
+                    Position = latLngLiteral,
+                    Map = _map1.InteropObject,
+                    Content = index.ToString()
+                });
+
+            result.Add(marker);
+        }
+
+
+        return result;
+    }
+
+    private static List<LatLngLiteral> GetClusterCoordinates()
+    {
+        return new List<LatLngLiteral>()
+        {
+            new() { Lng = 147.154312, Lat = -31.56391},
+            new() { Lng = 150.363181, Lat = -33.718234},
+            new() { Lng = 150.371124, Lat = -33.727111},
+            new() { Lng = 151.209834, Lat = -33.848588},
+            new() { Lng = 151.216968, Lat = -33.851702},
+            new() { Lng = 150.863657, Lat = -34.671264},
+            new() { Lng = 148.662905, Lat = -35.304724},
+            new() { Lng = 175.699196, Lat = -36.817685},
+            new() { Lng = 175.790222, Lat = -36.828611},
+            new() { Lng = 145.116667, Lat = -37.75},
+            new() { Lng = 145.128708, Lat = -37.759859},
+            new() { Lng = 145.133858, Lat = -37.765015},
+            new() { Lng = 145.143299, Lat = -37.770104},
+            new() { Lng = 145.145187, Lat = -37.7737},
+            new() { Lng = 145.137978, Lat = -37.774785},
+            new() { Lng = 144.968119, Lat = -37.819616},
+            new() { Lng = 144.695692, Lat = -38.330766},
+            new() { Lng = 175.053218, Lat = -39.927193},
+            new() { Lng = 174.865694, Lat = -41.330162},
+            new() { Lng = 147.439506, Lat = -42.734358},
+            new() { Lng = 147.501315, Lat = -42.734358},
+            new() { Lng = 147.438, Lat = -42.735258},
+            new() { Lng = 170.463352, Lat = -43.999792},
+        };
+    }
 }
diff --git a/ServerSideDemo/Pages/MapMarker.razor.cs b/ServerSideDemo/Pages/MapMarker.razor.cs
@@ -150,10 +150,6 @@ private async Task InvokeStyledIconsClustering()
             RendererObjectName = "customRendererLib.interpolatedRenderer",
             ZoomOnClick = true,
         });
-
-        await _markerClustering.FitMapToMarkers(1);
-        //initMap
-        //await JsObjectRef.InvokeAsync<object>("initMap", map1.InteropObject.Guid.ToString(), markers);
     }
 
     private static List<LatLngLiteral> GetClusterCoordinates()