Persilsoft.Leaflet.Blazor 1.0.1

Leaflet Blazor

A Leaflet service for Blazor and Razor Components applications.

Example

Simple map
You should register the Leaflet services:

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=AddMarker>Add 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 AddMarker()
    {
        LeafletLatLong Point = new(latitude, longitude);
        lastIndex = await myMap.AddMarker(Point, title, description);
        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");
    }
}