Writing Your Own JavaScript Extensions

By writing a bit of JavaScript, you can unlock all the features of the ArcGIS Maps SDK for JavaScript, even if the features are not yet exposed in GeoBlazor. Of course, if there are features you would like to see supported in GeoBlazor, please open a GitHub issue. But sometimes it is important to not wait for a new release, or if you have a specific edge case. Occasionally, it can also be useful to write JS for better performance, especially in Blazor Server, if dealing with a fast-moving UI interaction.

How to Write JavaScript Extensions

1. Create a .js file in your wwwroot folder or a subfolder.

extensions.js

let Core;
let arcGisObjectRefs; 
  
export function initialize(core) {  
    Core = core;    
    arcGisObjectRefs = Core.arcGisObjectRefs;  
}

export function myCustomFunction(myValues, viewId) {
    let view = arcGisObjectRefs[viewId];
    // with this view, you can do anything supported in ArcGIS JS
}

1. Invoke this JS file as a module from Blazor

// must be called in `OnAfterRender` or after initial Blazor render
IJSObjectReference module = 
    await JsRuntime.InvokeAsync<IJSObjectReference>("import", "extensions.js");
await module.InvokeVoidAsync("initialize", mapView.JsRuntime);

1. Invoke the function from Blazor

await module.InvokeVoidAsync("myCustomFunction", myValue, View.Id);

For a full example, see dymaptic.GeoBlazor.Core.Sample.Shared/wwwwroot/js/extension.js and dymaptic.GeoBlazor.Core.Sample.Shared/Pages/DisplayProjection.razor.