CODEWITHSUNDEEP
asp.net-core-mvcblazorwebassemblyazure-mapsazuremapscontrol
Mike
Mike

Reputation: 158

Accessing Azure Maps JavaScript methods via Blazor WASM Maps Component

We have integrated the Azure Maps Control into our blazor WASM app using the following library, so that we can get the benefit of interacting with Maps via C#:

https://github.com/arnaudleclerc/AzureMapsControl.Components

This library provides a blazor component that is essentially a wrapper around the javascript maps control.

However, it seems limited in that it doesn't expose all of the underlying javascript methods.

For example, with this component, you can create a bubble layer, which will cluster all of the individual markers when zoomed out. And, on mouseover, you can get information about the bubble itself, at an aggregate level, like the cluster_id, and the point_count. But what you can't do, is get into details of the pins for which this cluster represents. In javascript, there is a method called getClusterChildren, which accepts the cluster_id as an input (see: https://learn.microsoft.com/en-us/azure/azure-maps/clustering-point-data-web-sdk). How can I invoke this method via JavaScript Interop in such a way that it is referencing the map that this component is wrapping?

Upvotes: 0

Views: 297

Answers (1)

rbrundritt
rbrundritt

Reputation: 17964

This question should really be posted as a feature request on that open-source project.

In the JavaScript version the getClusterChildren function is a part of the DataSource class, so it should be exposed through the AzureMapsControl.Components.Data.DataSource class of this project. It doesn't appear to have been exposed through this or it's base class, so you would have to add it yourself.

If you look at the GriddedDatasource class you will see that it has a similar function called GetCellChildrenAsync.

I haven't used this library before, but looking at the code, I believe the following is what needs to be added.

In the file, add this method.

public async ValueTask<IEnumerable<Shape<Geometry>>> GetClusterChildrenAsync(int clusterId)
{
    EnsureJsRuntimeExists();
    EnsureNotDisposed();

    var children = await JSRuntime.InvokeAsync<IEnumerable<Shape<Geometry>>>(Constants.JsConstants.Methods.Datasource.GetClusterChildren.ToDatasourceNamespace(), Id, clusterId);
    return children;
}

In the constants files, update the Datasource class like this:

internal static class Datasource
{
    internal const string GetShapes = "getShapes";
    internal const string GetClusterChildren = "getClusterChildren";
}

Now this may throw an error as the getClusterChildren function can return both Shapes and Features (shapes are the original data you added to the Datasource and Features are child clusters). I don't see any other code in this project that handles that scenario and am guessing that's why this wasn't added.

Give this a try and if you get it working, be a good member of the dev community and make a pull request.

Upvotes: 1

Related Questions