I'm working on a service in Blazor that's using a JavaScript map, and I need to add a plugin to that map. I have a script tag that references the library in my _Layout.cshtml file and then in the component that show the map I use
@inject IJSRuntime JS
And then
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
origo = await JS.InvokeAsync<IJSObjectReference>("Origo", "index.json");
}
}
But then I get stuck when I have to add the plugin to the map, in just plain HTML, to add the plugin would look like this
origo.on('load', function (viewer) {
var draw = Draw({
drawTools: {
"Polygon": ["freehand", "box"],
"LineString": ["freehand"]
}
});
viewer.addComponent(draw);
});
I guess I have to make a new IJSObjectReference for the on function on origo, but how do I make an equivalent of the anonymous function that is needed to add the plugin to the map? Is it even possible?
I did something with a similar component that worked. I created a JS file with an export function. I cannot be certain about the exact code in this function, because I have no idea what plugin you are using and how it is initialized.
import "..."; //Import the JS library of the plugin
export function initPlugin() {
//Initialize origo here...
origo = ...
origo.on('load', function (viewer) {
var draw = Draw({
drawTools: {
"Polygon": ["freehand", "box"],
"LineString": ["freehand"]
}
});
viewer.addComponent(draw);
}
Then, from your razor code:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
jsStacksEditorImported = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./myscript.js");
await jsStacksEditorImported.InvokeAsync<IJSObjectReference>("initPlugin");
}
}