Add bing maps to demo of geolocation bits.

IEvangelist · Mar 22, 2022 · 75faacc · 75faacc
1 parent b0ae83b
commit 75faacc
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 45 deletions.
diff --git a/blazorators.sln b/blazorators.sln
@@ -34,7 +34,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.Serialization", "src
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.Geolocation.WebAssembly", "src\Blazor.Geolocation.WebAssembly\Blazor.Geolocation.WebAssembly.csproj", "{0BAC9703-45EE-4E9E-A0F0-556F02FCB901}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Blazor.Geolocation.Server", "src\Blazor.Geolocation.Server\Blazor.Geolocation.Server.csproj", "{A9F3FE17-EF4C-44B8-B265-7D7DBAA42F84}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.Geolocation.Server", "src\Blazor.Geolocation.Server\Blazor.Geolocation.Server.csproj", "{A9F3FE17-EF4C-44B8-B265-7D7DBAA42F84}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

diff --git a/samples/Blazor.ExampleConsumer/Components/BingMap.razor b/samples/Blazor.ExampleConsumer/Components/BingMap.razor
@@ -0,0 +1,19 @@
+@inject IJSInProcessRuntime JavaScript
+
+<div id="map" style="width: 100%; height: 45vh;"></div>
+
+@code {
+    [Parameter, EditorRequired]
+    public GeolocationPosition Position { get; set; } = null!;
+
+    protected override void OnParametersSet()
+    {
+        if (Position is null or { Coords: null })
+        {
+            return;
+        }
+
+        JavaScript.InvokeVoid(
+            "app.loadMap", "map", Position.Coords.Latitude, Position.Coords.Longitude);
+    }
+}
diff --git a/samples/Blazor.ExampleConsumer/GlobalUsings.cs b/samples/Blazor.ExampleConsumer/GlobalUsings.cs
@@ -0,0 +1,6 @@
+// Copyright (c) David Pine. All rights reserved.
+// Licensed under the MIT License.
+
+global using System.Text.Json;
+global using System.Text.Json.Serialization;
+global using Microsoft.JSInterop;
diff --git a/samples/Blazor.ExampleConsumer/Pages/ClientPosition.razor b/samples/Blazor.ExampleConsumer/Pages/ClientPosition.razor
@@ -34,46 +34,6 @@
             <code>@json</code>
         </pre>
     }
-}
 
-@code {
-    readonly JsonSerializerOptions _opts = new()
-    {
-        WriteIndented = true,
-        PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
-        DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull
-    };
-    readonly PositionOptions _options = new()
-    {
-        EnableHighAccuracy = true,
-        MaximumAge = 0,
-        Timeout = 15_000
-    };
-
-    GeolocationPosition? _position;
-    GeolocationPositionError? _positionError;
-    bool _isLoading = true;
-
-    protected override void OnInitialized() =>
-        Geolocation.GetCurrentPosition(
-            component: this,
-            onSuccessCallbackMethodName: nameof(OnPositionRecieved),
-            onErrorCallbackMethodName: nameof(OnPositionError),
-            options: _options);
-
-    [JSInvokable]
-    public void OnPositionRecieved(GeolocationPosition position)
-    {
-        _isLoading = false;
-        _position = position;
-        StateHasChanged();
-    }
-
-    [JSInvokable]
-    public void OnPositionError(GeolocationPositionError positionError)
-    {
-        _isLoading = false;
-        _positionError = positionError;
-        StateHasChanged();
-    }
-}
+    <BingMap Position=@_position />
+}
diff --git a/samples/Blazor.ExampleConsumer/Pages/ClientPosition.razor.cs b/samples/Blazor.ExampleConsumer/Pages/ClientPosition.razor.cs
@@ -0,0 +1,47 @@
+// Copyright (c) David Pine. All rights reserved.
+// Licensed under the MIT License.
+
+namespace Blazor.ExampleConsumer.Pages;
+
+public partial class ClientPosition
+{
+    readonly JsonSerializerOptions _opts = new()
+    {
+        WriteIndented = true,
+        PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
+        DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull
+    };
+    readonly PositionOptions _options = new()
+    {
+        EnableHighAccuracy = true,
+        MaximumAge = 0,
+        Timeout = 15_000
+    };
+
+    GeolocationPosition? _position;
+    GeolocationPositionError? _positionError;
+    bool _isLoading = true;
+
+    protected override void OnInitialized() =>
+        Geolocation.GetCurrentPosition(
+            component: this,
+            onSuccessCallbackMethodName: nameof(OnPositionRecieved),
+            onErrorCallbackMethodName: nameof(OnPositionError),
+            options: _options);
+
+    [JSInvokable]
+    public void OnPositionRecieved(GeolocationPosition position)
+    {
+        _isLoading = false;
+        _position = position;
+        StateHasChanged();
+    }
+
+    [JSInvokable]
+    public void OnPositionError(GeolocationPositionError positionError)
+    {
+        _isLoading = false;
+        _positionError = positionError;
+        StateHasChanged();
+    }
+}
diff --git a/samples/Blazor.ExampleConsumer/_Imports.razor b/samples/Blazor.ExampleConsumer/_Imports.razor
@@ -10,4 +10,5 @@
 @using System.Text.Json.Serialization
 @using Blazor.ExampleConsumer
 @using Blazor.ExampleConsumer.Shared
-@using Blazor.Serialization.Extensions;
+@using Blazor.ExampleConsumer.Components
+@using Blazor.Serialization.Extensions
diff --git a/samples/Blazor.ExampleConsumer/wwwroot/app.js b/samples/Blazor.ExampleConsumer/wwwroot/app.js
@@ -1 +1,34 @@
-
+let _map = null;
+
+const loadMap = (mapId, latitude, longitude) => {
+    const element = document.getElementById(mapId);
+    if (!!element) {
+        const navigationBarMode = Microsoft.Maps.NavigationBarMode;
+        const location = new Microsoft.Maps.Location(latitude, longitude);
+        _map = new Microsoft.Maps.Map(element, {
+            center: location,
+            navigationBarMode: navigationBarMode.compact,
+            supportedMapTypes: [
+                Microsoft.Maps.MapTypeId.road,
+                Microsoft.Maps.MapTypeId.aerial,
+                Microsoft.Maps.MapTypeId.canvasLight
+            ]
+        });
+        _map.setView({ zoom: 18 });
+        Microsoft.Maps.loadModule('Microsoft.Maps.Search', () => {
+            var searchManager = new Microsoft.Maps.Search.SearchManager(_map);
+            var reverseGeocodeRequestOptions = {
+                location: location,
+                callback: (answer, userData) => {
+                    _map.setView({ bounds: answer.bestView });
+                    _map.entities.push(new Microsoft.Maps.Pushpin(reverseGeocodeRequestOptions.location));
+                }
+            };
+            searchManager.reverseGeocode(reverseGeocodeRequestOptions);
+        });
+    }
+};
+
+window.app = {
+    loadMap
+};
diff --git a/samples/Blazor.ExampleConsumer/wwwroot/index.html b/samples/Blazor.ExampleConsumer/wwwroot/index.html
@@ -20,6 +20,8 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_content/Blazor.Geolocation.WebAssembly/blazorators.geolocation.g.js"></script>
+    <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?key=AuFFokbS0x6puH-xXz-ADH1ZcMnPC1JkdSyRidoWCGYpVYTlnivpswV0D-OtfxGb" async defer></script>
+    <script src="app.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
 </body>