bubblelayer

Bubble Layer

Bubble layers render points as circles on the map with a fixed pixel radius.

The Bubble Layer requires a data source. The ID of the datasource to bind to the layer can be set on the Source property of the options of the layer.

@page "/Layers/BubbleLayerOnReady"

@using AzureMapsControl.Components.Map
<AzureMap Id="map"
          CameraOptions="new CameraOptions { Zoom = 2 }"
          EventActivationFlags="MapEventActivationFlags
                                .None()
                                .Enable(MapEventType.Ready, MapEventType.SourceAdded)"
          OnReady="OnMapReady"
          OnSourceAdded="OnDatasourceAdded" />

@code  {

    private readonly string _datasourceId = "bubbleDataSource";

    public async Task OnMapReady(MapEventArgs eventArgs)
    {
        var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId)
        {
            EventActivationFlags = Components.Data.DataSourceEventActivationFlags.None()
        };
        await eventArgs.Map.AddSourceAsync(dataSource);

        var json = "{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"57fd117c-abac-4985-9ead-36168c0e359e\"},\"id\":\"57fd117c-abac-4985-9ead-36168c0e359e\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[0,0]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"01ebb77e-18e6-4dfa-8c77-db3c4fd7408a\"},\"id\":\"01ebb77e-18e6-4dfa-8c77-db3c4fd7408a\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[5,5]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"a388ff48-c5f4-4cb5-a9ab-604ae08c1564\"},\"id\":\"a388ff48-c5f4-4cb5-a9ab-604ae08c1564\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[10,10]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"12b2f8f9-47bf-4c90-92ac-e82fb5e8f64b\"},\"id\":\"12b2f8f9-47bf-4c90-92ac-e82fb5e8f64b\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[15,15]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"19c81734-50d5-4d23-b57d-58d3da7746e2\"},\"id\":\"19c81734-50d5-4d23-b57d-58d3da7746e2\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[20,20]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"88852e6d-b105-483e-a88a-98ec536b10ca\"},\"id\":\"88852e6d-b105-483e-a88a-98ec536b10ca\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[25,25]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"c8bec3fb-e6ea-4297-b386-c328d277639c\"},\"id\":\"c8bec3fb-e6ea-4297-b386-c328d277639c\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[30,30]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"591fab80-bc14-4efd-b20d-5be29cf9769d\"},\"id\":\"591fab80-bc14-4efd-b20d-5be29cf9769d\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[35,35]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"0bdcddbd-c895-4356-b3b3-c3330003b28c\"},\"id\":\"0bdcddbd-c895-4356-b3b3-c3330003b28c\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[40,40]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"e63f463b-3605-4847-8ea3-2948187f601d\"},\"id\":\"e63f463b-3605-4847-8ea3-2948187f601d\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[45,45]}}]}";
        await dataSource.AddAsync(System.Text.Json.JsonDocument.Parse(json));
    }

    public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
    {
        if (eventArgs.Source.Id == _datasourceId)
        {
            var layer = new AzureMapsControl.Components.Layers.BubbleLayer
            {
                Options = new Components.Layers.BubbleLayerOptions
                {
                    Color = new Components.Atlas.ExpressionOrString("white"),
                    Radius = new Components.Atlas.ExpressionOrNumber(5),
                    StrokeColor = new Components.Atlas.ExpressionOrString("#4288f7"),
                    StrokeWidth = new Components.Atlas.ExpressionOrNumber(6),
                    Source = _datasourceId
                },
                EventActivationFlags = Components.Layers.LayerEventActivationFlags.None().Enable(Components.Layers.LayerEventType.MouseEnter, Components.Layers.LayerEventType.MouseLeave)
            };

            layer.OnMouseEnter += async _ =>
            {
                await eventArgs.Map.SetCanvasContainerStylePropertiesAsync(new Dictionary<string, string> {
        { "cursor", "pointer" }
            });
            };

            layer.OnMouseLeave += async _ =>
            {
                await eventArgs.Map.SetCanvasContainerStylePropertiesAsync(new Dictionary<string, string> {
        { "cursor", "grab" }
            });
            };

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