Persilsoft.GeolocationMap.Blazor 1.0.6

Persilsoft.GeolocationMap.Blazor

This package integrates the retrieval of geographical coordinates and addresses provided by the Persilsoft.Nominatim.Geolocation package, with the mapping capabilities offered by the Persilsoft.Leaflet.Blazor package.

Example

First, you need to register the following service groups in the dependency container.

using ServiceCollectionExtensions;

builder.Services.AddGeolocationService();
builder.Services.AddNominatimGeocoderService();
builder.Services.AddLeafletServices();

Now, you can use it:

@page "/show-position"
@using Persilsoft.Nominatim.Geolocation.Blazor.Geocoding

<div class="map-container">
    <GeolocationMap OnSetPosition="OnSetPosition"
                    OnSetPositionError="OnSetPositionError" />
</div>
<div class="mt-2">
    @(new MarkupString(errorMessage))
</div>

@code {
    private string errorMessage;

    private void OnSetPosition(GeocodingAddress address)
    {
        errorMessage = $"Coordinates: ({address.Latitude}, {address.Longitude})<br/>" +
                       $"Address: {address.DisplayAddress} <br/>" +
                       $"Country: {address.CountryCode} <br/>" +
                       $"Department: {address.Department} <br/>" +
                       $"Province: {address.Province} <br/>" +
                       $"District: {address.District} <br/>" +
                       $"Reference: {address.Reference} <br/>";
    }

    private void OnSetPositionError(string message)
    {
        errorMessage = message;
    }
}

If you want to set your own icon for the marker, you can use the ImageUrl parameter.

<GeolocationMap OnSetPosition="OnSetPosition"
                    OnSetPositionError="OnSetPositionError"
                    ImageUrl="images/my-home.png"/>

Note that it's recommended for your icon to have a size of 32x32 pixels.*