LeafletForBlazor 1.2.4

Leaflet Map for Blazor

You can quickly add a map to the blazor page. In addition, you can add GeoJSON data in the map, symbolize Map items, add tooltips to map items, working with basemap and overlay layers and others

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?

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
						}
					}
				}
			}
		}    
	};
}

---

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
	}
};

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