arnaudleclerc / AzureMapsControl.Components

Razor Components for azure-maps-control
MIT License
34 stars 12 forks source link

[Support] Symbol layer Point with label #35

Closed hamishfagg closed 3 years ago

hamishfagg commented 3 years ago

Hi again =)

I have set up a symbol layer and I'd like to add a label to each Point in the symbol layer. The js atlas has this Feature() constructor where you can add fields to a feature that you can then use as the textField for a symbol.

Is this not implemented or am I just missing something? Sorry, didnt know where else to ask for support

arnaudleclerc commented 3 years ago

You're at the right place for those kind of questions, no issue :)

There is currently only the possibility to add shapes to a datasource, via the AddAsync method, but the features should not be much more complicated. I will take a look at it and let you know when it is done.

arnaudleclerc commented 3 years ago

I will add two new signatures for the AddAsync method on DataSource:

The calls to AddAsync will then support adding geometries which will be wrapped into shapes as of today, but also adding features containing a geometry. The added features will be accessible via the Features property of the datasource.

I tested it with the sample you mentioned, it would look like that :

@page "/SymbolLayerWithFeatures"

@using AzureMapsControl.Components.Map
<AzureMap Id="map"
          CameraOptions="new CameraOptions { Zoom = 16, Center = new Components.Atlas.Position(-122.13284, 47.63699) }"
          EventActivationFlags="MapEventActivationFlags
                                .None()
                                .Enable(MapEventType.Ready)"
          OnReady="OnMapReady" />
i
@code  {
    public async Task OnMapReady(MapEventArgs eventArgs)
    {
        var datasourceId = "datasourceId";
        var datasource = new AzureMapsControl.Components.Data.DataSource(datasourceId);
        await eventArgs.Map.AddSourceAsync(datasource);

        var feature = new AzureMapsControl.Components.Atlas.Feature<AzureMapsControl.Components.Atlas.Point>(new AzureMapsControl.Components.Atlas.Point(
                    new AzureMapsControl.Components.Atlas.Position(-122.13284, 47.63699)
                ), new Dictionary<string, object> {
                    { "title", "Cafeteria" },
                    { "subtitle", "Building 40"}
                });

        await datasource.AddAsync(feature);

        var textFieldExpressionJsonString = "[\"format\", [\"get\", \"title\"], {\"text-font\": [\"literal\", [\"StandardFont-Bold\"]], \"font-scale\": 1.25}, \"\\n\", {}, [\"get\", \"subtitle\"], {\"font-scale\": 0.75}]";

        var layer = new AzureMapsControl.Components.Layers.SymbolLayer {
            Options = new Components.Layers.SymbolLayerOptions {
                Source = datasourceId,
                TextOptions = new Components.Layers.TextOptions {
                    TextField = new Components.Atlas.ExpressionOrString(
                        System.Text.Json.JsonDocument.Parse(textFieldExpressionJsonString)
                    )
                }
            }
        };

        await eventArgs.Map.AddLayerAsync(layer);
    }
}

Removing a feature will be possible by calling the RemoveAsync method of the datasource, just like for the geometries.

There is still a couple of things to do, but it shouldn't be too long before I publish a new version with this new feature.

arnaudleclerc commented 3 years ago

@IVData I have pushed a new version 0.17.0 with those changes. It is also available on the v1.0.0-beta0007. Please try the 0.17.0 and let me know if this works for you!

hamishfagg commented 3 years ago

This is awesome, thanks so much.

I have one more question, I'm following this 're-use a popup' guide here

And this uses the eventArgs.Shapes to check that the user clicked on a shape in the symbol layer. I see you removed the shapes property from mouse events with this commit. Is there a way to get access to the shape that was clicked on?

Thanks again

arnaudleclerc commented 3 years ago

I do not have any alternative for now. Attaching the shapes to the event is causing serialization issues and breaks the SignalR communication. I am planning to investigate that further before releasing a stable 1.0.0, so that will probably be part of a future 1.0.0-beta version. I will let you know whenever I have something ready.

hamishfagg commented 3 years ago

Ok thanks. I'll close this now since my question is answered but please do let me know when the new version is out =)

arnaudleclerc commented 3 years ago

@IVData FYI, I have published a v1.0.0 which contains the shapes and features on attached to the map events and layer events. The reuse popup use case is still not ready, but this is a first step in this direction :)

hamishfagg commented 3 years ago

@arnaudleclerc I've just tested and it's working great! I also have the popup reuse working, roughly following that example I linked.

Thanks so much, this is awesome =D