From 2722b78a93aa155bf04caedec48f3d01575298a5 Mon Sep 17 00:00:00 2001 From: ValentasDeltamina Date: Thu, 21 Mar 2024 16:38:56 +0200 Subject: [PATCH] DrawingManager.SetDrawingMode no longer works in 3.3.2 and newer #320 --- .../Maps/Drawing/DrawingManager.cs | 2 +- .../wwwroot/js/objectManager.js | 43 +++++++++---------- ServerSideDemo/Pages/DrawingManagerPage.razor | 3 +- .../Pages/DrawingManagerPage.razor.cs | 15 ++++--- 4 files changed, 33 insertions(+), 30 deletions(-) diff --git a/GoogleMapsComponents/Maps/Drawing/DrawingManager.cs b/GoogleMapsComponents/Maps/Drawing/DrawingManager.cs index 2ea9fddf..cd85c340 100644 --- a/GoogleMapsComponents/Maps/Drawing/DrawingManager.cs +++ b/GoogleMapsComponents/Maps/Drawing/DrawingManager.cs @@ -73,7 +73,7 @@ public Task SetDrawingMode(OverlayType? drawingMode) /// https://developers.google.com/maps/documentation/javascript/reference/drawing#DrawingManager.setMap /// /// - public async Task SetMap(Map map) + public async Task SetMap(Map? map) { await _jsObjectRef.InvokeAsync( "setMap", diff --git a/GoogleMapsComponents/wwwroot/js/objectManager.js b/GoogleMapsComponents/wwwroot/js/objectManager.js index af397c32..bda314dc 100644 --- a/GoogleMapsComponents/wwwroot/js/objectManager.js +++ b/GoogleMapsComponents/wwwroot/js/objectManager.js @@ -121,30 +121,29 @@ } } - if (item2 === "polyline" && item2 !== null) { - if (item.startsWith("google.maps.drawing.OverlayType")) { - switch (item) { - case "google.maps.drawing.OverlayType.CIRCLE": - item2 = google.maps.drawing.OverlayType.CIRCLE; - break; - case "google.maps.drawing.OverlayType.MARKER": - item2 = google.maps.drawing.OverlayType.MARKER; - break; - case "google.maps.drawing.OverlayType.POLYGON": - item2 = google.maps.drawing.OverlayType.POLYGON; - break; - case "google.maps.drawing.OverlayType.POLYLINE": - item2 = google.maps.drawing.OverlayType.POLYLINE; - break; - case "google.maps.drawing.OverlayType.RECTANGLE": - item2 = google.maps.drawing.OverlayType.RECTANGLE; - break; - default: - } - - return item2; + if (item !== null && item.startsWith("google.maps.drawing.OverlayType")) { + switch (item) { + case "google.maps.drawing.OverlayType.CIRCLE": + item2 = google.maps.drawing.OverlayType.CIRCLE; + break; + case "google.maps.drawing.OverlayType.MARKER": + item2 = google.maps.drawing.OverlayType.MARKER; + break; + case "google.maps.drawing.OverlayType.POLYGON": + item2 = google.maps.drawing.OverlayType.POLYGON; + break; + case "google.maps.drawing.OverlayType.POLYLINE": + item2 = google.maps.drawing.OverlayType.POLYLINE; + break; + case "google.maps.drawing.OverlayType.RECTANGLE": + item2 = google.maps.drawing.OverlayType.RECTANGLE; + break; + default: } + + return item2; } + if (typeof item2 === "object" && item2 !== null) { if ("guidString" in item2) { diff --git a/ServerSideDemo/Pages/DrawingManagerPage.razor b/ServerSideDemo/Pages/DrawingManagerPage.razor index 233c0b33..d71bd3cc 100644 --- a/ServerSideDemo/Pages/DrawingManagerPage.razor +++ b/ServerSideDemo/Pages/DrawingManagerPage.razor @@ -3,8 +3,9 @@

Google Map Markers

- + + @*
*@ diff --git a/ServerSideDemo/Pages/DrawingManagerPage.razor.cs b/ServerSideDemo/Pages/DrawingManagerPage.razor.cs index 0e24bd9e..eea3a949 100644 --- a/ServerSideDemo/Pages/DrawingManagerPage.razor.cs +++ b/ServerSideDemo/Pages/DrawingManagerPage.razor.cs @@ -13,14 +13,14 @@ public partial class DrawingManagerPage private DrawingManager _drawingManager; private DrawingManagerOptions _managerOptions; private PolygonOptions _polygonOptions; - private GoogleMap map1; - private MapOptions mapOptions; + private GoogleMap _map; + private MapOptions _mapOptions; [Inject] public IJSRuntime JsRuntime { get; set; } protected override void OnInitialized() { - mapOptions = new MapOptions() + _mapOptions = new MapOptions() { Zoom = 16, Center = new LatLngLiteral() @@ -60,7 +60,7 @@ private async Task OnAfterInitAsync() _managerOptions = new DrawingManagerOptions() { - Map = map1.InteropObject, + Map = _map.InteropObject, PolygonOptions = _polygonOptions, //DrawingMode = OverlayType.Polygon, DrawingControl = true, @@ -70,7 +70,7 @@ private async Task OnAfterInitAsync() _drawingManager = await DrawingManager.CreateAsync(JsRuntime, _managerOptions); //https://developers.google.com/maps/documentation/javascript/drawinglayer - await _drawingManager.AddOverlayCompleteListener(async (overComplete) => + await _drawingManager.AddOverlayCompleteListener(async overComplete => { if (overComplete.Type == OverlayType.Polygon) { @@ -94,10 +94,13 @@ private async Task OnModeChangedClick() await JsRuntime.InvokeAsync("console.log", message); } + private async Task ChangeDrawingModeToPolygon() + { + await _drawingManager.SetDrawingMode(OverlayType.Polygon); + } private async Task ChangeDrawingModeToLine() { await _drawingManager.SetDrawingMode(OverlayType.Polyline); - } private async Task StopDrawingMode()