LeafletForBlazor 4.0.0.22

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, 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
   • redusing size of the JavaScript code by removing unused code.
   • Memory Cache

More about Core Concept

🚀 Quick Start

🔧 Basic configuration

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

1. add LeafletForBlazor NuGet package:

Using Visual Studio interface:

• Tools → NuGet Package Manager → Manage NuGet Packages for Solution...

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

Or using Visual Studio console:

• Tools → NuGet Package Manager → Package Manager Console

  NuGet\Install-Package LeafletForBlazor
  

2. add the LeafletForBlazor namespace to the project, using the @using directive

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

	@using LeafletForBlazor
	@using static LeafletForBlazor.Map

3. Configuring the Blazor page (which will host the Map control):

The @using directive allows selecting the API for generating the map:

@using static LeafletForBlazor.techs.maps.Leaflet

🗺️ Add Map

Adding the map to the blazor page:

<Map height="calc(100vh - 1rem)" width="calc(100vw - 2rem)"/>

More information

🧭 Map configuration

The loadParameter parameter of the Map component allows you to configure the map at initialization. The initialization parameters are:

• 📍 Location of the center of the displayed map (View of Map):

   location = new Location()
   {
       latitude = 45.2831589721668,
       longitude = 27.98740645063448
   },
  

• 🔍 Zoom Level

    zoomLevel = 12,
  

• 🎛️ Configuring map controls

    mapControls = new MapControls()
    {
        layerList = new LayerList() { position = Position.topRight },
        scaleBar = new ScaleBar()
        {
            position = Position.bottomRight,
            unitOfScaleBar = UnitOfScaleBar.metric
        },
  

more about Map Configuration - Blazor WebAssembly Standalone App

more about Map Configuration - .NET MAUI Blazor Hybrid App

📍 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 operating functionalities with a predefined but hierarchically extensible root data structure.

more about StreamCollection - Blazor WebAssembly Standalone App

more about StreamCollection - .NET MAUI Blazor Hybrid App

🎨 Appearance

Appearance is a method that accepts Expression<Func<T, bool>> predicates and allows filtering and applying different styles to the elements displayed in the map:

await map.Geometric.Points.Appearance(e.type => e.type == "Market").SetStyle(...).SetLabel(...);

more about Appearance - Blazor WebAssembly Standalone App

more about Appearance - .NET MAUI Blazor Hybrid App

🛠️ Settings

Here you can configure how the collection of points displayed on the map behaves.

map.Geometric.Points.settings = new LeafletForBlazor.techs.core.Geometry.Points.Settings(){};

⚡ Events

StreamPoint Collection Events.

more about events

📊 Dashboard

StreamPoint collection can be used to monitor moving targets: vehicles, boats, aircraft, even fleets of vehicles, drones and so one.

more about Map Dashboard

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

Thank you for choosing this package!

Laurentiu Ichim