Render and algorithm settings for MarkerClustererOptions #192

rungwiroon · May 3, 2022 · ee7f409 · ee7f409
1 parent b6546fb
commit ee7f409
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 99 deletions.
diff --git a/GoogleMapsComponents/GoogleMapsComponents.csproj b/GoogleMapsComponents/GoogleMapsComponents.csproj
@@ -18,7 +18,7 @@
 		<RazorLangVersion>3.0</RazorLangVersion>
 		<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
 		<PackageId>BlazorGoogleMaps</PackageId>
-		<Version>2.0.6</Version>
+		<Version>2.1.0</Version>
 		<Authors>Rungwiroon</Authors>
 		<Company>QueueStack Solution</Company>
 		<Product>BlazorGoogleMaps</Product>

diff --git a/GoogleMapsComponents/Maps/Polyline.cs b/GoogleMapsComponents/Maps/Polyline.cs
@@ -15,7 +15,7 @@ public class Polyline : ListableEntityBase<PolylineOptions>, IDisposable
         /// <summary>
         /// Create a polyline using the passed PolylineOptions, which specify both the path of the polyline and the stroke style to use when drawing the polyline.
         /// </summary>
-        public async static Task<Polyline> CreateAsync(IJSRuntime jsRuntime, PolylineOptions opts = null)
+        public static async Task<Polyline> CreateAsync(IJSRuntime jsRuntime, PolylineOptions opts = null)
         {
             var jsObjectRef = await JsObjectRef.CreateAsync(jsRuntime, "google.maps.Polyline", opts);
 

diff --git a/GoogleMapsComponents/wwwroot/js/objectManager.js b/GoogleMapsComponents/wwwroot/js/objectManager.js
@@ -316,7 +316,7 @@ window.googleMapsObjectManager = {
 
         let guids = JSON.parse(args[0]);
 
-        for (var i = 0; i < args2.length; i++) {
+        for (var i = 0; i < args2.length; i++) {
             let obj = new constructor(args2[i]);
 
             if ("set" in obj) {
@@ -663,11 +663,12 @@ window.googleMapsObjectManager = {
         let result = obj[args[1]];
         let props = tryParseJson(args[2]);
         for (var i = 0; i < props.length; i++) {
-            result = result.map((x) => x[props[i]]);
+            result = result.map((x) => x[props[i]]);
         }
         return result;
     },
 
+    //based on https://googlemaps.github.io/js-markerclusterer/
     createClusteringMarkers(guid, mapGuid, markers, options) {
         const map = window._blazorGoogleMapsObjects[mapGuid];
 
@@ -676,20 +677,20 @@ window.googleMapsObjectManager = {
         });
 
         const markerClustererOptions = {
-            map: map,
-            markers: originalMarkers,
+            map: map,
+            markers: originalMarkers,
         };
 
         if (options && options.rendererObjectName) {
             const splits = options.rendererObjectName.split(".");
             try {
                 let renderer = window[splits[0]];
                 for (i = 1; i < splits.length; i++) {
-                    renderer = renderer[splits[i]];
+                    renderer = renderer[splits[i]];
                 }
-                markerClustererOptions.renderer = renderer;
-            } catch (e){
-                console.log(e);
+                markerClustererOptions.renderer = renderer;
+            } catch (e) {
+                console.log(e);
             }
         }
 
@@ -698,12 +699,12 @@ window.googleMapsObjectManager = {
             try {
                 let algorithm = window[splits[0]];
                 for (i = 1; i < splits.length; i++) {
-                    algorithm = algorithm[splits[i]];
+                    algorithm = algorithm[splits[i]];
                 }
-                markerClustererOptions.algorithm = algorithm;
+                markerClustererOptions.algorithm = algorithm;
             } catch (e) {
-                console.log(e);
-            }
+                console.log(e);
+            }
         }
 
         if (options && !options.zoomOnClick) {
@@ -712,85 +713,40 @@ window.googleMapsObjectManager = {
 
         const markerCluster = new markerClusterer.MarkerClusterer(markerClustererOptions);
 
-/*        const newMarkers = trees.map(({ geometry }, i) => new google.maps.Marker({
-			position: {
-				lat: geometry.coordinates[1],
-				lng: geometry.coordinates[0],
-			},
-			label: labels[i % labels.length],
-			map,
-        }));
-		const markerCluster = new markerClusterer.MarkerClusterer({
-			map: map,
-            markers: newMarkers
-		});
-*/
-
-		if ("set" in markerCluster) {
+        /*        const newMarkers = trees.map(({ geometry }, i) => new google.maps.Marker({
+                    position: {
+                        lat: geometry.coordinates[1],
+                        lng: geometry.coordinates[0],
+                    },
+                    label: labels[i % labels.length],
+                    map,
+                }));
+                const markerCluster = new markerClusterer.MarkerClusterer({
+                    map: map,
+                    markers: newMarkers
+                });
+        */
+
+        if ("set" in markerCluster) {
             markerCluster.set("guidString", guid);
         }
 
         window._blazorGoogleMapsObjects[guid] = markerCluster;
     },
 
-    removeClusteringMarkers(guid, markers, noDraw) {
-        const originalMarkers = markers.map((marker, i) => {
-            return window._blazorGoogleMapsObjects[marker.guid];
-        });
-
-        window._blazorGoogleMapsObjects[guid].addMarkers(originalMarkers, noDraw);
-    },
-
-    addClusteringMarkers(guid, markers, noDraw) {
-        const originalMarkers = markers.map((marker, i) => {
-            return window._blazorGoogleMapsObjects[marker.guid];
-        });
-
-        window._blazorGoogleMapsObjects[guid].addMarkers(originalMarkers, noDraw);
+    removeClusteringMarkers(guid, markers, noDraw) {
+        const originalMarkers = markers.map((marker, i) => {
+            return window._blazorGoogleMapsObjects[marker.guid];
+        });
+
+        window._blazorGoogleMapsObjects[guid].addMarkers(originalMarkers, noDraw);
+    },
+
+    addClusteringMarkers(guid, markers, noDraw) {
+        const originalMarkers = markers.map((marker, i) => {
+            return window._blazorGoogleMapsObjects[marker.guid];
+        });
+
+        window._blazorGoogleMapsObjects[guid].addMarkers(originalMarkers, noDraw);
     }
 };
-
-//export { googleMapsObjectManager }
-
-
-//window.customRendererLib = {
-//    interpolatedRenderer: {
-//        render: function ({ count, position }, stats) {
-//            const color = count > Math.max(5, stats.clusters.markers.mean) ? "#F00" : "#00F";
-
-//            let countText;
-//            try {
-//                let formatter = Intl.NumberFormat('en', { notation: 'compact' });
-//                countText = formatter.format(count);
-//            } catch {
-//                countText = String(count);
-//            }
-
-//            // create svg url with fill color
-//            const svg = window.btoa(`
-//  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
-//    <circle cx="120" cy="120" opacity=".1" r="120" fill="#000000"/>
-//    <circle cx="120" cy="120" opacity="1" r="100" fill="#ffffff"/>
-//    <circle cx="120" cy="120" opacity="1" r="64" fill="${color}"/>
-//  </svg>`);
-//            // create marker using svg icon
-//            return new google.maps.Marker({
-//                position,
-//                icon: {
-//                    url: `data:image/svg+xml;base64,${svg}`,
-//                    scaledSize: new google.maps.Size(50, 50),
-//                },
-//                label: {
-//                    text: countText,
-//                    color: "#ffffff",
-//                    fontSize: "16px",
-//                    fontWeight: "bold",
-//                    fontFamily: "Open Sans"
-//                },
-//                // adjust zIndex to be above other markers
-//                zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
-//            });
-//        },
-//    }
-//};
-
diff --git a/ServerSideDemo/wwwroot/js/serverSideScripts.js b/ServerSideDemo/wwwroot/js/serverSideScripts.js
@@ -26,65 +26,107 @@
     }
 }
 
-google.maps.Polyline.prototype.AddListeners = function()
-{
+google.maps.Polyline.prototype.AddListeners = function () {
     // getpath
     console.log('Add Listeners Called.');
     var poly = this;
     var path = this.getPath();
 
     // addlistener insert_at
     event.initEvent('insert_at', true, true);
-    google.maps.event.addListener(path, 'insert_at', function(vertex) {
+    google.maps.event.addListener(path, 'insert_at', function (vertex) {
         // event auf polyline auslösen
         console.log('Vertex ' + vertex + ' inserted to path.');
         google.maps.event.trigger(poly, 'insert_at', vertex);
     });
 
     // addlistener set_at
     event.initEvent('set_at', true, true);
-    google.maps.event.addListener(path, 'set_at', function(vertex) {
+    google.maps.event.addListener(path, 'set_at', function (vertex) {
         // event auf polyline auslösen
         console.log('Vertex ' + vertex + ' set on path.');
         google.maps.event.trigger(poly, 'set_at', vertex);
     });
 
     // addlistener remove_at
     event.initEvent('remove_at', true, true);
-    google.maps.event.addListener(path, 'remove_at', function(vertex) {
+    google.maps.event.addListener(path, 'remove_at', function (vertex) {
         // event auf polyline auslösen
         console.log('Vertex ' + vertex + ' removed from path.');
         google.maps.event.trigger(poly, 'remove_at', vertex);
     });
 }
-google.maps.Polygon.prototype.AddListeners = function()
-{
+google.maps.Polygon.prototype.AddListeners = function () {
     // getpath
     console.log('Add Listeners Called.');
     var poly = this;
     var path = this.getPath();
 
     // addlistener insert_at
     event.initEvent('insert_at', true, true);
-    google.maps.event.addListener(path, 'insert_at', function(vertex) {
+    google.maps.event.addListener(path, 'insert_at', function (vertex) {
         // event auf polyline auslösen
         console.log('Vertex ' + vertex + ' inserted to path.');
         google.maps.event.trigger(poly, 'insert_at', vertex);
     });
 
     // addlistener set_at
     event.initEvent('set_at', true, true);
-    google.maps.event.addListener(path, 'set_at', function(vertex) {
+    google.maps.event.addListener(path, 'set_at', function (vertex) {
         // event auf polyline auslösen
         console.log('Vertex ' + vertex + ' set on path.');
         google.maps.event.trigger(poly, 'set_at', vertex);
     });
 
     // addlistener remove_at
     event.initEvent('remove_at', true, true);
-    google.maps.event.addListener(path, 'remove_at', function(vertex) {
+    google.maps.event.addListener(path, 'remove_at', function (vertex) {
         // event auf polyline auslösen
         console.log('Vertex ' + vertex + ' removed from path.');
         google.maps.event.trigger(poly, 'remove_at', vertex);
     });
-}
+}
+
+//export { googleMapsObjectManager }
+
+
+//window.customRendererLib = {
+//    interpolatedRenderer: {
+//        render: function ({ count, position }, stats) {
+//            const color = count > Math.max(5, stats.clusters.markers.mean) ? "#F00" : "#00F";
+
+//            let countText;
+//            try {
+//                let formatter = Intl.NumberFormat('en', { notation: 'compact' });
+//                countText = formatter.format(count);
+//            } catch {
+//                countText = String(count);
+//            }
+
+//            // create svg url with fill color
+//            const svg = window.btoa(`
+//  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+//    <circle cx="120" cy="120" opacity=".1" r="120" fill="#000000"/>
+//    <circle cx="120" cy="120" opacity="1" r="100" fill="#ffffff"/>
+//    <circle cx="120" cy="120" opacity="1" r="64" fill="${color}"/>
+//  </svg>`);
+//            // create marker using svg icon
+//            return new google.maps.Marker({
+//                position,
+//                icon: {
+//                    url: `data:image/svg+xml;base64,${svg}`,
+//                    scaledSize: new google.maps.Size(50, 50),
+//                },
+//                label: {
+//                    text: countText,
+//                    color: "#ffffff",
+//                    fontSize: "16px",
+//                    fontWeight: "bold",
+//                    fontFamily: "Open Sans"
+//                },
+//                // adjust zIndex to be above other markers
+//                zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
+//            });
+//        },
+//    }
+//};