Trying to create a movable window with a map inside of it. I found an example of a SfMap inside of a SfDashboardLayout, but i would prefer for the Dialog box functionality to display my map.
This is my code:
<SfDialog ID="MapDialogue" Width="53%" Height="62%" IsModal="false" AllowDragging="true" EnableResize="true" ShowCloseIcon="true">
<DialogTemplates>
<Header>My Map</Header>
<Content>
<SfMaps>
<MapsTitleSettings Text="My Map"></MapsTitleSettings>
<MapsZoomSettings Enable="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer Visible="true" ShapdeData='new {dataOptions="https://cdn:syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
</MapsLayer>
</SfMaps>
</Content>
</DialogTemplates>
</SfDialog>
I am just using the world map from the documentation. I have found the map when inspecting the html under Content but it seems to be invisible to user except for the zoom in and out plus reset zoom buttons.
|
<SfDialog ID="MapDialogue" @bind-Visible="@IsVisible" Width="53%" Height="62%" IsModal="false" AllowDragging="true" EnableResize="true" ShowCloseIcon="true">
<DialogEvents Opened="@onOpen"></DialogEvents>
<DialogTemplates>
<Header>My Map</Header>
<Content>
<SfMaps @ref="map">
<MapsTitleSettings Text="My Map"></MapsTitleSettings>
<MapsZoomSettings Enable="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= https://cdn.syncfusion.com/maps/map-data/world-map.json}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>
</Content>
</DialogTemplates>
</SfDialog>
@code {
SfMaps map;
private bool IsVisible { get; set; } = true;
private void OpenDialog()
{
this.IsVisible = true;
}
public void onOpen()
{
map.Refresh();
}
} |
