From ee7f4092b103d89ea93cd964606a6aae22b88bae Mon Sep 17 00:00:00 2001 From: Valentas Date: Tue, 3 May 2022 08:39:31 +0300 Subject: [PATCH] Render and algorithm settings for MarkerClustererOptions #192 --- .../GoogleMapsComponents.csproj | 2 +- GoogleMapsComponents/Maps/Polyline.cs | 2 +- .../wwwroot/js/objectManager.js | 128 ++++++------------ .../wwwroot/js/serverSideScripts.js | 64 +++++++-- 4 files changed, 97 insertions(+), 99 deletions(-) diff --git a/GoogleMapsComponents/GoogleMapsComponents.csproj b/GoogleMapsComponents/GoogleMapsComponents.csproj index 759c7420..c698eb89 100644 --- a/GoogleMapsComponents/GoogleMapsComponents.csproj +++ b/GoogleMapsComponents/GoogleMapsComponents.csproj @@ -18,7 +18,7 @@ 3.0 true BlazorGoogleMaps - 2.0.6 + 2.1.0 Rungwiroon QueueStack Solution BlazorGoogleMaps diff --git a/GoogleMapsComponents/Maps/Polyline.cs b/GoogleMapsComponents/Maps/Polyline.cs index d20451c1..38547c01 100644 --- a/GoogleMapsComponents/Maps/Polyline.cs +++ b/GoogleMapsComponents/Maps/Polyline.cs @@ -15,7 +15,7 @@ public class Polyline : ListableEntityBase, IDisposable /// /// 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. /// - public async static Task CreateAsync(IJSRuntime jsRuntime, PolylineOptions opts = null) + public static async Task 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 index f00c6138..841df640 100644 --- 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,8 +677,8 @@ window.googleMapsObjectManager = { }); const markerClustererOptions = { - map: map, - markers: originalMarkers, + map: map, + markers: originalMarkers, }; if (options && options.rendererObjectName) { @@ -685,11 +686,11 @@ window.googleMapsObjectManager = { 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(` -// -// -// -// -// `); -// // 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 index 73208f1c..e7b77681 100644 --- a/ServerSideDemo/wwwroot/js/serverSideScripts.js +++ b/ServerSideDemo/wwwroot/js/serverSideScripts.js @@ -26,8 +26,7 @@ } } -google.maps.Polyline.prototype.AddListeners = function() -{ +google.maps.Polyline.prototype.AddListeners = function () { // getpath console.log('Add Listeners Called.'); var poly = this; @@ -35,7 +34,7 @@ google.maps.Polyline.prototype.AddListeners = function() // 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); @@ -43,7 +42,7 @@ google.maps.Polyline.prototype.AddListeners = function() // 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); @@ -51,14 +50,13 @@ google.maps.Polyline.prototype.AddListeners = function() // 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; @@ -66,7 +64,7 @@ google.maps.Polygon.prototype.AddListeners = function() // 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); @@ -74,7 +72,7 @@ google.maps.Polygon.prototype.AddListeners = function() // 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); @@ -82,9 +80,53 @@ google.maps.Polygon.prototype.AddListeners = function() // 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); }); -} \ No newline at end of file +} + +//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(` +// +// +// +// +// `); +// // 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, +// }); +// }, +// } +//}; \ No newline at end of file