I'm trying to get this to work as per Microsoft's documentation.
The below script code works perfectly in an existing React app and I'm trying to port the app to Blazor. The script loads and inits - and I can see the Iframe being correctly loaded into the browser DOM. However the script (Apple's mapkit.js script) errors out with Attempted to assign to readonly property in the migrateStateTo function, trying to set t.tint = this.node.tint.
MapkitHelper.js
import "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js";
export function initialiseMapkit(token, element) {
// this call seems to work
mapkit.init({
authorizationCallback: function(done) {
done(token)
}
})
// from here on things seem to go south no matter what I do
var map = new mapkit.Map(element)
}
MapkitRenderer.razor
@implements IAsyncDisposable
@inject IJSRuntime JS
<div @ref="mapkitElement"></div>
@code {
public string? token = Environment.GetEnvironmentVariable("MAPKIT_JS_TOKEN");
private ElementReference mapkitElement;
private IJSObjectReference? mapModule;
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
mapModule = await JS.InvokeAsync<IJSObjectReference>("import", "./MapkitHelper.js");
await mapModule.InvokeVoidAsync("initialiseMapkit", token, mapkitElement);
}
}
async ValueTask IAsyncDisposable.DisposeAsync() {
if (mapModule is not null) {
await mapModule.DisposeAsync();
}
}
}
