Contextmenu on SfMaps

[Michael Meier]

How can I put a contextmenu on an SfMaps ? And how do I get the Lat/Lon Pos auf the point where the user right clicks to open the contextmenu ?

[Indumathi Ravi]

Hi Michael,

We can add the Syncfusion Context Menu component to the Maps component by setting the "ID" of the Maps as the "Target" of the context menu. When we right-click in Maps, the "OnRightClick" event is triggered, and we can make the context menu visible in that event. Using the "MenuItem" tag, we can display the "Latitude" and "Longitude" values from the "OnRightClick" event of the Maps in the context menu. Please find the code snippet for the same below.

Code Snippet:

<div style="visibility:@value">

    <SfContextMenu Target="#maps" TValue="MenuItem">

            <MenuItems>

            <MenuItem Text=@MenuTextOne></MenuItem>

            <MenuItem Text=@MenuTextTwo></MenuItem>

            </MenuItems>

        <MenuEvents TValue="MenuItem" ItemSelected="@selectedHandler"></MenuEvents>

        </SfContextMenu>

</div>

 

 

<SfMaps ID="maps">

    <MapsEvents OnRightClick="RightClick"></MapsEvents>

    <MapsLayers>

        <MapsLayer ShapeData='new {dataOptions =https://cdn.syncfusion.com/maps/map-data/usa.json}' TValue="string">

        </MapsLayer>

    </MapsLayers>

</SfMaps>

 

@code{

 

    void RightClick(Syncfusion.Blazor.Maps.MouseEventArgs args)

    {

        value = "visible";

        MenuTextOne = "Latitude : " + args.Latitude;

        MenuTextTwo = "Longitude : " + args.Longitude;

    }

 

}

You can find the sample and video from the below links.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorMaps468998688

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/rightclick-307563292

Please let us know if the above solution meets your requirement.

Regards,

Indumathi R.

[Michael Meier]

This works perfect, thanks  Indumathi !

[Indumathi Ravi]

Hi Michael,

Thank you for the update.

Please get back to us if you need any further assistance.