Persilsoft.Leaflet.Blazor 1.0.6

Leaflet Blazor

A Leaflet service for Blazor and Razor Components applications.

Example

Simple map
First, you need to register the following service group in the dependency container.

using ServiceCollectionExtensions;

builder.Services.AddLeafletServices();

Now, you can the Map component to your page:

@page "/simplemap"

<div class="map-container">
    <Map ZoomLevel=2 />
</div>

Where:
ZoomLevel: Defines the initial zoom (required).

Optionally, you can set the OriginalPoint parameter:

@page "/original-point"

<div class="map-container">
    <Map ZoomLevel=18
         OriginalPoint="originalPoint" />
</div>

@code {
    private readonly LeafletLatLong originalPoint = new(-12.04490, -77.02980);
}

Where:
OriginalPoint: Defines the geographical center of the map.

You can control the dimensions for the map container.

.map-container {
    width: 100%;
    height: 70vh;
}

Set View / Fly to
Set view: Sets the view of the map (geographical center and zoom)
Fly to: Sets the view of the map (geographical center and zoom) performing a smooth pan-zoom animation.

@page "/setview-flyto"

<div class="row mb-2">
    <div class="col-sm-4">
        <label class="form-label">Latitude</label>
        <input @bind=model.Latitude class="form-control" />
    </div>
    <div class="col-sm-4">
        <label class="form-label">Longitude</label>
        <input @bind=model.Longitude class="form-control" />
    </div>
    <div class="col-sm-4">
        <label class="form-label">Zoom level</label>
        <select @bind=model.ZoomLevel class="form-select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
        </select>
    </div>
</div>
<div class="text-center mb-2">
    <button class="btn btn-primary" @onclick=ExcuteSetView>Set view</button>
    <button class="btn btn-info" @onclick=ExcuteFlyTo>Fly to</button>
</div>
<div class="map-container">
    <Map ZoomLevel="1"
         @ref=myMap/>
</div>
@code {
    private InputDataModel model = new();
    private Map myMap;

    private async Task ExcuteSetView()
    {
        await myMap.SetView(new LeafletLatLong(model.Latitude, model.Longitude), model.ZoomLevel);
    }

    private async Task ExcuteFlyTo()
    {
        await myMap.FlyTo(new LeafletLatLong(model.Latitude, model.Longitude), model.ZoomLevel);
    }

    class InputDataModel
    {
        public double Latitude { get; set; } = -12.04490;
        public double Longitude { get; set; } = -77.02980;
        public byte ZoomLevel { get; set; } = 18;
    }
}

Markers
You can add markers

@page "/markers"

<div class="row mb-2">
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="form-label">Title:</label>
            <input class="form-control" @bind=title />
        </div>
        <div class="mb-3">
            <label class="form-label">Latitude (-90 - 90):</label>
            <input class="form-control" @bind=latitude />
        </div>
    </div>
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="form-label">Description:</label>
            <input class="form-control" @bind=description />
        </div>
        <div class="mb-3">
            <label class="form-label">Longitude (-180 - 180):</label>
            <input class="form-control" @bind=longitude />
        </div>
    </div>
</div>
<div class="row mb-2">
    <div class="mb-3">
        <button class="btn btn-info" @onclick=AddDefaultMarker>Add default marker</button>
        <button class="btn btn-warning" @onclick=AddCustomMarker>Add custom marker</button>
        <button class="btn btn-success" @onclick=AddDraggableMarker>Add draggable marker</button>
        <button class="btn btn-primary" @onclick=RemoveFirstMarker>Remove first marker</button>
        <button class="btn btn-danger" @onclick=RemoveAllMarkers>Remove all markers</button>
    </div>
    <div>@message</div>
</div>

<div class="map-container">
    <Map OriginalPoint=originalPoint
         ZoomLevel="14"
         OnCreatedMap="OnCreatedMap" />
</div>
@code {
    private LeafletLatLong originalPoint;
    private Map myMap;

    private string title;
    private string description;
    private double latitude;
    private double longitude;

    private int lastIndex;
    private string message;

    protected override void OnInitialized()
    {
        latitude = -12.04490;
        longitude = -77.02980;
        originalPoint = new LeafletLatLong(latitude, longitude);
    }

    private async Task AddDefaultMarker()
    {
        LeafletLatLong point = new(latitude, longitude);
        lastIndex = await myMap.AddMarker(point, title, description);
        message = $"Marker with index {lastIndex} added.";
        StateHasChanged();
    }

    private async Task AddCustomMarker()
    {
        LeafletLatLong point = new(latitude, longitude);
        lastIndex = await myMap.AddMarker(point, title, description, "images/destination.png");
        message = $"Marker with index {lastIndex} added.";
        StateHasChanged();
    }

    private async Task AddDraggableMarker()
    {
        LeafletLatLong point = new(latitude, longitude);
        lastIndex = await myMap.AddDraggableMarker(point, title, description, "images/destination.png");
        message = $"Marker with index {lastIndex} added.";
        StateHasChanged();
    }

    private async Task RemoveFirstMarker()
    {
        message = $"Marker with index 0 removed.";
        await myMap.RemoveMarker(0);
    }

    private async Task RemoveAllMarkers()
    {
        message = $"All markers have been removed";
        await myMap.RemoveAllMarkers();
    }

    private async Task OnCreatedMap(Map map)
    {
        myMap = map;
        await myMap.AddMarker(originalPoint, "Origin", "This is a store");
    }
}

Note:
If you need your own icon for the marker, it is recommended to be 32x32 pixels in size.

Integration with Persilsoft.Nominatim.Blazor
By integrating with the services provided by the Persilsoft.Nominatim package, you can obtain the user's location, their address, and display it with a marker on the map.

To do this, you need to register the following group of services:

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

Next, you can use them:

@page "/show-location"
@using Persilsoft.Leaflet.Blazor
@using Persilsoft.Nominatim.Geolocation.Blazor
@using Persilsoft.Nominatim.Geolocation.Blazor.Geocoding
@inject GeolocationService Geolocation
@inject IGeocoder Geocoder

<div class="mb-2">
    <button class="btn btn-primary" @onclick=ExceuteShowLocation>
        Show location
    </button>
</div>
<div class="map-container">
    <Map ZoomLevel="3"
         OnMarkerDragend="OnMarkerDragend"
         @ref=myMap />
</div>
<div class="mt-2">
    @(new MarkupString(message))
</div>

@code {
    private string message;
    private Map myMap;

    private async Task ExceuteShowLocation()
    {
        var position = await Geolocation.GetPosition();
        if (!position.Equals(default))
        {
            var mapPosition = new LeafletLatLong(position.Latitude, position.Longitude);
            await myMap.SetView(mapPosition);
            int markerId = await myMap.AddDraggableMarker(point: mapPosition,
                                                          title: "My location",
                                                          description: "",
                                                          iconUrl: "images/my-home.png");

            await UpdateAddress(markerId, position.Latitude, position.Longitude);
        }
        else
        {
            message = "Location could not be retrieved.";
        }
    }

    private async Task OnMarkerDragend(DragendMarkerEventArgs e)
    {
        await UpdateAddress(e.MarkerId, e.Position.Latitude, e.Position.Longitude);
    }

    private async Task UpdateAddress(int markerId, double latitude, double longitude)
    {
        var address = await Geocoder.GetGeocodingAddressAsync(latitude, longitude);

        var popupMessage = $"Latitude: {latitude}<br/>" +
                    $"Longitude: {longitude}<br/>" +
                    $"{address.DisplayAddress}";

        message = $"coordinates: ({latitude}, {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/>";

        await myMap.SetPopupMarkerContent(markerId: markerId, content: popupMessage, openPopup: true);
    }
}