LeafletForBlazor 1.0.8

Leaflet Map for Blazor

You can quickly add a map to the blazor page. This package is under development, but I will keep the code compatible from one version to another.

You can find more information:

[GitHub LeafletForBlazor](https://github.com/ichim/LeafletForBlazor-NuGet)
[Youtube channel](https://www.youtube.com/@step-by-step-cs)

Sample Code:

_Add in _Imports.razor file

@using LeafletForBlazor

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 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 (GeoJSON_urls Map parameter)

1. Leaflet Format

Is the format shown in the Leaflet documentation

[
	{
	  "type": "Feature",
	  "geometry": {
		"type": "Polygon",
		"coordinates": [
		  [
			[ 26.0931846, 44.4432512 ],
			[ 26.0945783, 44.4435381 ],
			[ 26.0959206, 44.4438006 ],
			[ 26.0965448, 44.4439288 ],
			[ 26.0979042, 44.4444598 ],
			[ 26.0981265, 44.4439044 ],
			[ 26.0976905, 44.4436419 ],
			[ 26.0972459, 44.4431657 ],
			[ 26.0963396, 44.4427384 ],
			[ 26.0941508, 44.4420181 ]
		  ]
		]
	  }
]

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

Is an leaflet format in which symbolization has been added

{
  "data":[_Leaflet JSON Format_](https://leafletjs.com/examples/geojson/),
  "symbology": {
	"default": {
	  "color": "red",
	  "weight": 5,
	  "opacity": 0.4
	},
	"case": {
	  "field_name": "name",
	  "classes": [
		{
		  "value": "commercial",
		  "symbol": {
			"color": "yellow",
			"weight": 5,
			"opacity": 0.4
		  }
		},
		{
		  "value": "residential",
		  "symbol": {
			"color": "green",
			"weight": 5,
			"opacity": 0.4
		  }
		}
	  ]
	}
  },
  "tooltip": {
"fields_name": [ "name", "population" ],
"offset": [ 0, 0 ],
"permanent": true,
"opacity": 0.5,
"coordinate_inversion": true

} }

• JSON "data" paratemeter expects an array of GeoJSON items
• JSON "symbology" parameter expects the custom symbology of GeoJSON items
• JSON "tooltip" parameter expects the definition of GeoJSON items

Thank you for choosing this package!

Laurentiu Ichim