AddPolyline feature

Author: majorimi

src/Majorsoft.Blazor.Components.Maps/Google/Drawings/GoogleMapPolylineOptions.cs

@@ -1,8 +1,4 @@
 using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
 
 namespace Majorsoft.Blazor.Components.Maps.Google
 {
@@ -44,27 +40,27 @@ public class GoogleMapPolylineOptions
         /// <summary>
         /// The ordered sequence of coordinates of the Polyline.
         /// </summary>
-        public GoogleMapLatLng Path { get; set; }
+        public GoogleMapLatLng[] Path { get; set; }
 
         /// <summary>
         /// The stroke color. All CSS3 colors are supported except for extended named colors.
         /// </summary>
-        public string StrokeColor { get; set; }
+        public string StrokeColor { get; set; } = "black";
 
         /// <summary>
         /// The stroke opacity between 0.0 and 1.0.
         /// </summary>
-        public double StrokeOpacity { get; set; }
+        public double StrokeOpacity { get; set; } = 1.0;
 
         /// <summary>
         /// The stroke width in pixels.
         /// </summary>
-        public double StrokeWeight { get; set; }
+        public double StrokeWeight { get; set; } = 2;
 
         /// <summary>
         /// Whether this polyline is visible on the map. Defaults to true.
         /// </summary>
-        public bool Visible { get; set; }
+        public bool Visible { get; set; } = true;
 
         /// <summary>
         /// The zIndex compared to other polys.

src/Majorsoft.Blazor.Components.Maps/GoogleMapLatLng.cs renamed to src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapLatLng.cs

@@ -1,4 +1,6 @@
-namespace Majorsoft.Blazor.Components.Maps
+using System.Text.Json.Serialization;
+
+namespace Majorsoft.Blazor.Components.Maps.Google
 {
     /// <summary>
     /// A LatLng is a point in geographical coordinates: latitude and longitude.
@@ -9,12 +11,14 @@ public class GoogleMapLatLng
         /// Latitude ranges between -90 and 90 degrees, inclusive. Values above or below this range will be clamped to the range [-90, 90]. 
         /// This means that if the value specified is less than -90, it will be set to -90. And if the value is greater than 90, it will be set to 90.
         /// </summary>
+        [JsonPropertyName("lat")]
         public double Latitude { get; set; }
 
         /// <summary>
         /// Longitude ranges between -180 and 180 degrees, inclusive. Values above or below this range will be wrapped so that they fall within the range.
         /// For example, a value of -190 will be converted to 170. A value of 190 will be converted to -170. This reflects the fact that longitudes wrap around the globe.
         /// </summary>
+        [JsonPropertyName("lng")]
         public double Longitude { get; set; }
     }
 }

src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapService.cs

@@ -1,4 +1,5 @@
-using Microsoft.JSInterop;
+
+using Microsoft.JSInterop;
 
 using System;
 using System.Collections.Generic;
@@ -258,7 +259,7 @@ public async ValueTask<IJSObjectReference> GetDivAsync()
 		public async Task AddPolyline(params GoogleMapPolylineOptions[] googleMapPolylineOptions)
 		{
 			await CheckJsObjectAsync();
-			await _mapsJs.InvokeAsync<IJSObjectReference>("polylineSetMap", MapContainerId, googleMapPolylineOptions);
+			await _mapsJs.InvokeVoidAsync("polylineSetMap", MapContainerId, googleMapPolylineOptions);
 		}
 
 

src/Majorsoft.Blazor.Components.Maps/Google/IGoogleMapService.cs

@@ -167,7 +167,7 @@ Task InitMapAsync(string apiKey,
 		Task CreateCustomControlsAsync(IEnumerable<GoogleMapCustomControl> mapCustomControls);
 
 		/// <summary>
-		/// Creates markers on the Map with InfoWindows on the given position with event callbacks.
+		/// Creates and removes Markers on the Map with InfoWindows on the given position with event callbacks.
 		/// </summary>
 		/// <param name="newMarkers">Enumerable new markers to add</param>
 		/// <param name="markers">Enumerable markers removed or replaced</param>
@@ -197,7 +197,7 @@ Task InitMapAsync(string apiKey,
 		ValueTask<IJSObjectReference> GetDivAsync();
 
 		/// <summary>
-		/// 
+		/// Creates and removes Polyline on the Map with given values and event callbacks.
 		/// </summary>
 		/// <param name="googleMapPolylineOptions"></param>
 		/// <returns></returns>

src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml

@@ -56,10 +56,10 @@ window.initGoogleMaps = () => {
 			restrict =
 			{
 				latLngBounds: {
-					south: mapInfo.restriction.latLngBounds.southWest.latitude,
-					west: mapInfo.restriction.latLngBounds.southWest.longitude,
-					north: mapInfo.restriction.latLngBounds.northEast.latitude,
-					east: mapInfo.restriction.latLngBounds.northEast.longitude
+					south: mapInfo.restriction.latLngBounds.southWest.lat,
+					west: mapInfo.restriction.latLngBounds.southWest.lng,
+					north: mapInfo.restriction.latLngBounds.northEast.lat,
+					east: mapInfo.restriction.latLngBounds.northEast.lng
 				},
 				strictBounds: mapInfo.restriction.strictBounds,
 			};
@@ -397,7 +397,7 @@ export function getDiv(elementId) {
 	}
 }
 function convertToLatLng(latLngObject) {
-	let ret = { Latitude: latLngObject.lat(), Longitude: latLngObject.lng() };
+	let ret = { lat: latLngObject.lat(), lng: latLngObject.lng() };
 	return ret;
 }
 
@@ -620,15 +620,10 @@ export function polylineSetMap(elementId, polylineOptions) {
 		if (mapWithDotnetRef && mapWithDotnetRef.map) {
 
 			for (var i = 0; i < polylineOptions.length; i++) {
-				let markerData = polylineOptions[i];
-
-				//_mapsMarkers.forEach((element, index) => {
-				//	if (markerData.id == element.id) {
-				//		element.setMap(null);
-				//		_mapsMarkers.splice(index, 1);
-				//		return;
-				//	}
-				//});
+				let options = polylineOptions[i];
+
+				let polyline = new google.maps.Polyline(options);
+				polyline.setMap(mapWithDotnetRef.map);
 			}
 		}
 	}

src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.js

@@ -241,7 +241,7 @@
 		<div class="row pb-2">
 			<div class="col-12 col-lg-8 col-xl-6">
 				<p>
-					<h5>Maps Pre-render settings:</h5> 
+					<h5>Maps Pre-render settings:</h5>
 					<ul>
 						<li>Background color: <strong style="color: @_jsMapBackgroundColor;">@_jsMapBackgroundColor</strong></li>
 						<li>Control size: <strong>@(_jsMapControlSize)px</strong></li>
@@ -317,9 +317,9 @@
 						   ApiKey="@_googleMapsApiKey" />
 
 				@*<GoogleMap @bind-Center="_jsMapCenter" @bind-Center:event="OnMapCenterChanged"
-						   @bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged"
-						   OnMapInitialized="@(() => {})"
-						   ApiKey="@_googleMapsApiKey" />*@
+				@bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged"
+				OnMapInitialized="@(() => {})"
+				ApiKey="@_googleMapsApiKey" />*@
 
 			</div>
 		</div>
@@ -329,6 +329,15 @@
 				<button class="btn btn-primary" @onclick="@(() => { _jsMarkers.AddRange(_jsMarkersTmp); _jsMarkersTmp.Clear(); })">Show Markers</button>
 				<button class="btn btn-primary" @onclick="@(() => { _jsMarkers.Clear(); _jsMarkersTmp.Clear(); _jsPhotosAdded = false; })">Remove Markers</button>
 				<button class="btn btn-primary" @onclick="@AddPhotos">Add photo Markers</button>
+
+			</div>
+		</div>
+		<div class="row pb-2">
+			<div class="col-12 col-lg-8 col-xl-6">
+				<button class="btn btn-primary" @onclick="@AddMapDrawings">Add drawings:</button>
+				<select style="display: inline" class="form-control selectpicker w-25">
+					<option>Polyline</option>
+				</select>
 			</div>
 		</div>
 
@@ -350,7 +359,6 @@
 		<button class="btn btn-primary mb-2" @onclick="@(CenterMyLocationWithJavaScriptMap)">Center my location with Map</button>
 		<button class="btn btn-primary mb-2" @onclick="@(CenterMyLocationWithInjectedServiceJavaScript)">Center my location with GeolocationService</button>
 	</div>
-
 </div>
 
 @implements IAsyncDisposable
@@ -597,6 +605,28 @@
 		});
 	}
 
+	public async Task AddMapDrawings()
+	{
+		var polylines = new GoogleMapPolylineOptions()
+		{
+			Path = new GoogleMapLatLng[] 
+				{
+					new GoogleMapLatLng() { Latitude = 37.772, Longitude = -122.214 },
+					new GoogleMapLatLng() { Latitude = 21.291, Longitude = -157.821 },
+					new GoogleMapLatLng() { Latitude = -18.142, Longitude = 178.431 },
+					new GoogleMapLatLng() { Latitude = -27.467, Longitude = 153.027 },
+				},
+			Geodesic = true,
+			Draggable = true,
+			Clickable = true,
+			StrokeColor = "#FF0000",
+			StrokeOpacity = 0.5,
+			StrokeWeight = 5
+		};
+
+		await _googleMap.GoogleMapService.AddPolyline(polylines);
+	}
+
 	//Events
 	private async Task OnMapInitialized(string elementId)
 	{