MapsForBlazor 1.0.24

Maps for Blazor is a library that provides components for displaying maps in Blazor applications. It supports various map providers (Esri, Leaflet) and allows developers to easily integrate interactive maps, without any JavaScript settings, into their Blazor projects. One code, one blazor component and many technologies.

KEYWORDS: Minimizing Invoke callers to JavaScript, No JavaScript specific settings, no script references, no css links. One code, one component many technologies.

Keywords

You can display the map in the blazor page using one of the provided technologies (Esri, Leaflet providers). Regardless of the technology provider (Esri, Leaflet), the code for implementing the map will be the same.

ArcGIS	Leaflet
@using static MapsForBlazor.techs.maps.ArcGIS	@using static MapsForBlazor.techs.maps.Leaflet

1. No JavaScript specific configurations required, no API script configurations, no CSS references, etc.
2. One code, one component, many technologies.
3. Optimized code through various solutions
   • minimizing the number of calls to JavaScript;
   • collection searches by destructuring and structuring LINQ expressions

Quick Start

Basic configuration

🔵 Add the right map and technology to your project in just 3 steps:

1. add MapsForBlazor NuGet package:

Using Visual Studio interface:

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

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

Or using Visual Studio console:

• Tools → NuGet Package Manager → Package Manager Console

  NuGet\Install-Package MapsForBlazor
  

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

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

@using MapsForBlazor
@using static MapsForBlazor.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 MapsForBlazor.techs.maps.ArcGIS					//ArcGIS 

Or:

@using static MapsForBlazor.techs.maps.Leaflet  				//Leaflet

Map

Adding the map to the blazor page:

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

Load Parameters

The default (loading) parameters of the map can be configured using the loadParameters parameter of the Map component.

Blazor Page

for ArcGIS:

@using static MapsForBlazor.techs.maps.ArcGIS //for ArcGIS Maps SDK
<Map loadParameters="@loadParameters" height="calc(100vh - 1rem)" width="calc(100vw - 2rem)"/> 

for Leaflet:

@using static MapsForBlazor.techs.maps.Leaflet //for Leaflet
<Map loadParameters="@loadParameters" height="calc(100vh - 1rem)" width="calc(100vw - 2rem)"/> 

Code Block

@code{
   LoadParameters loadParameters = new LoadParameters()
    {
        location = new Location()
        {
            latitude = 50.870847591747186,
            longitude = 4.257255449993001
        },
        zoomLevel = 10,
        mapControls = new MapControls()                                         //the controls to be displayed on the map
        {
            layerList = new LayerList() { position =  Position.bottomRight },   //layer list control
            scaleBar = new ScaleBar() {                                         //scale bar control
                position = Position.bottomRight, 
                unitOfScaleBar = UnitOfScaleBar.metric 
            },

        }
    };
}

Points on the map

To optimize rendering, MapsForBlazor operates with a predefined data structure for points.

public class StreamPoint 
{
    public Guid guid { get; set; }
    public Coordinates coordinates { get; set; } 
    public object value { get; set; } 
    public DateTime timestamp { get; set; }
    public string? type { get; set; }
}

Data addition flow

Loaded event

To add points to the map it is important that the map is already initialized. The first event that is triggered after the map is initialized is OnAfterMapLoaded.

Event initialization:

🔹Blazor Page:

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

🔹Code Block:

@code {
        private async Task OnAfterMapLoaded(MapEventArgs args)
        {

        }
    }

Adding points

To add points to the map, you can use the Add method of the Map component. This method accepts a list of StreamPoint objects.

🔹Blazor Page:

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

🔹Code Block:

@code {
        private async Task OnAfterMapLoaded(MapEventArgs args)
        {
             await map.Geometric.Points.Add(new List<StreamPoint>(){});
        }
    }

Removing

await  map.Geometric.Points.Remove();

Update

You can update both the attributes and the point position (coordinates):

await  map.Geometric.Points.Update(new List<StreamPoint>(){});

OnClick Event

The points collection provides the OnClick event that allows you to return the points near which the click was made on the map. The distance to search for points, from the point where the click was made, is one hundredth of the diagonal of the visible area of ​​the map.

    map.Geometric.Points.OnClick += async (object? sender, StreamPointEventArgs args) =>
   {
       Console.WriteLine($"    Clicked point with count {args.points.Count()}");
   };

Where:

    public class StreamPointEventArgs : EventArgs
    {
       public List<StreamPoint> points { get; set; }    //points near the point where the click was made
       public Coordinates geoid { get; set; }           //geographical coordinates of the point where the click was made
       public Coordinates screen { get; set; }          //screen coordinates of the point where the click was made
    }

Appearance

Appearance is a method that allows filtering and applying properties specific to the display of points on the map. Appearance supports the SetStyle() and SetPopup() methods.

1. SetStyle()

Changing the appearance (Style) of the point on the map can be done using the following classes (SetStyle()):

• PointStyle → base class with which you can display predefined markers;

    public class PointStyle
    {
        public string title { get; set; } = "without title";
        public VisibilityZoomLevels visibilityZoomLevels { get; set; } = new VisibilityZoomLevels();
        public int radius { get; set; } = 4;
        public string? fillColor { get; set; }
        public string? color { get; set; }
        public int weight { get; set; } = 1;
        public double opacity { get; set; } = 1;
        public double fillOpacity { get; set; } = 1;
    }
  

• DynamicPointSVG → is a class with which you can use svg elements to display the point on the map. The DynamicPointSVG class defines a set of SVG elements that are scalable with the zoom level and are only displayed in the current view.

    public class DynamicPointSVG 
    {
        public string title { get; set; } = "without title";
        public VisibilityZoomLevels visibilityZoomLevels { get; set; } = new VisibilityZoomLevels();
        public string? htmlContent { get; set; }
        public int dimension { get; set; }
        public int scaling { get; set; } = 100;
    }
  

❗ Limitations of DynamicPointSVG: When using @using static MapsForBlazor.techs.maps.Leaflet it will not be displayed in Layers List control.

2. SetPopup()

Another category of properties related to the appearance of the point on the map refers to the Popups associated with it (SetPopup()).

    public class Popup
    {
        public string content { get; set; } = "without content";
        public string title { get; set; } = "without title";
    }

Appearance settings can be cascaded (one after another, on the same Appearance filter):

   await map.Geometric.Points.Appearance(e => e.type == "A" || e.type == "B")
    .SetStyle(new PointStyle() { radius = 14, color = "green", fillColor = "azure", weight = 4 })
    .SetPopup(new Popup() { content = "<h4 style = 'background-color:gray;color:orange'>Text on popup</h4>", title = "titlu"});

Other examples:

1. No filtering (the entire StreamPoint collection will have the same Appearance):

   await map.Geometric.Points.Appearance()
    .SetStyle(new PointStyle() { radius = 14, color = "green", fillColor = "azure", weight = 4 })
    .SetPopup(new Popup() { content = "<h4 style = 'background-color:gray;color:orange'>Text on popup</h4>", title = "titlu"});
   

2. Contained in an Array (Contains clause):

   string[] types = new string[] { "A", "B" };
   await map.Geometric.Points.Appearance(e => types.Contains(e.type))
    .SetStyle(new PointStyle() { radius = 14, color = "green", fillColor = "azure", weight = 4 })
    .SetPopup(new Popup() { content = "<h4 style = 'background-color:gray;color:orange'>Text on popup<</h4>", title = "titlu"});
   

3. SetLabel()

The SetLabel() method provides the ability to add text to the map. The text will be associated with a StreamPoint

 await map.Geometric.Points.Appearance(e => e.type == "Industrial")
.SetStyle(new DynamicPointSVG()
{
    dimension = 20,
    scaling = 100,
    htmlContent = "<defs><radialGradient id='grad6' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'><stop offset='0%' stop-color='red' /><stop offset='100%' stop-color='orange' /></radialGradient></defs><polygon  style='fill-opacity:0.42;stroke:red;stroke-width:2' points='20,20 40,30 50,10 60,30 80,20 70,40 90,50 70,60 80,80 60,70 50,90 40,70 20,80 30,60 10,50 30,40' fill='url(#grad6)'  />",
    title = "Parks",
    visibilityZoomLevels = new VisibilityZoomLevels() { minZoomLevel = 8, maxZoomLevel = 10 }
})
.SetLabel(new Label() { title = "Ind etichete", text = "Type: ${type}\n${value}", xyAnchor = new double[2] { 0, 0 }, font = new Font() { size = 12, family = "veranda", weight = "normal" } });

Laurentiu Ichim, Bucharest