Blazor Leaflet Interop

It 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.

Implemented Components

• Map
• TileLayer
• Marker
• Popup, Tooltip
• Polyline, MultiPolyline
• FeatureGroup, LayerGroup, GeoJSON
• Control.Zoom, Control.Scale, Control.Attribution, Control.Layers
• Icon
• Events (should work but are not tested)
• ImageOverlay, SVGOverlay, VideoOverlay
• Renderers
• Rectangle, Polygon, Circle, CircleMarker
• Bounds, DivIcon

Installation

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/[email protected]/dist/leaflet.min.js"></script>

Add this service to your Program.cs

// ...Program.cs
builder.Services.AddMapService();

Examples

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
	};
}

Marker Usage

<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
	};
}

Popup Usage

<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
	};
}

Accessing Leaflet Method's

<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();
	}
}

Contributing

If you want to contribute to this project, feel free to do so. Just fork the project and create a pull request.