LeafletForBlazor 4.0.8.88

Leaflet Map for Blazor

Leaflet for Blazor is a library that provides components for displaying map in Blazor applications.

🔑 KEYWORDS: Pure C# - Write map logic entirely in .NET / no JavaScript interop boilerplate, LINQ Integration - Destructuring/Structuring LINQ expression, Fluent API - objects Hierarchical and Linguistic structure and Chain methods, Plugins Framework - allows you to extend LeafletForBlazor, Zero JavaScript Config - no script references and no css links etc

🧩 Version 4.0 ♻️rehydrates the Map control. The new control will inherit the minimalism of the Map control and the optimizations of the RealTimeMap control.

⚙️ Core Concepts

1. No JavaScript or HTML specific configurations required, no API script configurations, no CSS references, no HTML items etc.
2. Optimized code through various solutions
   • minimizing the number of calls to JavaScript;
   • collection searches by destructuring and structuring LINQ expressions;
   • fluent API, a design pattern that allows code to be written in a readable way, similar to an English sentence
   • reducing size of the JavaScript code by removing unused code.
   • Memory Cache
3. Plugins framework - By writing simple wrapper code, the MapPlugins framework allows LeafletForBlazor to be extended with already developed Leaflet.js plugins (add-ons) - more about Leaflet.js Plugins.

More about Core Concept

🚀 Quick Start

🔧 Project setup

🔵 Add the Map component to your project in just 3 steps:

1. Install the NuGet package:

• From VS interface: Tools → NuGet Package Manager → Manage NuGet Packages for Solution...

  Search for "LeafletForBlazor" and add the package to the project or solution.

• From Package Manager Console: Tools → NuGet Package Manager → Package Manager Console

  NuGet\Install-Package LeafletForBlazor
  

2. Add the required namespaces in _Imports.razor

To do this, add the following directives to the _Imports.razor file

    @using LeafletForBlazor                             //working with package classes
    @using static LeafletForBlazor.Map                  //working with Map class
    @using static LeafletForBlazor.techs.maps.Leaflet   //working with Leaflet API

3. Use the Map component

Razor

    <Map height="100vh" width="100vw"/>

🗺️ Map and Default Configuration

Use the loadParameters property to set the initial map view:

Razor

    <Map loadParameters="@loadParameters" height="100vh" width="100vw"/>

C# - Default Map Configuration

LoadParameters loadParameters = new()
{
    location = new Location()                                               //Default center of the Map View
    {
        latitude = 50.83112274500208,
        longitude = 4.407353347319803
    },
    zoomLevel = 10                                                          //Default zoom level
};

Additional default configurations are available, including attribution control visibility, map basemap layers, and map controls such as the scale control.

more about Map Configuration - Blazor WebAssembly Standalone App

more about Map Configuration - .NET MAUI Blazor Hybrid App

🗺️ More about Map component

⚡ Map Events

OnAfterMapLoaded

Fires after the Leaflet map instance has fully initialized on the client side. Use it to access the map's initial state or trigger post-load logic.

Razor

<Map height="100vh" width="100vw" OnAfterMapLoaded="@OnAfterMapLoaded" />

C# - Handler signature

private Task OnAfterMapLoaded(MapEventArgs args)
{
    Console.WriteLine($"lat: {args.centerOfView.latitude} long: {args.centerOfView.longitude}");
    return Task.CompletedTask;
}

more about Map Events - Blazor WebAssembly Standalone App

more about Map Events - .NET MAUI Blazor Hybrid App

👁️ View class

View is the class that allows you to control the visible area of ​​the map.

For example, you can use the View class to get the map's center:

    var center = await map!.View.getCenterAsync();

...setting the map center:

    map!.View.SetCenter(40.24, 5.48);

more about View class

ℹ️ Attribution class

The Attribution class provides the methods needed to interact with the map's attributionControl:

For example, you can completely remove the attributionControl:

await map!.Attribution.Remove();  

//strongly discouraged from an ethical standpoint (Leaflet.js BSD 2 license)

more about Attribution class

📐 Geometric class

The Geometric class contains classes that operate on geometries obtained from various sources.

📍 StreamPoint collection

StreamPoint collection provides real-time map synchronization - any property change (coordinates, appearance, timestamp) instantly updates the map visualization. Objects are cached for performance but remain fully dynamic.

The StreamPoint collection is hosted by @map.Geometric.Points and provides you methods for handling predefined but hierarchically extensible root data structure:

1. Add(), Remove(), Update() for collection handling;
2. Appearance() for point the aspect in the map;
3. StreamPoint collection events;

more about StreamCollection - Blazor WebAssembly Standalone App

more about StreamCollection - .NET MAUI Blazor Hybrid App

📁 Working with Files

The @map.Geometric.From.Files class allows you to load data from files stored on a web service host (https://...). Full RFC 7946 Feature Support.

more about working with files

📊 Dashboard

StreamPoint collection can be used to monitor moving targets: vehicles, boats, aircraft, even fleets of vehicles, drones and so one. Both the map and the StreamPoint collection can be configured to create a Map Dashboard.

more about Map Dashboard

🔌 Map plugins

However, extending the NuGet package can only be implemented by adding JavaScript code.

The Map component provides the MapPlugins slot (Plugin Framework), allowing you to extend LeafletForBlazor with additional Leaflet functionality. It enables the development of features in JavaScript and grants you access to the map (the Leaflet map instance) and the L object.

    <Map>
        <MapPlugins>
                    @* Custom Blazor Component - Leaflet.js Fullscreen plugin  *@
                    <Fullscreen            
                        Map="@context.map" 
                        L="context.LeafletCore"
                        url="https://unpkg.com/leaflet.fullscreen/dist/Control.FullScreen.umd.js"
                        href="https://unpkg.com/leaflet.fullscreen/dist/Control.FullScreen.css" />
					@*   other plugins or custom functionality  *@
        </MapPlugins>
    </Map>

By writing simple wrapper code, the MapPlugins framework allows LeafletForBlazor to be extended with already developed Leaflet.js add-ons.

more about MapPlugins and WASM

more about MapPlugins and MAUI

📦 Map Components

The Map component provides the MapComponents slot, allowing you to extend the LeafletForBlazor map with graphical interface elements.

    <Map>
        <MapComponents>
            <Toolbar/>
			@*   other MapComponents or html elements  *@
        </MapComponents>
    </Map>

Description	Image
The component displays a Legend on the map, allowing users to quickly understand the meaning of the symbols and colors applied to data layers. In the current version, the legend is only available for GeoJSON files and StreamPoint Collection. Legend can also be used in .NET MAUI projects.
Contextual display driven by data source with MapPopup
The Toolbar it is a map component that allows for expansion with various buttons and even tools.
A Toggle is a check/uncheck component that can be hosted in a toolbar.

O-L I - ᶜ⁴ˡᵘ⁷ᵘ⁵ᵘᶠˡᵉ⁷⁸ᵘⁿ 🐕

Thank you for choosing this package!

Laurentiu Ichim