LeafletForBlazor 1.0.9

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:

LeafletForBlazor GitHub

Youtube channel

Youtube LeafletForBlazor playlist

Sample Code:

Add in _Imports.razor 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 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 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": {
    			"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 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
   				}
   			}
   		]
   	}
  

  }

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

  "tooltip": {
   	"fields_name": [ "name", "lanes" ],
   	"offset": [ 0, 0 ],
   	"permanent": true,
   	"opacity": 0.5,
   	"coordinate_inversion": true
   }
  

Thank you for choosing this package!

Laurentiu Ichim