LeafletForBlazor 1.1.1

Leaflet Map for Blazor

You can quickly add a map to the blazor page. In addition, you can <span style="color:green;font-weight:bold">symbolize</span>, add <span style="color:green;font-weight:bold">tooltips</span> to map items 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

Baic map configuration:

Add in _<span style="color:#6084FF;">Imports.razor</span> project file

@using LeafletForBlazor

Add in your Blazor Page:

<Map 
	width="600px" 
	height="600px"
	Parameters="@parameters"
	Options="@map_options"
	GeoJSON_urls="@urls.ToArray()"
	onLoadMap="@OnLoadMap"
	onMapClick="@OnMapClick"
	onZoomChange="@OnZoomChange">
</Map>

Blazor Code:

@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 = new Map.MapScale()
		{
			has = true,
			meters = true,
			miles = false
		}
	};

	//map customization
	Map.MapOptions map_options = new Map.MapOptions()
	{
		interaction_options = new Map.InteractionOptions()
		{
			doubleClickZoom = false
		}

	};

	//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 revised format that allows symbolization customization (https://github.com/ichim/LeafletForBlazor-NuGet)
	*/
	List<string> urls = new List<string>() { 
		"http://localhost:5078/polygonsfile.json", 
		"http://localhost:5078/pointsfile.json"  
		};

	//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 (<span style="color:#6084FF;">GeoJSON_urls</span> Map parameter)

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 is stored along with the data.

• Changing the symbolization 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": { ... }
    	  }
    	}
  

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

Result of polygons classes symbolization of GitHub example:

<span style="color:green;font-weight:bold">Symbolization by classes</span> is done based on a property (field) of the GeoJSON elements.

for example:

• commercial areas were symbolized in <span style="background-color:yellow;color:black">yellow</span>;
• residential areas were symbolized in <span style="background-color:green;color:white">green</span>;
• other areas were symbolized in <span style="background-color:red;color:white">red</red>;

• JSON "tooltip" parameter expects the definition of GeoJSON items tooltip

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

Thank you for choosing this package!

Laurentiu Ichim