question

NAKGIOEORG-5853 avatar image
0 Votes"
NAKGIOEORG-5853 asked Bruce-SqlWork answered

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

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

dotnet-aspnet-core-blazor
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @NAKGIOEORG-5853,

If you want to use Leaflet.js Map in blazor, you could write or put the js codes inside the _Layout.cshtml(blazor server app) or index,html(blazor webassembly) to show the Leaflet.js, then you could use blazor;'s feature call js from .net to put the json result to the client's js file.


0 Votes 0 ·

1 Answer

Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered

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

https://docs.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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.