Skip to content

BlazorLeaflet is a Blazor component wrapping Leaflet's APIs, offering a simple and homogeneous implementation of the Leaflet maps.

License

Notifications You must be signed in to change notification settings

SpatialFocus/ACO.Blazor.Leaflet

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ACO.Blazor.Leaflet

License

This is a fork of the not anymore maintained project BlazorLeafet from Mehigh17. The License itself can be found here (MIT License)

Description

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.

Installation

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/SpatialFocus.ACO.Blazor.Leaflet/leafletBlazorInterops.js"></script>
<link rel="stylesheet" href="_content/SpatialFocus.ACO.Blazor.Leaflet/leaflet/leaflet.css"/>

You can now use the components and the rest of the library.

Samples

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

About

BlazorLeaflet is a Blazor component wrapping Leaflet's APIs, offering a simple and homogeneous implementation of the Leaflet maps.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 82.4%
  • C# 11.1%
  • CSS 3.3%
  • HTML 3.2%