Contextmenu on SfMaps

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 ?


3 Replies 1 reply marked as answer

IR Indumathi Ravi Syncfusion Team February 23, 2023 05:35 PM UTC

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.


Marked as answer

MM Michael Meier February 24, 2023 02:17 PM UTC

This works perfect, thanks  Indumathi !



IR Indumathi Ravi Syncfusion Team February 27, 2023 07:15 AM UTC

Hi Michael,


Thank you for the update.


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


Loader.
Up arrow icon