How to get Geo Location Blazor Server - geolocation

Question

I am currently working on a blazor server project based on .NET 6. there is a requirement to get the geo location into the application. I have tried several ways but they don't work.is there anyone who knows about it ?? please help me.

Answer 1

This shows how to call the browser API to get the current position.
geoLocationJsInterop.js (wwwroot\scripts)
export function getCurrentPosition(dotNetHelper) {
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
const coord = {
latitude: pos.coords.latitude,
longitude: pos.coords.longitude,
accuracy: pos.coords.accuracy
};
dotNetHelper.invokeMethodAsync('OnSuccessAsync', coord);
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
navigator.geolocation.getCurrentPosition(success, error, options);
}
GeoLocation.razor
#using Microsoft.JSInterop
#implements IAsyncDisposable
<button #onclick=#GetLocationAsync>Get Location</button>
#if (geoCoordinates is not null)
{
<div>
Latitude : #geoCoordinates.Latitude <br />
Longitude : #geoCoordinates.Longitude<br />
Accuracy : #geoCoordinates.Accuracy
</div>
}
#code {
private readonly Lazy<Task<IJSObjectReference>> moduleTask = default!;
private readonly DotNetObjectReference<GeoLocation> dotNetObjectReference;
private GeoCoordinates? geoCoordinates = null;
[Inject]
private IJSRuntime jsRuntime { get; set; } = default!;
public GeoLocation()
{
moduleTask = new(() => jsRuntime!.InvokeAsync<IJSObjectReference>(
identifier: "import",
args: "./_content/ChatClient.Core/scripts/geoLocationJsInterop.js")
.AsTask());
dotNetObjectReference = DotNetObjectReference.Create(this);
}
public async Task GetLocationAsync()
{
var module = await moduleTask.Value;
await module.InvokeVoidAsync(identifier: "getCurrentPosition", dotNetObjectReference);
}
[JSInvokable]
public async Task OnSuccessAsync(GeoCoordinates geoCoordinates)
{
this.geoCoordinates = geoCoordinates;
await InvokeAsync(StateHasChanged);
}
public async ValueTask DisposeAsync()
{
if (moduleTask.IsValueCreated)
{
var module = await moduleTask.Value;
await module.DisposeAsync();
}
}
public class GeoCoordinates
{
public double Latitude { get; set; }
public double Longitude { get; set; }
public double Accuracy { get; set; }
}
}
Note: Change the path of the .js file to suite your project. In this case I was referencing a RCL called ChatClient.Core.
args: "./scripts/geoLocationJsInterop.js" for your root project.
This component runs on either wasm or blazor-server.
API Docs