Leaflet Map for Blazor

Leaflet for Blazor is a library that provides components for displaying map in Blazor applications. Allows developers to easily integrate interactive maps, without any JavaScript settings, into their Blazor projects.

🔑 KEYWORDS: Minimizing Invoke callers to JavaScript, No JavaScript specific settings, no script references, no css links.

🧩 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
   • 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
        },
  

---

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

Thank you for choosing this package!

Laurentiu Ichim