https://github.com/Mehigh17/BlazorLeaflet

BlazorLeaflet is a Blazor component wrapping Leaflet's APIs, offering a simple and homogeneous implementation of the Leaflet maps.
https://github.com/Mehigh17/BlazorLeaflet

blazor interop leaflet leaflet-maps maps

Last synced: 18 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Mehigh17/BlazorLeaflet
• Owner: Mehigh17
• License: mit
• Created: 2019-09-22T08:36:17.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-11-25T12:19:44.000Z (almost 2 years ago)
• Last Synced: 2024-08-01T15:05:47.549Z (4 months ago)
• Topics: blazor, interop, leaflet, leaflet-maps, maps
• Language: C#
• Homepage:
• Size: 7.43 MB
• Stars: 177
• Watchers: 23
• Forks: 91
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    

    
Blazor Leaflet

    


        Description •

        Installation •

        Samples •

        Contribute •

        API Doc

    



# Description

BlazorLeaflet 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:

```

dotnet add package BlazorLeaflet

```

In your `_Host.cshtml` (Blazor Server) or `index.html` (Blazor WebAssembly), reference the interoperability script in the `` element like so:

```html

```

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

# Samples

Create the map

```html



    



```


Bind the parameters to the respective objects like so

```cs

private Map _map = new Map(jsRuntime);

private PointF _startAt = new PointF(47.5574007f, 16.3918687f);

```

Add a marker with a tooltip and an icon

```cs

// 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

```cs

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

```cs

_map.FitBounds(new PointF(45.943f, 24.967f), new PointF(46.943f, 25.967f), maxZoom: 5f);

```

# Contribute

The `master` branch is used as the development branch. If you are looking for a specific release, check the tags. If you are willing to contribute, fork this repository, and create your own branch from master, preferably give it a meaningful name, regarding your change or the issue that you are targeting. For large modifications, create an issue before, and a WIP pull request. Always rebase before review requests.