LeafletForBlazor 1.1.5

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

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?

New Load Map boolean parmeter (anyway_overlay_layers_control), which 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.

Basic map configuration:

Add in _Imports.razor project file

@using LeafletForBlazor

Add in your 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
	};
}

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

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

Map enevts

LeafletForBlazor Map provide some events:

• OnLoadMap();
• OnMapClick();
• OnZoomChange();

Blazor page:

<Map 
	width="600px" 
	height="600px"
	onLoadMap="@OnLoadMap"
	onMapClick="@OnMapClick"
	onZoomChange="@OnZoomChange">
</Map>

Blazor code block:

@code {
	//Map events
	public void OnLoadMap(Map.OnLoadEventParameters event_args)
	{

	}
	public void OnZoomChange(int zoom_level)
	{
    
	}
	public void OnMapClick(Map.Location event_args)
	{
    
	}
}

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 has been added to the leaflet data

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;

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

O-L I

Thank you for choosing this package!

Laurentiu Ichim