LeafletForBlazor 2.0.2.4

Leaflet Map for Blazor

You can quickly add a map to the blazor page. Starting with version 2.0.0, LeafletForBlazor provide you a new control (RealTimeMap) for real time data displaying and analysis. Data can come from various (provided by various) tracking devices: router (static) and mobile phone, GPS of the fleet (dynamic) etc.

NuGet Package

This package is under development, but I will keep the code compatible from one version to another.

You can find more information:

• LeafletForBlazor GitHub
• Youtube channel
• Youtube LeafletForBlazor playlist

---

What's New?

Geometric.Points

The changeExtentWhenAddPoints property of the Geometric.Points class allows changing or not the current view of the map at the same time as add one or more points:

realTimeMap.Geometric.Points.changeExtentWhenAddPoints = true;

or

realTimeMap.Geometric.Points.changeExtentWhenAddPoints = false;

Change appearance of Map points collection

To simplify the written code, a new form of the Appearance() method has been added that restricts the selection to the type of StreamPoint points. This method is AppearanceOnType() and the predicate of this method is limited to the type attribute of points:

       realTimeMap.Geometric.Points.AppearanceOnType(item=>item.type == "ambulance").pattern = new RealTimeMap.PointSymbol()
        {
            radius = 6,
            fillColor = "green"
        };

In addition, the pattern property of the AppearanceOnType() method accepts the configuration of the scales (min, max) between which the points on the map are displayed:

       realTimeMap.Geometric.Points.AppearanceOnType(item => item.type == "intervention crew").pattern = new RealTimeMap.VisibilityZoomLevel()
        {
           maxZoomLevel = 18,
           minZoomLevel = 15
        };

Geometric.DisplayPointsFromArray

Obsolete methods

The add() method for adding points is obsolete/deprecated. The add() method is replaced by the addPoint() method:

await realTimeMap.Geometric.DisplayPointsFromArray.addPoint(
        new double[2] { 43.97248976827578, 25.326675905214792 });

or customizing the appearance of the point dispalayed in the map:

await realTimeMap.Geometric.DisplayPointsFromArray.addPoint(
        new double[2] { 43.97248976827578, 25.326675905214792 }, 
        new RealTimeMap.PointSymbol()
        {
            color = "yellow",
            fillColor = "yellow",
            opacity = 0.8,
            fillOpacity = 0,
            radius = 12,
            weight = 2
        });

The deleteAll() method for deleting points is obsolete/deprecated. The deleteAllPoints() method is replaced by the deleteAll() method:

await realTimeMap.Geometric.DisplayPointsFromArray.deleteAllPoints();

addLabel() method

The addLabel() method on the DisplayPointsFromArray class will allow you to display a text in the map:

await realTimeMap.Geometric.DisplayPointsFromArray.addLabel( new RealTimeMap.LabelInfo()
{
        coordinates = new double[2] { 43.97248976827578, 25.326675905214792 },
        textAnchor = new double[2] { 0, 16 },
        text = "text displayed on the map",
        labelStyle = "min-width:40px;height:100%;background-color:#920202;border-radius:6px;color:white;text-align:center;font-size:11px;opacity:0.6"
});

The labelStyle property allows you to formating label displayed in the map.

---

RealTimeMap Blazor control

This new control is optimized for working with streaming data.

Working with a single point (ex. my position)

A first method added to the control is movePoint(args...) which allows displaying the position of a single point. The method can be used to monitor one's own position.

The movePoint() method accepts from one argument to three arguments:

• coordinate (double[2]): point coordinate. For example: realTimeMap.movePoint([44.4502578, 26.1108199]). Latitude and Longitude in degrees, geographical coordinates;
• symbol (PointSymbol/PointIcon): the point can be displayed with a circle (PointSymbol) or an icon/*.png (PointIcon);
• tooltip (PointTooltip): configuring a tooltip with various information;

The blue print definitions of the classes used by the movePoint() method:

PointTooltip

public class PointTooltip
{
    public string? content { get; set; }        //accept html content
    public bool permanent { get; set; } = true;
    public double opacity { get; set; } = 0.9;
}

PointSymbol

 public class PointSymbol
{
    public int radius { get; set; } = 4;
    public string? fillColor {get;set;} 
    public string? color {get;set;} 
    public int weight{get;set;} 
    public double opacity{get;set;}
    public double fillOpacity { get; set; } = 1;
}

PointIcon

public class PointIcon
{
    public string iconUrl{get; set;}      //icon url (ex. *.png file)
    public int[] iconSize{get; set;}      //pixels
    public int[] iconAnchor{get; set;}    
    public int[] popupAnchor{get; set;}   
    public string shadowUrl{get; set;}     
    public int[] shadowSize{get; set;}    
    public int[] shadowAnchor{get; set;}  
}

Add in _Imports.razor project file

@using LeafletForBlazor

Blazor Page:

<button @onclick="onClickRun">Run</button> //launch moving points
<RealTimeMap
    @ref="realTimeMap"
    width="600px" 
    height="600px"
    Parameters="@parameters"
></RealTimeMap>

Blazor code block:

@code {
    RealTimeMap? realTimeMap;	//reference to map control
    RealTimeMap.LoadParameters parameters = new RealTimeMap.LoadParameters()  //general map settings
    {
        zoom_level = 18,
        location = new RealTimeMap.Location()
        {
            latitude = 44.4501715,
            longitude = 26.1107672,
        }
    }
    
    //points (coordonate) on the route. For simulation...
    List<List<double>> coordinates = new List<List<double>>() {
    new List<double>() { 44.4502578, 26.1108199 },
    new List<double>() { 44.4500215, 26.1105407 },
    new List<double>() { 44.4497369, 26.1093086 },
    new List<double>() { 44.4496145 , 26.1088460 },
    new List<double>() {  44.4491875, 26.1079328 }
    };

    RealTimeMap.PointSymbol symbol = new RealTimeMap.PointSymbol()
    {
        color = "red",
        fillColor = "yellow",
        radius = 10,
        weight = 3,
        opacity = 1,
        fillOpacity = 1
    };
    bool run = false;
    private async Task onClickRun() //Button onclick event
    {
        run = !run;
        for(var i=0;i<1000;i++)
        {
            pas = i % coordinates.Count;
            RealTimeMap.PointTooltip tooltip = new RealTimeMap.PointTooltip() { 
                content=$"{Math.Round( coordinates[pas][0],3)},{Math.Round( coordinates[pas][1],3)}", 
                opacity = 0.6 
            };

            await  realTimeMap.movePoint(coordinates[pas].ToArray(),  symbol, tooltip);
            await Task.Delay(1000);
            if (run == false)
                return;
        }
    }

}

RealTimeMap movePoint() method GitHub example code

Geometric class

Geometric is a new class that will provide functionalities for working with data.

This class will be a parent class (more precisely, host class - there is no inheritance) for the geometric shapes (ex. Points), geometric map shapes appearance, geometric analisys and so one supported by RealTimeMap.

Points class

The Points class is hosted by the Geometric class.

This class will work with RealTimeMap points. The points displayed in the map will be defined by the StreamPoint class, whose structure is predefined but which can be extended (value property is of type object).

Also, this class will provide methods to control the display of points (Appearance()), analysis (points collection) and so one.

StreamPoint

Class has the following structure:

   public interface IStreamPoint
    {
        public Guid guid { get; set; }              //globally unique identifier
        public DateTime timestamp { get; set; }     //Date and Time
        public double latitude { get; set; }        //EPSG latitude coordionate
        public double longitude { get; set; }       //EPSG longitude coordionate
        public string type { get; set; }            //StreamPoint type
        public object value { get; set; }           //StreamPoint value (object)
    }

latitude and longitude properties are Web Mercator coordinate values.

The value property can be string or object defined by customn Data Structure Class.

Working with Points collection

The class provides the following methods:

• Upload stream points

  Geometric.Points.upload(StreamPoint[] points, bool newCollection = false);
  

• Add single points

  Geometric.Points.add(StreamPoint point);
  

• Add more points

  Geometric.Points.add(StreamPoint[] point);
  

• Delete stream points

  //delete all points from Geometric.Points collection
  Geometric.Points.delete(); 
  
  //delete point, from Geometric.Points collection, with specified id (guid)
  Geometric.Points.delete(string id); 
  
  //delete points, from Geometric.Points collection, with speciefied ids (guids)
  Geometric.Points.delete(string[] ids); 
  

• Move single point

   //move single point from Geometric.Points collection
   Geometric.Points.moveTo(StreamPoint point); 
  

• Move more stream points

   //move one ore more ponts from Geometric.Points collection
   Geometric.Points.moveTo(StreamPoint[] points); 
  

The changeExtentWhenMovingPoints property of the Geometric.Points class allows changing or not the current view of the map at the same time as moving the points:

realTimeMap.Geometric.Points.changeExtentWhenMovingPoints = false; //the current view will be static

or

realTimeMap.Geometric.Points.changeExtentWhenMovingPoints = true; //the current view will be expanded to display all the moving points

• Get all stream points

    //return List<StreamPoint> from Geometric.Points
    Geometric.Points.getItems(); 
  

• Get the points that match a criteria

    //return IEnumerable<StreamPoint> from Geometric.Points
    Geometric.Points.getItems(item=>item.timestamp == DateTime.Now); 
  

Change appearance of the points collection (Points class)

To change the appearance of all points you can use:

realTimeMap.Geometric.Points.Appearance().pattern = new RealTimeMap.PointSymbol()
{
    color = "green",
    fillColor = "green",
    fillOpacity = 0.5,
    radius = 10
};

Change appearance of all points from points collection

realTimeMap.Geometric.Points.Appearance(item => true).pattern = new RealTimeMap.PointSymbol() { 
                                                                                                    radius = 8,    
                                                                                                    color = "gray", 
                                                                                                    opacity = 0.68, 
                                                                                                    fillColor = "gray", 
                                                                                                    weight = 4, 
                                                                                                    fillOpacity = 0.68 
                                                                                           };

You can use predicate of Appearance method to filter points

realTimeMap.Geometric.Points.Appearance(item => item.type == "points of type 1").pattern = new RealTimeMap.PointSymbol() { 
                                                                                                                            radius = 16,    
                                                                                                                            color = "rgb(200,100,0)", 
                                                                                                                            opacity = 0.68, 
                                                                                                                            fillColor = "red", 
                                                                                                                            weight = 4, 
                                                                                                                            fillOpacity = 0.68 
                                                                                                                         };

The appearance of the points is preserved in the map view. To reset the stored appearance, the Appearance method provide reset boolean parameter:

realTimeMap.Geometric.Points.Appearance(item=>item.type=="emergency vehicles", true).pattern = new RealTimeMap.PointSymbol()
{
    color = "blue",
    fillColor = "blue",
    fillOpacity = 0.5,
    radius = 10
};

Working with Geometric.Points Appearance

• change the appearance of all points from collection

    Geometric.Points.Appearance(item=>true).pattern = new PointSymbol(){ 
                                                                           radius = 18, 
                                                                           color = "#28ffff", 
                                                                           opacity = 0.68, 
                                                                           fillColor = "blue", 
                                                                           weight = 2, 
                                                                           fillOpacity = 0.68 
                                                                        }
  

or more simply

     Geometric.Points.Appearance().pattern = new PointSymbol(){ 
                                                                radius = 18, 
                                                                color = "#28ffff", 
                                                                opacity = 0.68, 
                                                                fillColor = "blue", 
                                                                weight = 2, 
                                                                fillOpacity = 0.68 
                                                               }

The appearance of the points on the map is stored in the map view. Resetting the storage is done using the reset parameter of the Appearance() method:

     Geometric.Points.Appearance(item=>true, true).pattern = new PointSymbol(){ 
                                                                            radius = 18, 
                                                                            color = "#28ffff", 
                                                                            opacity = 0.68, 
                                                                            fillColor = "blue", 
                                                                            weight = 2, 
                                                                            fillOpacity = 0.68 
                                                                         }

• change the appearance of some of the points from collection

   Geometric.Points.Appearance(item=>item.type == "type 1").pattern = new PointSymbol(){ 
                                                                                           radius = 18, 
                                                                                           color = "#28ffff", 
                                                                                           opacity = 0.68, 
                                                                                           fillColor = "blue", 
                                                                                           weight = 2, 
                                                                                           fillOpacity = 0.68 
                                                                                        }
  

Code Example

Code example for Points collection.

Add in _Imports.razor project file

    @using LeafletForBlazor

Blazor Page:

    <RealTimeMap 
        width="600px" 
        height="600px"
        @ref="realTimeMap" 
    ></RealTimeMap>

Blazor code block:

Reference to RealTimeMap control (from Blazor Page):

    @code {
        RealTimeMap? realTimeMap;	//reference to control
          }

Stream points collection

   List<RealTimeMap.StreamPoint> points = new List<RealTimeMap.StreamPoint> {
            new RealTimeMap.StreamPoint()
            {
                guid = Guid.Parse("15366d7f-0689-4b8e-a2ee-29e5cb27f76e"),
                latitude = 44.4502578,
                longitude = 26.1108199,
                type = "type 1",
                value = "a point-specific value",
            }
    }

latitude and longitude properties are Web Mercator coordinate values.

In this previous, the value property is of string type

If the timestamp is missing, LeafletForBlazor will assign the current date

This collection has a static behavior.

Upload points collection

        if(realTimeMap !=null)
            await realTimeMap.Geometric.Points.upload(points, true);

where, the last parameter is newCollection:

• if it's missing, it means it's false. That is, the previous collection is kept;

       if(realTimeMap !=null)
           await realTimeMap.Geometric.Points.upload(points);
  

• if it's true, a new collection will be created;

Add point(s) to Geometric.Points

Add single point to Geometric.Points

    if (realTimeMap!=null)
        await realTimeMap.Geometric.Points.add(point);

Add more points to Geometric.Points

   if (realTimeMap!=null)
            await realTimeMap.Geometric.Points.add(points.ToArray());

Delete

Delete all points from Geometric.Points:

    if(realTimeMap!=null)
        await realTimeMap.Geometric.Points.delete(); //delete all points from Geometric.Points

Delete single points from Geometric.Points:

    if(realTimeMap!=null)
        await realTimeMap.Geometric.Points.delete("15366d7f-0689-4b8e-a2ee-29e5cb27f76e"); //delete point by guid

Delete multiple points from Geometric.Points:

    string[] ids = new string[2] {  "15366d7f-0689-4b8e-a2ee-28e5cb22f26e",
                                    "46246d6f-0684-4b8e-a2ee-26e2cb28f86f" };
    if(realTimeMap!=null)
        await realTimeMap.Geometric.Points.delete(ids); //delete points by guid

Moving points on the map

Moving single point from Geometric.Points

    var point = new RealTimeMap.StreamPoint()
        {
            latitude = 44.4504845,
            longitude = 26.1128922,
            type = "type1",
            value = "type 1",
            guid = Guid.Parse("15366d7f-0689-4b8e-a2ee-29e5cb27f76e") //existing guide in the Geometric.Points collection 
        };
    if (realTimeMap != null)
        await realTimeMap.Geometric.Points.moveTo(point);

during the move you cannot change the attributes (type, value, timestamp)

Moving multiple points from Geometric.Points

    var point = new RealTimeMap.StreamPoint()
        {
            latitude = 44.4504845,
            longitude = 26.1128922,
            type = "type1",
            value = "type 1",
            guid = Guid.Parse("15366d7f-0689-4b8e-a2ee-29e5cb27f76e") //existing guide in the Geometric.Points collection
        };
    var points = new List<RealTimeMap.StreamPoint>();
    points.Add(point);
    if (realTimeMap != null)
        await realTimeMap.Geometric.Points.moveTo(points.ToArray());

during the move you cannot change the attributes (type, value, timestamp). A warning will appear in the console

Working with Geometric.Points collection - code example

Geometric class for displaying different static shapes

DisplayPolygonsFromArray

DisplayPolygonsFromArray is a new class that allows displaying polygons starting from point arrays. This class allows the display of simple polygons or polygons with several rings.

Display of simple polygons (single ring):

await realTimeMap.Geometric.DisplayPolygonsFromArray.add(new List<double[]>
    {
        new double[] { 43.97209871008421, 25.328761772135064 },
        new double[] { 43.972004589576606, 25.329119019038004},
       ...
    });

Display polygons with multiple rings:

await realTimeMap.Geometric.DisplayPolygonsFromArray.add(
    new List<List<double[]>>()
        {
            new List<double[]>()
            {
                new double[] { 43.97210330030072, 25.32749864474909 },
                ...
            },
    new List<double[]>()
            {
                new double[] { 43.972004589576606, 25.329119019038004},
                ...
            }
    });

    

Also, the add() method allows customizing the symbolization of the displayed polygons:

       await realTimeMap.Geometric.DisplayPolygonsFromArray.add(new List<double[]>
            {
                new double[] { 43.97209871008421, 25.328761772135064 },
                new double[] { 43.972004589576606, 25.329119019038004},
                ...
         }, 
         new RealTimeMap.PolygonSymbol()
         {
                color = "yellow",
                fillColor = "orange",
                weight = 4,
                opacity = 0.4,
                fillOpacity = 0.4
         });

In the future, this class will be used only for displaying polygons.

DisplayPointsFromArray

The DisplayPointsFromArray class hosted by the Geometric class allows displaying static points using coordinate arrays (new double[2]{}) as input data:

       await realTimeMap.Geometric.DisplayPointsFromArray.add(
                                                                new double[2] 
                                                               { 
                                                                   43.97131525439987, 
                                                                   25.328501463100153 
                                                               }, 
                                                                new RealTimeMap.PointSymbol()
                                                                {
                                                                    color = "yellow",
                                                                    fillColor = "yellow",
                                                                    opacity = 0.8,
                                                                    fillOpacity = 0,
                                                                    radius = 12,
                                                                    weight = 2
           
                                                                });

DisplayPolylinesFromArray

The DisplayPolylinesFromArray class hosted by the Geometric class, allows you to display measurement lines with addMeasure() method:

        await realTimeMap.Geometric.DisplayPolylinesFromArray.addMeasure(
                                                            new RealTimeMap.MeasureLine()
                                                            {
                                                                start = new double[2] { 43.971312524467095, 25.328505256329578},    //start point of measure line
                                                                end = new double[2] { 43.970933062429864, 25.329087513345627},      //end point of measure line
                                                                text = "20 meters",
                                                                textAnchor = new double[2] {- 2, 8 },                               //the anchor point (text) from the middle of the line 
                                                                labelStyle = "min-width:40px;height:100%;background-color:#084886;border-radius:6px;color:#d2efff;text-align:center;font-size:10px;"

                                                        });


                                                        

Tracking and Monitoring points position

RealTimeMap will provide the necessary tools for monitoring, tracking and analyzing shapes (ex. points position) in motion. These tools will be able to be integrated in the final IoT applications (possible integration with Arduino and/or Raspberry pi).

LeafletForBlazorTracking GitHub repository

Nearby Points Analysis

You can get the nearby points.

The configuration of nearby points analysis is done by:

public class NearbyAnalysis
{
    public double threshold { get; set; } = 0; // > 0
    public UnitOfMeasure unit { get; set; } =   UnitOfMeasure.meters; // UnitOfMeasure.kilometers | UnitOfMeasure.miles | UnitOfMeasure.nauticalMiles | UnitOfMeasure.feets 
}

...and filtering the points subject to analysis:

realTimeMap.Geometric.Points.Analysis(item => item.value == "alpha crew")

Obtaining the points that meet the nearby points condition (threshold) is done using the event method:

analysis.OnNearbyThresholdFired += onNearbyThresholdTrigger;

public async void onNearbyThresholdTrigger(object sender, RealTimeMap.NearbyThresholdArgs args)
{

}

Closing the nearby points condition will trigger the method:

analysis.OnNearbyThresholdClosed += nearbyThresholdTriggerClosed;

public async void nearbyThresholdTriggerClosed(object sender)
{
  
}

Code Example

Add using LeafletForBlazor reference into _Imports.razor

@using LeafletForBlazor

Add <RealTimeMap/> Blazor control in your page:

<RealTimeMap @ref="realTimeMap" height="800px" width="800px"></RealTimeMap>

Define block clode block and declare RealTimeMap object:

@code{
    RealTimeMap? realTimeMap;
}

Upload List<StreamPoint> data into RealTimeMap:

public async Task upload()
{
    if(realTimeMap!=null)
        await realTimeMap.Geometric.Points.upload(new InputData().input);
}

Change the default appearance (Geometric.Points.Appearance()) of the points displayed on the map:

public async Task upload()
{
    if(realTimeMap!=null)
        await realTimeMap.Geometric.Points.upload(new InputData().input);
    //change points appearance
    if(realTimeMap !=null)
    {
        realTimeMap.Geometric.Points.Appearance(item => item.type == "emergency vehicles").pattern = new RealTimeMap.PointSymbol()
        {
                color = "green",
                fillColor = "green",
                fillOpacity = 0.5,
                radius = 10
        };
        realTimeMap.Geometric.Points.Appearance(item => item.type == "ambulance").pattern = new RealTimeMap.PointSymbol()
        {
            color = "blue",
            fillColor = "blue",
            fillOpacity = 0.5,
            radius = 10
        };
}

Set up nearby point analysis. The threshold value can be given in various units of measure:

        var analysis = realTimeMap.Geometric.Points.Analysis(item => true);
        analysis.nearby = new RealTimeMap.NearbyAnalysis()
            {
                threshold = 0.2,
                unit=RealTimeMap.UnitOfMeasure.nauticalMiles
            };

If the unit of measure (unit) is missing, it will be in meters.

add into upload() method

Define the methods that will be triggered when the condition NearbyAnalysis() is reached

analysis.OnNearbyThresholdFired += onNearbyThresholdTrigger;
analysis.OnNearbyThresholdClosed += nearbyThresholdTriggerClosed;

add into upload() method

Define onNearbyThresholdTrigger and nearbyThresholdTriggerClosed methods:

onNearbyThresholdTrigger:

public void onNearbyThresholdTrigger(object sender, RealTimeMap.NearbyThresholdArgs args)
{

}

onNearbyThresholdTrigger:

public void nearbyThresholdTriggerClosed(object sender)
{

}

Use the onNearbyThresholdTrigger method to change the appearance or display nearby points:

public void onNearbyThresholdTrigger(object sender, RealTimeMap.NearbyThresholdArgs args)
{
    foreach(var item in args.tuples)
    {
        var guid = item.tuple.Item1.guid;
        realTimeMap.Geometric.Points.Appearance(item => item.guid == guid).pattern = new RealTimeMap.PointSymbol()
            {
                color = "red",
                fillColor = "red",
                fillOpacity = 0.5,
                radius = 10
            };
    }
}

Use the nearbyThresholdTriggerClosed method to return to the initial appearance of the points. Careful! Appearance must contain the parameter reset = true . Appearance(predicate, reset):

public  void nearbyThresholdTriggerClosed(object sender)
{
    realTimeMap.Geometric.Points.Appearance(item => item.type == "anti-terrorist vehicles", true).pattern = new RealTimeMap.PointSymbol()
        {
            color = "green",
            fillColor = "green",
            fillOpacity = 0.5,
            radius = 10
        };
    realTimeMap.Geometric.Points.Appearance(item => item.type == "ambulance", true).pattern = new RealTimeMap.PointSymbol()
        {
            color = "blue",
            fillColor = "blue",
            fillOpacity = 0.5,
            radius = 10
        };
}

---

Basic Map configuration

Add in _Imports.razor project file

@using LeafletForBlazor

Blazor Page:

<Map 
    width="600px" 
    height="600px"
    Parameters="@parameters"
></Map>

Blazor code block:

@code {
    //map initialization parameters
    Map.LoadParameters parameters = new Map.LoadParameters()
    {
        location = new Map.Location()
        {
            longitude = 26.097133,
            latitude = 44.446165
        },
        zoom_level = 12
    };
}

Basic Map configuration - GitHub example code

Map scale

Blazor Page:

<Map 
    width="600px" 
    height="600px"
    Parameters="@parameters"
></Map>

Blazor code block:

@code {
    //map initialization parameters
    Map.LoadParameters parameters = new Map.LoadParameters()
    {
        map_scale = new Map.MapScale()
        {
            has = true,
            meters = true,
            miles = false
        }
    };
}

Map Scale - GitHub example code

Basemaps

Now, you can define a base map list, from various sources (Open Street Map, Open Cycle Map and so one).

The user of the application, created by you, will be able to change the basemap.

Blazor page:

<Map
    width="800px"
    height="700px"
    Parameters="@parameters"
    ></Map>

Blazor code block

    Map.LoadParameters parameters = new Map.LoadParameters()
    {
        ....
        basemap_layers = new List<Map.BasemapConfigLayer>
        {
            new Map.BasemapConfigLayer()
            {
                url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                attribution = "�Open Street Map",
                title = "Open Street Map",
                detect_retina = true
            },
            new Map.BasemapConfigLayer()
            {
                url = "https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=[your API Key]",
                attribution = "�Open Cycle Map",
                title = "Open Cycle Map"
            }
        }
    };

Basemap - GitHub example code

Map Events

Click on Map method trigger:

onMapClick return Map.CurrentMapState object

Double Click on Map method trigger:

onMapDblClick return Map.CurrentMapState object

Recomandation! Use doubleClickZoom = false to disable zoom on double click, as can be seen below (below is an example).

Code Block:

Map.MapOptions map_options = new Map.MapOptions()
{
    interaction_options = new Map.InteractionOptions()
    {
        doubleClickZoom = false
    }
};

Blazor page:

<Map
    width="800px"
    height="600px"
    Parameters="@parameters"
    Options="@map_options"
    onMapDblClick="@OnMapDoubleClick"
></Map>

Load Map method trigger:

onLoadMap return Map.CurrentMapState object

Working onLoadMap event - GitHub example code

Zoom on Map method trigger:

onZoomChange return Map.CurrentMapState object

Pan or Zoom on Map method trigger:

onMoveChange return Map.CurrentMapState object

Events parameter (blue print) of all methods trigger:

#region CurrentMapState and Location blue print
    public class CurrentMapState	//current state (bound, center and zoom level) of the Map
    {
        public Location location { get; set; } = new Location();
        public int zoom_level { get; set; }
        public MapBounds map_bounds { get; set; } = new MapBounds();
    }
    public class MapBounds		//Map bound coordinates
    {
        public Location _southWest { get; set; } = new Location();
        public Location _northEast { get; set; } = new Location();
    }
    public class Location		//center Map location
    {
        public double longitude { get; set; }
        public double latitude { get; set; }
    }
#endregion

Map event example code

Below will be presented a simple example with the Double Click on Map event

Blazor Page:

<Map
    width="800px"
    height="600px"
    Parameters="@parameters"
    Options="@map_options"
    onMapDblClick="@OnMapDblClick"
></Map>

Blazor code block:

@code{
    public void OnMapDblClick(Map.CurrentMapState evt_parameters)
    {

    }

    Map.MapOptions map_options = new Map.MapOptions()
        {
            interaction_options = new Map.InteractionOptions()
            {
                doubleClickZoom = false //here we will disable navigation in the map on double click. Is not mandatory!
            }
        };

    Map.LoadParameters parameters = new Map.LoadParameters()
        {
            location = new Map.Location()
            {
                longitude = 26.1107672,
                latitude = 44.4501715
            },
            zoom_level = 14
        };
}

JSON file example (GeoJSON_urls Map parameter)

Blazor Page:

<Map 
    width="600px" 
    height="600px"
    GeoJSON_urls="@urls.ToArray()"
></Map>

Blazor Code:

@code {
    //working with GEOJson file
    /*	
        GeoJSON_urls <Map> parameter expects an array of JSON url
        1. The JSON data complies with the Leaflet documentation
        2. A improved format that allows custom symbolization
        3. The simultaneous use of the two types of format (RFC 7946 format and improved format)
    */
    List<string> urls = new List<string>() { 
        "http://localhost:5078/polygonsfile.json", 
        "http://localhost:5078/pointsfile.json"  
        };
    }

1. Leaflet documentation format

Is the format shown in the Leaflet documentation

• Leaflet GeoJSON page

• GeoJSON specification (RFC 7946)

    [
        {
          "type": "Feature",
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [ 26.0931846, 44.4432512 ],
                [ 26.0945783, 44.4435381 ],
                [ 26.0959206, 44.4438006 ],
                ...
              ]
            ]
          }
    ]
  

2. Improved Leaflet Format. This format allows configuring the symbolization of map elements

Is an leaflet format in which symbolization (with scaling) and tooltip configuration (with scaling) has been added to the leaflet data (RFC 7946).

Advantages

• The symbology and tooltips configuration are stored along with the data;

• Changing the symbolization will be done without changing the code;

• Also, changing tooltips configuration will be done without changing the code;

• Several applications (web, mobile, etc.) will display the same map, the same symbols;

        {
              "data": [...GeoJSON specification (RFC 7946)...],
              "symbology": { ... },
              "tooltip": { ... }
        }
  

Meaning of JSON (improved format) parameters:

• JSON "data" paratemeter expects an array of GeoJSON items GeoJSON specification (RFC 7946)

• JSON "symbology" parameter expects the custom symbology of GeoJSON items

  "symbology": {
       "default": {
       "color": "red",
       "weight": 5,
       "opacity": 0.4
       },
       "case": {
           "field_name": "name",
           "classes": [
                   {
                   "value": "Bdul Magheru",
                   "symbol": {
                       "color": "yellow",
                       "weight": 5,
                       "opacity": 0.4
                       }
                   },
                   {
                 "value": "Bdul Dacia",
                 "symbol": {
                       "color": "green",
                       "weight": 5,
                       "opacity": 0.4
                   }
               }
           ]
       }
       "scaling": {
           "start_with": 16,
           "stop_with": 18
           }
   }
  

In the previous example, we have a default symbol and two other symbols for two predefined classes. This two classes are defined based on the values in the "name" field.

Result of polygons classes symbolization of GitHub example:

Symbolization by classes is done based on a property (field) of the GeoJSON elements.

for example:

• commercial areas were symbolized in yellow;
• residential areas were symbolized in green;
• other areas were symbolized in red;

Working with JSON file - GitHub example code

Symbology and tooltip scaling

Map elements (with symbology) and tooltips will be displayed in the map only for zoom levels between start_with and stop_with.

In the case of the GeoJSON layer, scaling will only work when we have defined at least one default symbol

• JSON "symbology" parameter expects the definition of GeoJSON items tooltip. "scaling" parameter is not mandatory.

    "symbology": {
       "default": {
           "color": "red",
           "weight": 5,
           "opacity": 0.4
       },
       "scaling": {
           "start_with": 15,
           "stop_with": 18
       }
     }
  

• JSON "tooltip" parameter expects the definition of GeoJSON items tooltip. "scaling" parameter is not mandatory.

  "tooltip": {
       "fields_name": [ "name", "lanes" ],
       "offset": [ 0, 0 ],
       "permanent": true,
       "opacity": 0.5,
       "coordinate_inversion": true,
           "scaling": {
               "start_with": 16,
               "stop_with": 18
               }
   }
  

GeoJSON files and working with Layers Control

The Load Map boolean parmeter (anyway_overlay_layers_control) forces the display of GeoJSON layers in the Layers Control.

    Map.LoadParameters parameters = new Map.LoadParameters()
    {
        anyway_overlay_layers_control = true
    }

The names of the files will be displayed in the Layers Control, the overlay layers section.

Working with GeoJSON string array

GeoJSON data can be loaded as strings.

Add in your Blazor Page:

<Map
    width="800px"
    height="600px"
    Parameters="@parameters"
    GeoJSON_strings="@date_geojson.ToArray()"
></Map>

Blazor code block:

List<string> date_geojson = new List<string>()
{
   "[{\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[26.097369,44.444941]},\"properties\":{\"name\":\"Beautiful Memories Store\"}}]"
};

... and optional parameters:

Map.LoadParameters parameters = new Map.LoadParameters()
{
    location = new Map.Location()
    {
        longitude = 26.1107672,
        latitude = 44.4501715
    },
    zoom_level = 14,
    map_scale = new Map.MapScale()
    {
        has = false,
        meters = true
    }
};

Images Overlay

Load and display images over specific bounds of the map.

Blazor Page:

<Map
    width="750px"
    height="650px"
    MapOverlays="@overlays"
></Map>

Blazor code block:

@code{
    Map.Overlays overlays = new Map.Overlays()
    {
        images = new Map.ImageOverlay()
        {
            images_and_bounds = new List<Map.ImagesAndBoundsCoordinates>()
            {
                new Map.ImagesAndBoundsCoordinates()
                {
                    url = "http://localhost:5116/atene.png",
                    map_bounds = new Map.MapBounds()
                    {
                        _southWest = new Map.Location()
                        {
                            longitude = 26.0970904,
                            latitude=44.4409802
                        },
                        _northEast = new Map.Location()
                        {
                            longitude = 26.0985575,
                            latitude=44.4418393
                        }
                    }
                },
            new Map.ImagesAndBoundsCoordinates()
                {
                    url = "http://localhost:5116/romana.png",
                    map_bounds = new Map.MapBounds()
                    {   
                        _southWest = new Map.Location()
                        {
                            longitude = 26.0964848,
                            latitude=44.4465985
                        },
                        _northEast = new Map.Location()
                        {
                            longitude = 26.0983148,
                            latitude=44.4475250
                        }
                    }
                }
            }
        }    
    };
}

Image overlay - GitHub example code

Working with Leaflet Plungins

Starting with 1.1.8 version, LeafletForBlazor NuGet is able to implement Leaflet plugins. These plugins will be adapted for use in Blazor.

Configuring the Geolet plugin

The configuration parameters have the same names as those in the Leaflet documentation:

Blazor page

<Map
    width="800px"
    height="700px"
    Plugins="@plugins"
></Map>

Blazor code block

Map.PluginsConfig plugins = new Map.PluginsConfig()
{
    display_all = true,
    plugins = new List<Map.Plugin>() { 
    new Map.Plugin() { 
        name = "Geolet",
        config = "{\"title\": \"Locatia mea\", \"position\": \"topleft\", \"popupContent\": \"`latitudine ${latlng.lat}<br>longitudine ${latlng.lng}`\"}" 
        } 
    }
};

The "config" parameter is a string json object.

Using Esri plugins

Esri is the most important player of the GIS market. Esri software solutions are complete and guarantee high performance. In addition, Esri offers users many open and/or freely used software solutions. You can freely use the power of Esri tools, only on the basis of an Esri API Key code

Extending the Leaflet API with Esri Basemaps plugin

Adding Esri basemaps is done on the PluginsConfig interface and the Plugins parameter of the LeafletForBlazor package.

First of all, you will need an Esri API Key code. Generating an Esri API Key code is free, but you need an Esri developer account.

Here you will find a guide for generating an Esri API Key code

Add in your Blazor Page:

<Map
    width="800px"
    height="700px"
    Plugins="@plugins"
></Map>

Blazor code block:

@code{
    Map.PluginsConfig plugins = new Map.PluginsConfig()
    {
        display_all = true,
        plugins = new List<Map.Plugin>() 
        { 
            new Map.Plugin()
            {
                name = "Esri",
                config =  new Map.EsriPlugin()
                    {
                        apiKey = "[your Esri API Key code]",
                        esri_plugins_config = new List<object>()
                        {
                            new Map.EsriBasemapConfig()
                            {
                            enable = true,
                            esri_basemap_layers = new List<Map.EsriBasemapLayer>()
                                {
                                    new Map.EsriBasemapLayer(){basemap_id ="ArcGIS:Imagery"},
                                    new Map.EsriBasemapLayer(){basemap_id = "ArcGIS:Imagery:Standard"},
                                    new Map.EsriBasemapLayer(){basemap_id = "ArcGIS:Imagery:Labels"}
                                }
                            }
                        }
                    }
            }
        }
    };
};

Esri Basemap - GitHub example code

Extending the Leaflet API with Esri Geocoding Search plugin

First of all, you will need an Esri API Key code. Generating an Esri API Key code is free, but you need an Esri developer account.

Here you will find a guide for generating an Esri API Key code

Add in your Blazor Page:

<Map
    width="800px"
    height="800px"
    Plugins="@plugins"
></Map>

Blazor code block:

Map.PluginsConfig plugins = new Map.PluginsConfig()
{
    display_all = true,
    plugins = new List<Map.Plugin>() { 
            new Map.Plugin()
            {
                name = "Esri",
                config =  new Map.EsriPlugin()
                {
                    apiKey = "[your Esri API Key code]",
                    esri_plugins_config = new List<object>()
                    {

                        new Map.EsriGeocodingSearchParameters()
                        {
                            enable = true,
                            placeholder = "Your address",
                            position = "topleft",
                            nearby = new Map.EsriNearby(){lat = 0,lng = 0}
                        }
                    }
                }
            }
        }
};

Esri Geocoding Search - GitHub example code

Extending the Leaflet API with Esri Reverse Geocoding plugin

First of all, you will need an Esri API Key code. Generating an Esri API Key code is free, but you need an Esri developer account.

Here you will find a guide for generating an Esri API Key code

Add in your Blazor Page:

<Map
    width="800px"
    height="800px"
    Plugins="@plugins"
></Map>

Blazor code block:

   Map.PluginsConfig plugins = new Map.PluginsConfig()
   {
        display_all = true,
        plugins = new List<Map.Plugin>() 
        {
            new Map.Plugin()
            {
                name = "Esri",
                config =  new Map.EsriPlugin()
                {
                    apiKey = "[your Esri API Key code]",
                    esri_plugins_config = new List<object>()
                    {
                        new Map.EsriReverseGeocodingParameters()
                        {
                            enable = true,
                            remove_last_result = true
                        }
                    }
                }
            }
        
        }
    };

Reverse Geocoding - GitHub example code

O-L I

Thank you for choosing this package!

Laurentiu Ichim