Releases · arnaudleclerc/AzureMapsControl.Components

23 Mar 15:26

arnaudleclerc

0.16.0

7f9f749

Adding Popup to HtmlMarkers

New features

#33 - Add Popup to HtmlMarker.Options

Description

You can now define a Popup on the options of an HtmlMarker. The Popup can then be toggled by calling TogglePopupAsync on the HtmlMarker.

The Popup can also be used from the Map just like the other popups. A call to TogglePopupAsync is necessary before using it from the instance of Map, or you can also set the OpenOnAdd property to true to display it automatically.

@page "/HtmlMarkerPopup"

@using AzureMapsControl.Components.Map
<AzureMap Id="map"
          EventActivationFlags="MapEventActivationFlags
                                .None()
                                .Enable(MapEventType.Ready)"
          OnReady="OnMapReady" />

@code  {
    public async Task OnMapReady(MapEventArgs events)
    {
        var marker = new AzureMapsControl.Components.Markers.HtmlMarker(
            new Components.Markers.HtmlMarkerOptions
            {
                Position = new Components.Atlas.Position(0, 0),
                Draggable = true,
                Popup = new Components.Popups.HtmlMarkerPopup(new Components.Popups.PopupOptions
                {
                    Content = "<div style='padding:10px'>Hello World</div>",
                    PixelOffset = new Components.Atlas.Pixel(0, -30)
                })
            })
        {
            EventActivationFlags = Components.Markers.HtmlMarkerEventActivationFlags.None().Enable(Components.Markers.HtmlMarkerEventType.Click)
        };

        await events.Map.AddHtmlMarkersAsync(marker);

        marker.OnClick += async (eventArgs) =>
        {
            await marker.TogglePopupAsync();
        };
    }
}

Assets 2

08 Mar 16:02

arnaudleclerc

0.15.0

9d86ea3

Animations

This version brings animations into the library.

The animations are not part of the atlas library, so you need to include the js file directly into your application via a script tag. It can be found on the GitHub repository of the animations.

To create an animation, you can inject an instance of IAnimationService inside your razor views or services. The following animations can be created via this service :

DropAsync : Adds an offset array property to point shapes and animates its y value to simulate dropping.
DropMarkersAsync : Adds an offset to HtmlMarkers to animate its y value to simulate dropping.
GroupAnimationAsync : Group multiple animations
FlowingDashedLineAsync : Animates the dash-array of a line layer to make it appear to flow.
MoveAlongPath : Animates a Point shape or a marker along a path.
MoveAlongRouteAsync : Animates a Point shape along a route path.
MorphAsync : Animates the morphing of a shape from one geometry type or set of coordinates to another.
SetCoordinatesAsync : Animates the update of coordinates on a shape.
SnakelineAsync : Animates the path of a LineString.

Each of those methods gives back an Animation which you can further control using its PlayAsync, PauseAsync, ResetAsync, SeekAsync, StopAsync and DisposeAsync methods. Not all the animations exposes those methods.

Note that if you try to use an animation which has already been disposed, the library will raise an AnimationAlreadyDisposedException.

Assets 2

05 Mar 10:28

arnaudleclerc

0.14.0

ac9a517

Create expressions from JSON

Layers

The Filter property on the layer's options was missing. It has been added and is of type Expression.

Expressions

Expressions can now be created using their JSON representation. This is especially useful with complex expressions.

The two following examples use the same expression and render the same layer.

var fillColorExpressionJsonString = "[\"step\", [\"get\", \"DENSITY\"], \"#00ff80\", 10, \"#09e076\", 20, \"#0bbf67\", 50, \"#f7e305\", 100, \"#f7c707\", 200, \"#f78205\", 500, \"#f75e05\", 1000, \"#f72505\", 10000, \"#6b0a05\"]";

var layer = new AzureMapsControl.Components.Layers.PolygonExtrusionLayer
{
    Options = new Components.Layers.PolygonExtrusionLayerOptions
    {
        FillColor = new Components.Atlas.ExpressionOrString(System.Text.Json.JsonDocument.Parse(fillColorExpressionJsonString))
    }
};

var layer = new AzureMapsControl.Components.Layers.PolygonExtrusionLayer
        {
            Options = new Components.Layers.PolygonExtrusionLayerOptions
            {
                FillColor = new Components.Atlas.ExpressionOrString(new AzureMapsControl.Components.Atlas.Expression[] {
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("step"),
                    new AzureMapsControl.Components.Atlas.Expression(new AzureMapsControl.Components.Atlas.Expression[]{
                        new AzureMapsControl.Components.Atlas.ExpressionOrString("get"),
                        new AzureMapsControl.Components.Atlas.ExpressionOrString("DENSITY")
                    }),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#00ff80"),
                    new AzureMapsControl.Components.Atlas.ExpressionOrNumber(10),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#09e076"),
                    new AzureMapsControl.Components.Atlas.ExpressionOrNumber(20),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#0bbf67"),
                    new AzureMapsControl.Components.Atlas.ExpressionOrNumber(50),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#f7e305"),
                    new AzureMapsControl.Components.Atlas.ExpressionOrNumber(100),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#f7c707"),
                    new AzureMapsControl.Components.Atlas.ExpressionOrNumber(200),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#f78205"),
                    new AzureMapsControl.Components.Atlas.ExpressionOrNumber(500),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#f75e05"),
                    new AzureMapsControl.Components.Atlas.ExpressionOrNumber(1000),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#f72505"),
                    new AzureMapsControl.Components.Atlas.ExpressionOrNumber(10000),
                    new AzureMapsControl.Components.Atlas.ExpressionOrString("#6b0a05")
                }),
            }
        };

Assets 2

03 Mar 08:02

arnaudleclerc

0.13.0

d2f9316

Update Feature to deserialize ID from either string or number

The Id of a feature now supports int and string deserialization.

Thanks to @miguelhasse for this 👍

Assets 2

18 Feb 12:16

arnaudleclerc

0.12.0

de489ba

Publishing minimized version of azure-maps-control.js

The code of the azure-maps-control.js file has been entirely reworked and converted to typescript. The js files are now generated on the build process. There are now two .js files on the Nuget package : azure-maps-control.js and azure-maps-control.min.js.

If you use the anonymous authentication mode, you will need to update the assignment of your getTokenCallback method, as most of the namespaces of the library have been changed. You can use the following example :

azureMapsControl.Extensions.getTokenCallback = (resolve, reject, map) => {
            const url = "url_of_my_token_endpoint";
            fetch(url).then(function (response) {
                return response.text();
            }).then(function (token) {
                resolve(token);
            });
        };

Assets 2

17 Feb 11:34

arnaudleclerc

0.11.0

486cdee

Adding OverviewMapControl

The OverviewMap control not being part of the atlas library, you need to include the js file of the scalebar into your application and reference it with a script tag on your razor page. It can be found on the GitHub repository of the overviewmap control.

For this control only, there is the possibility to update its options. The OverviewMapControl class exposes an UpdateAsync with which you can update the options of the control. The following example updates the style of the map in the overlay when the style of the map has been changed.

@page "/OverviewMap"

@using AzureMapsControl.Components.Map
<AzureMap Id="map"
          Controls="new Components.Controls.Control[]
          {
              new AzureMapsControl.Components.Controls.OverviewMapControl(new Components.Controls.OverviewMapControlOptions
              {
                  ShowToggle = true,
                  Style = new Components.Atlas.Either<Components.Controls.ControlStyle, string>(AzureMapsControl.Components.Controls.ControlStyle.Auto)
              },
              AzureMapsControl.Components.Controls.ControlPosition.TopLeft),
              new AzureMapsControl.Components.Controls.StyleControl(position: AzureMapsControl.Components.Controls.ControlPosition.TopRight)
          }"
          EventActivationFlags="MapEventActivationFlags.None().Enable(MapEventType.StyleData)"
          OnStyleData="OnStyleData"/>

@code {
    public async void OnStyleData(MapStyleDataEventArgs eventArgs)
    {
        var overviewControl = eventArgs.Map.Controls?.OfType<AzureMapsControl.Components.Controls.OverviewMapControl>()?.FirstOrDefault();
        if(overviewControl is not null)
        {
            await overviewControl.UpdateAsync(options => options.MapStyle = eventArgs.Style);
        }
    }
}

Assets 2

15 Feb 11:33

arnaudleclerc

0.10.0

6253476

Adding ScalebarControl

This release brings changes to the controls. The structure of the Controls classes has been changed to support their options and position with more flexibility.

Here is how you can add controls on your map now :

@page "/Controls"

@using AzureMapsControl.Components.Map
<AzureMap Id="map"
          Controls="new Components.Controls.Control[]
          {
                        new Components.Controls.ZoomControl(new Components.Controls.ZoomControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark }, AzureMapsControl.Components.Controls.ControlPosition.TopLeft),
            new Components.Controls.PitchControl(new Components.Controls.PitchControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark }, AzureMapsControl.Components.Controls.ControlPosition.TopRight),
            new Components.Controls.CompassControl(new Components.Controls.CompassControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark }, AzureMapsControl.Components.Controls.ControlPosition.BottomLeft),
            new Components.Controls.StyleControl(new Components.Controls.StyleControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark, MapStyles = MapStyle.All() }, AzureMapsControl.Components.Controls.ControlPosition.BottomRight)
          }" />

This release also includes a new ScalebarControl which is not part of the atlas.js library. If you want to use this new control, you will have to include its javascript file directly in your application and reference it via a script tag on your razor pages. The file can be found on the GitHub repository for the scalebar. If you do not use this scalebar, everything should still work fine without including the script.

Assets 2