Persilsoft.Nominatim.Geolocation.Blazor 1.0.1

Persilsoft.Geolocation Blazor

A Geolocation library for Blazor and Razor Components applications.

Example

Get current position
You should register the service that restrieves the user's coordinates:

using ServiceCollectionExtensions;

builder.Services.AddGeolocationService();

Now, you can retrieve the current location of the user.

@page "/geocoder"
@using Persilsoft.Nominatim.Geolocation.Blazor
@inject GeolocationService Geolocation;

<PageTitle>Geolocation Test</PageTitle>

<h1>Geolocation</h1>
<hr />

<button class="btn btn-primary" @onclick=ShowLocation>
    Show location
</button>

<div class="row mt-2">
    <div class="col-md-6">
        <label class="form-label">Latitude:</label>
        <input type="text" class="form-control" @bind=latitude disabled />
    </div>
    <div class="col-md-6">
        <label class="form-label">Longitude:</label>
        <input type="text" class="form-control" @bind=longitude disabled />
    </div>
    <p>@message</p>
</div>

@code {
    private double latitude;
    private double longitude;
    private string message;

    private async Task ShowLocation()
    {
        var position = await Geolocation.GetPosition();
        if (!position.Equals(default))
        {
            latitude = position.Latitude;
            longitude = position.Longitude;
        }
        else
        {
            message = "Location could not be retrieved.";
        }
    }
}

Reverse Geocoding
If you need to obtain the address of the location, you can use the Reverse Geocoding service.
You should register the Geocoding service:

builder.Services.AddNominatimGeocoderService();

Below, you can modify the previous example to obtain the address.

@page "/geocoder"
@using Persilsoft.Nominatim.Geolocation.Blazor
@using Persilsoft.Nominatim.Geolocation.Blazor.Geocoding
@inject GeolocationService Geolocation
@inject IGeocoder GeocoderService

<PageTitle>Geolocation Test</PageTitle>

<h1>Geolocation</h1>
<hr />

<button class="btn btn-primary" @onclick=ShowLocation>
    Show location
</button>

<div class="row mt-2">
    <div class="col-md-6">
        <label class="form-label">Latitude:</label>
        <input type="text" class="form-control" @bind=latitude disabled />
    </div>
    <div class="col-md-6">
        <label class="form-label">Longitude:</label>
        <input type="text" class="form-control" @bind=longitude disabled />
    </div>
    <p>@message</p>
</div>
@if (addressSectionVisible)
{
    <section>
        <button class="btn btn-warning" @onclick="GetAddress">
            Get Address
        </button>
        <textarea class="form-control mt-2" @bind="AddressDet" disabled>
        </textarea>
    </section>
}

@code {
    private double latitude;
    private double longitude;
    private string message;

    private bool addressSectionVisible;
    private string AddressDet;

    private async Task ShowLocation()
    {
        var position = await Geolocation.GetPosition();
        if (!position.Equals(default))
        {
            latitude = position.Latitude;
            longitude = position.Longitude;
            addressSectionVisible = true;
        }
        else
        {
            message = "Location could not be retrieved.";
            addressSectionVisible = false;
        }
    }

    private async Task GetAddress()
    {
        var address = await GeocoderService.GetGeocodingAddressAsync(latitude, longitude);
        AddressDet = address.DisplayAddress;
    }
}

This package makes use of the Nominatim Geocoding API. For more information, you can visit their site at:
https://nominatim.openstreetmap.org/ui/reverse.html