Update MapOptions to support new/more options #354

GoogleMapsComponents/GoogleMapsComponents.csproj

@@ -15,7 +15,7 @@
 		<RazorLangVersion>3.0</RazorLangVersion>
 		<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
 		<PackageId>BlazorGoogleMaps</PackageId>
-		<Version>4.7.6</Version>
+		<Version>4.7.7</Version>
 		<Authors>Rungwiroon</Authors>
 		<Company>QueueStack Solution</Company>
 		<Product>BlazorGoogleMaps</Product>
@@ -25,8 +25,13 @@
 		<GeneratePackageOnBuild>true</GeneratePackageOnBuild>
 		<PackageLicenseExpression>MIT</PackageLicenseExpression>
 		<Nullable>enable</Nullable>
+		<PackageReadmeFile>README.md</PackageReadmeFile>
 	</PropertyGroup>
 
+	<ItemGroup>
+		<None Include="..\README.md" Pack="true" PackagePath="\"/>
+	</ItemGroup>
+
 	<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
 		<DebugType>full</DebugType>
 		<DebugSymbols>true</DebugSymbols>

GoogleMapsComponents/Maps/MapOptions.cs

@@ -24,12 +24,12 @@ public class MapOptions
     /// This option can only be set when the map is initialized.
     /// </summary>
     public string? BackgroundColor { get; set; }
-    
+
     /// <summary>
     /// The enabled/disabled state of the Camera control.
     /// </summary>
     public bool? CameraControl { get; set; }
-    
+
     /// <summary>
     /// The display options for the Camera control.
     /// </summary>
@@ -39,14 +39,14 @@ public class MapOptions
     /// The initial Map center. Required.
     /// </summary>
     public LatLngLiteral? Center { get; set; }
-    
-    
+
+
     /// <summary>
     /// The initial Map color scheme. This option can only be set when the map is initialized.
     /// </summary>
     [JsonConverter(typeof(EnumMemberConverter<ColorScheme>))]
     public ColorScheme? ColorScheme { get; set; }
-    
+
     /// <summary>
     /// Size in pixels of the controls appearing on the map.
     /// This value must be supplied directly when creating the Map, updating this value later may bring
@@ -120,7 +120,7 @@ public class MapOptions
     /// Headings are snapped to the nearest available angle for which imagery is available.
     /// </summary>
     public int? Heading { get; set; }
-    
+
     /// <summary>
     /// Whether the map should allow user control of the camera heading (rotation). This option is only in
     /// effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
@@ -132,7 +132,7 @@ public class MapOptions
     /// Default: true for vector maps and false for raster maps
     /// </summary>
     public bool? IsFractionalZoomEnabled { get; set; }
-    
+
     /// <summary>
     /// The heading for aerial imagery in degrees measured clockwise from cardinal direction North.<br/>
     /// Headings are snapped to the nearest available angle for which imagery is available.
@@ -183,16 +183,16 @@ public class MapOptions
     /// The display options for the Pan control.
     /// </summary>
     public PanControlOptions? PanControlOptions { get; set; }
-    
-    // TODO: These have to be bound to JS in someway: https://developers.google.com/maps/documentation/javascript/reference/map#RenderingType
-    // <summary>
-    // Whether the map should be a raster or vector map. This parameter cannot be set or
-    // changed after a map is instantiated. If not set, then the cloud configuration for the map ID
-    // will determine the rendering type (if available). Please note that vector maps may not
-    // be available for all devices and browsers and the map will fall back to a raster map as needed.
-    // </summary>
-    // [JsonConverter(typeof(EnumMemberConverter<RenderingType>))]
-    // public RenderingType RenderingType { get; set; }
+
+    /// <summary>
+    /// Whether the map should be a raster or vector map. This parameter cannot be set or
+    /// changed after a map is instantiated. If not set, then the cloud configuration for the map ID
+    /// will determine the rendering type (if available). Please note that vector maps may notsummary>
+    /// https://developers.google.com/maps/documentation/javascript/reference/map#RenderingType
+    ///  be available for all devices and browsers and the map will fall back to a raster map as needed.
+    /// </summary>
+    [JsonConverter(typeof(EnumMemberConverter<RenderingType>))]
+    public RenderingType? RenderingType { get; set; }
 
     /// <summary>
     /// Defines a boundary that restricts the area of the map accessible to users.<br/>

GoogleMapsComponents/Maps/RenderingType.cs

@@ -0,0 +1,13 @@
+using System.Runtime.Serialization;
+
+namespace GoogleMapsComponents.Maps;
+
+public enum RenderingType
+{
+    [EnumMember(Value = "google.maps.RenderingType.RASTER")]
+    Raster,
+    [EnumMember(Value = "google.maps.RenderingType.UNINITIALIZED")]
+    Uninitialized,
+    [EnumMember(Value = "google.maps.RenderingType.VECTOR")]
+    Vector
+}

GoogleMapsComponents/wwwroot/js/objectManager.js

@@ -139,6 +139,16 @@
                         propertyValue.position = getGooglePositionFromString(propertyValue.position);
                     }
 
+                    if (propertyName === "renderingType" && propertyValue !== null) {
+                        const renderingTypeMap = {
+                            "google.maps.RenderingType.RASTER": google.maps.RenderingType.RASTER,
+                            "google.maps.RenderingType.UNINITIALIZED": google.maps.RenderingType.UNINITIALIZED,
+                            "google.maps.RenderingType.VECTOR": google.maps.RenderingType.VECTOR
+                        };
+
+                        parsedItem[propertyName] = renderingTypeMap[propertyValue] || google.maps.RenderingType.RASTER;
+                    }
+
                     // Handle nested drawingModes property
                     if (typeof propertyValue === "object" && propertyValue !== null && "drawingModes" in propertyValue) {
                         const drawingModeMapping = {

ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor

@@ -37,11 +37,17 @@
             Lng = 100.8162
         },
         IsFractionalZoomEnabled = false,
-        HeadingInteractionEnabled = true,
+        HeadingInteractionEnabled = false,
         CameraControl = true,
         MapTypeId = MapTypeId.Roadmap,
         // ColorScheme = ColorScheme.Dark,
-        MapId = "e5asd595q2121"
+        MapId = "e5asd595q2121",
+        RenderingType = RenderingType.Vector,
+        ZoomControl = true,
+        ZoomControlOptions = new ZoomControlOptions()
+        {
+            Position = ControlPosition.BottomCenter,
+        },
     };
     private LatLngBounds _bounds = null!;
     private readonly List<String> _events = new List<String>();