Merge pull request #125 from mlinnen/clientside_cluster_sample

Client Side cluster sample
rungwiroon · Jul 2, 2021 · 25286f3 · 25286f3
2 parents 311e4db + 2ca89bc
commit 25286f3
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 2 deletions.
diff --git a/ClientSideDemoNet5/Pages/MapMarker.razor b/ClientSideDemoNet5/Pages/MapMarker.razor
@@ -11,6 +11,8 @@
 <button @onclick="Recenter">Re-center marker</button>
 <input type="text" value="@labelText" @onchange="UpdateLabelText" />
 <button @onclick="ToggleLabelFontWeight">Toggle label font-weight</button>
+<button @onclick="InvokeClustering">Invoke map cluster</button>
+<button @onclick="@ClearClustering">Clear cluster</button>
 
 <MapEventList @ref="@eventList" Events="@_events"></MapEventList>
 
@@ -27,6 +29,8 @@
 
     private string labelText = "";
 
+    private MarkerClustering _markerClustering = default!;
+
     protected override void OnInitialized()
     {
         mapOptions = new MapOptions()
@@ -48,7 +52,7 @@
             {
                 Position = await map1.InteropObject.GetCenter(),
                 Map = map1.InteropObject,
-                Label = new MarkerLabel { Text = $"Test {markers.Count()}", FontWeight = "bold"},
+                Label = new MarkerLabel { Text = $"Test {markers.Count()}", FontWeight = "bold" },
                 Icon = new Icon()
                 {
                     Url = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
@@ -133,7 +137,7 @@
             return;
         }
 
-        string newLabelText = e.Value?.ToString() ?? "" ;
+        string newLabelText = e.Value?.ToString() ?? "";
         if (labelText != newLabelText)
         {
             labelText = newLabelText;
@@ -156,4 +160,69 @@
         await lastMarker.SetLabel(lastMarkerLabel);
     }
 
+    private async Task ClearClustering()
+    {
+        await _markerClustering.ClearMarkers();
+    }
+
+    private async Task InvokeClustering()
+    {
+        var coordinates = new List<LatLngLiteral>()
+            {
+                new LatLngLiteral(147.154312, -31.56391),
+                new LatLngLiteral(150.363181, -33.718234),
+                new LatLngLiteral(150.371124, -33.727111),
+                new LatLngLiteral(151.209834, -33.848588),
+                new LatLngLiteral(151.216968, -33.851702),
+                new LatLngLiteral(150.863657, -34.671264),
+                new LatLngLiteral(148.662905, -35.304724),
+                new LatLngLiteral(175.699196, -36.817685),
+                new LatLngLiteral(175.790222, -36.828611),
+                new LatLngLiteral(145.116667, -37.75),
+                new LatLngLiteral(145.128708, -37.759859),
+                new LatLngLiteral(145.133858, -37.765015),
+                new LatLngLiteral(145.143299, -37.770104),
+                new LatLngLiteral(145.145187, -37.7737),
+                new LatLngLiteral(145.137978, -37.774785),
+                new LatLngLiteral(144.968119, -37.819616),
+                new LatLngLiteral(144.695692, -38.330766),
+                new LatLngLiteral(175.053218, -39.927193),
+                new LatLngLiteral(174.865694, -41.330162),
+                new LatLngLiteral(147.439506, -42.734358),
+                new LatLngLiteral(147.501315, -42.734358),
+                new LatLngLiteral(147.438, -42.735258),
+                new LatLngLiteral(170.463352, -43.999792),
+            };
+
+        var markers = await GetMarkers(coordinates, map1.InteropObject);
+
+        _markerClustering = await MarkerClustering.CreateAsync(map1.JsRuntime, map1.InteropObject, markers);
+        await _markerClustering.FitMapToMarkers(1);
+    }
+
+    private async Task<IEnumerable<Marker>> GetMarkers(IEnumerable<LatLngLiteral> coords, Map map)
+    {
+        var result = new List<Marker>(coords.Count());
+        var index = 1;
+        foreach (var latLngLiteral in coords)
+        {
+            var marker = await Marker.CreateAsync(map1.JsRuntime, new MarkerOptions()
+            {
+                Position = latLngLiteral,
+                Map = map,
+                Label = $"Test {index++}",
+                //Icon = new Icon()
+                //{
+                //    Url = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
+                //}
+                //Icon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
+            });
+
+            result.Add(marker);
+        }
+
+
+        return result;
+    }
+
 }
diff --git a/ClientSideDemoNet5/wwwroot/index.html b/ClientSideDemoNet5/wwwroot/index.html
@@ -14,5 +14,6 @@
 
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="_content/BlazorGoogleMaps/objectManager.js"></script>
+    <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
 </body>
 </html>