Blazor: How to Create a Leaflet.js Map and Call Leaflet.js Functions

Question

All the nugets for Blazor, maps and Leaflet.js, even paid ones, are in half-trash condition when it comes to full-blown dealing with maps.

Could anyone provide simple guide for beginners on Leaflet.js and Blazor, that is,
how to create a map from geoJSON file and call all the leaflet.js functions (bubbles with geoJSON properties on hover, zoom, hover effects, animations, map legend, linking map and the legend, etc.).

No nugets links, please (they are all half-broken, both for maps and for leaflet.js, especially commercial).

Full-blown manual, please, for beginners on integrating JS libraries (leaflet.js) and Blazor

Answer 1

your blazor code would render a <div>with an id, and use javascript interop to call the leaflet code. see:

https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0

read the whole doc. you will need to update the div from javascript without interfering with the blazor virtual Dom. that is when blazor compares the virtual Dom to real dom. you do not want the real nodes deleted because they are not in the virtual Dom. read about this and the events you may want to use to tie the javascript Dom updates to the component render.