https://github.com/bjtrounson/blazorleafletinterop
.NET 7 Blazor WASM Interop for Leaflet
https://github.com/bjtrounson/blazorleafletinterop
blazor blazor-webassembly interop leaflet leafletjs mapping maps net7
Last synced: 11 months ago
JSON representation
.NET 7 Blazor WASM Interop for Leaflet
- Host: GitHub
- URL: https://github.com/bjtrounson/blazorleafletinterop
- Owner: bjtrounson
- Created: 2023-10-15T07:50:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-19T09:51:32.000Z (over 2 years ago)
- Last Synced: 2024-01-19T10:58:20.416Z (over 2 years ago)
- Topics: blazor, blazor-webassembly, interop, leaflet, leafletjs, mapping, maps, net7
- Language: C#
- Homepage:
- Size: 492 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
- [x] Map
- [x] TileLayer
- [x] Marker
- [x] Popup, Tooltip
- [x] Polyline, MultiPolyline
- [x] FeatureGroup, LayerGroup, GeoJSON
- [x] Control.Zoom, Control.Scale, Control.Attribution, Control.Layers
- [x] Icon
- [x] Events (**should work but are not tested**)
- [ ] ImageOverlay, SVGOverlay, VideoOverlay
- [ ] Renderers
- [ ] Rectangle, Polygon, Circle, CircleMarker
- [ ] Bounds, DivIcon
## Installation
Install the package from NuGet
```bash
dotnet add package BlazorLeaflet
```
```powershell
Install-Package BlazorLeafletInterop
```
Add the latest leaflet version to your index.html
```html
```
Add this service to your Program.cs
```csharp
// ...Program.cs
builder.Services.AddMapService();
```
## Examples
To make a simple map use the following code
```csharp
@code {
private MapOptions Options = new MapOptions() {
Center = new LatLng(51.505, -0.09),
Zoom = 13
};
}
```
### Marker Usage
```csharp
@code {
private MapOptions Options = new MapOptions() {
Center = new LatLng(51.505, -0.09),
Zoom = 13
};
}
```
### Popup Usage
```csharp
Hello world!
I am a popup
@code {
private MapOptions Options = new MapOptions() {
Center = new LatLng(51.505, -0.09),
Zoom = 13
};
}
```
### Accessing Leaflet Method's
```csharp
Hello world!
I am a popup
@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.