Blazor WASM interop for Leaflet
License
—
Deps
2
Install Size
—
Vulns
✓ 0
Published
Jan 19, 2024
$ dotnet add package BlazorLeafletInteropIt is a work in progress and only supports parts of the Leaflet API.
This project is a component based wrapper around the Leaflet API, but some components can be used outside of RenderTree.
Install the package from NuGet
dotnet add package BlazorLeaflet
Install-Package BlazorLeafletInterop
Add the latest leaflet version to your index.html
<!-- ...index.html -->
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
Add this service to your Program.cs
// ...Program.cs
builder.Services.AddMapService();
To make a simple map use the following code
<Map MapOptions="Options">
<TileLayer UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
</Map>
@code {
private MapOptions Options = new MapOptions() {
Center = new LatLng(51.505, -0.09),
Zoom = 13
};
}
<Map MapOptions="Options">
<TileLayer UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker LatLng="new LatLng(51.5, -0.0.9)"></Marker>
</Map>
@code {
private MapOptions Options = new MapOptions() {
Center = new LatLng(51.505, -0.09),
Zoom = 13
};
}
<Map MapOptions="Options">
<TileLayer UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker LatLng="new LatLng(51.5, -0.0.9)">
<Popup>
<b>Hello world!</b><br>
I am a popup
</Popup>
</Marker>
</Map>
@code {
private MapOptions Options = new MapOptions() {
Center = new LatLng(51.505, -0.09),
Zoom = 13
};
}<Map MapOptions="Options">
<TileLayer UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker @ref="MarkerRef" LatLng="new LatLng(51.5, -0.0.9)">
<Popup>
<b>Hello world!</b><br>
I am a popup
</Popup>
</Marker>
</Map>
@code {
// Creating a reference to the component,
// gives you access to the Leaflet methods for that class.
private Marker? MarkerRef;
private MapOptions Options = new MapOptions() {
Center = new LatLng(51.505, -0.09),
Zoom = 13
};
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (MarkerRef is not null) await MarkerRef.OpenPopup();
}
}If you want to contribute to this project, feel free to do so. Just fork the project and create a pull request.