This is a fork of the not anymore maintained project BlazorLeafet from Mehigh17. The License itself can be found here (MIT License)
ACO.Blazor.Leaflet is a wrapper offering easy-to-use Blazor components that expose the Leaflet API in C#. It allows you to create easily customizable maps without getting outside your existing .NET ecosystem.
The wrapper is still in its early days so it's very lackluster and doesn't expose the entirety of leaflet's API.
Check out the samples project to learn how to use it.
Install the package in the target project:
NuGet package is not pushed yet - if you want to use this fork you have to clone it manually right now
dotnet add package ACO.Blazor.Leaflet
In your _Host.cshtml/_Layout.cshtml (Blazor Server) or index.html (Blazor WebAssembly), reference the interoperability script in the <head> element like so:
<!-- ACO.Blazor.Leaflet -->
<script src="_content/ACO.Blazor.Leaflet/leafletBlazorInterops.js"></script>
<link rel="stylesheet" href="_content/ACO.Blazor.Leaflet/leaflet/leaflet.css"/>You can now use the components and the rest of the library.
Create the map
<!-- You must wrap the map component in a container setting its actual size. -->
<div id="mapContainer" style="width: 300px; height: 300px;">
<LeafletMap Map="_map" />
</div>Bind the parameters to the respective objects like so
private Map _map = new Map(jsRuntime);
private PointF _startAt = new PointF(47.5574007f, 16.3918687f);Add a marker with a tooltip and an icon
// Create the marker
var marker = new Marker(0.23f, 32f);
marker.Tooltip = new Tooltip { Content = "This is a nice location!" };
marker.Icon = new Icon { Url = "... some url" };
// Add it to the layers collection
_map.AddLayer(marker);Or add a rectangle that highlights a zone
var rect = new Rectangle { Shape = new RectangleF(21f, 20f, 10f, 20f) };
rect.Fill = true; // This will fill the rectangle with a color
rect.FillColor = Color.Red; // Make the filled area red
rect.Popup = new Popup { Content = "This is a restricted area!" }; // Create a popup when the area is clicked
// Add it to the layers collection
_map.RemoveAdd(rect);Or fit bounds on certain corners
_map.FitBounds(new PointF(45.943f, 24.967f), new PointF(46.943f, 25.967f), maxZoom: 5f);