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();
        };
    }
}