CODEWITHSUNDEEP
javascriptblazor
user21415940
user21415940

Reputation: 65

Blazor WASM Client calling a JavaScript library - Cannot work out how this works

I've spent 2 days going around in circles here and every time I solve one problem I run into another and Java/JavaScript is not my strength.

I have a Blazor Net 7 WASM app that draws a map using Syncfusion Map control. I draw navigation lines between various points on the map and that works fine. I want to enhance it so navigation lines by sea dont appear as straight lines, they follow the sea routes.

I have found the library https://github.com/johnx25bd/searoute which offers a JavaScript method of doing this but I cannot work out how to implement it correctly in my app.

I have installed the NPM file:

npm file installation

In a file called searoute.js which is in wwwroot/scripts/searoute.js I have the following function:

export function calculateWayPoints(originLatitude, originLongitude, destinationLatitude, destinationLongitude) {

import searoute from 'searoute-js';
//const searoute = require('searoute-js');

var origin = {
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type": "Point",
        "coordinates": [
            originLongitude,
            originLatitude
        ]
    }
}

var destination = {
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type": "Point",
        "coordinates": [
            destinationLongitude,
            destinationLatitude
        ]
    }
}

var route = searoute(origin, destination);

}

The original example used 'require' which I couldn't get to work so I've commented it out above. This isn't available in a browser environment if I have understood correctly. It looks like import is the right way but I suspect this is wrong also.

The package.json is:

{ "version": "1.0.0", "name": "asp.net", "private": true, "dependencies": { "searoute-js": "0.1.0" } }

There is nothing in my index.html as I am using the following method to access the module:

protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender);

 if (firstRender)
 {
     IJSObjectReference module = await js.InvokeAsync<IJSObjectReference>("import", "./scripts/searoute.js");

     await module.InvokeVoidAsync("calculateWayPoints", 43.3, 5.3, 31.2, 121, 8);
 }

}

Appreciate that I don't return a value from the JavaScript - I was taking components out to try and simplify things.

The error I am getting is:

runtime error

Can anyone point in the right direction of how I can get this up and running. I am way out of my comfort zone on this and I'm losing days on this and I suspect the solution is relatively simple.

any help will be greatly appreciated.

Dan.

Upvotes: 1

Views: 218

Answers (1)

Tachibana Shin
Tachibana Shin

Reputation: 3918

if (firstRender)
{
    IJSObjectReference module = await js.InvokeAsync<IJSObjectReference>("import", new { src = "./scripts/searoute.js", type = "module" });

    await module.InvokeVoidAsync("calculateWayPoints", 43.3, 5.3, 31.2, 121, 8);
}

import searoute from 'https://esm.run/searoute-js';

Upvotes: 1

Related Questions