Can you create a custom tooltip for the MapMarker?

[Conor O'Molony]

Gooday All,

I am trying to achieve a certain functionality within the map so that after the user clicks on the MapMarker, a custom tooltip appears that acts similar to a container for various elements. I am trying to allow the userrs of the app to leave comments on the mapmarker, so there would be an input and a button, aswell as a listview of previous comments

[Indumathi Ravi]

Hi Conor,

We can achieve your requirement in the sample application by using the annotation support in the Maps component. When a marker is selected, the “OnMarkerClick” event will be triggered. In this event, we can show a popup box with input box and button to add comments for the marker and a button to close the popup. When the Maps is zoomed or panned, we can hide the popup box in the “OnZoom” and “OnPan” events of Maps. Please find the code snippet below.

Code Snippet:

@using Syncfusion.Blazor.Maps

 

<SfMaps>

    <MapsEvents OnMarkerClick="MarkerClick" OnZoom="OnZoomEvent" OnPan="OnPanEvent"></MapsEvents>

    <MapsAnnotations>

        <MapsAnnotation X="@XPosition" Y="35%">

            <ContentTemplate>

                @if (visible)

                {

                <div class="rectangle" style="display: @divDisplay;">

                    <button class="my-buttonone" @onclick="ToggleDivVisibility">X</button> <br /> <br /> <br />

                    <input type="text" class="my-input" @bind="inputText" placeholder="Enter text"> <br /> <br />

                    <button class="my-button" @onclick="DisplayInputValue">Submit</button> <br /> <br />

                    <p>@outputText</p>

                </div>

               

                }

            </ContentTemplate>

        </MapsAnnotation>

    </MapsAnnotations>

    //..

    //..

</SfMaps>

 

 

@code {

   

    private void DisplayInputValue()

    {

        outputText = inputText;

    }

 

    private void MarkerClick(MarkerClickEventArgs args)

    {

        visible = true;

        XPosition = (args.X - 200).ToString();

        divDisplay = "block";

    }

 

 

    private void ToggleDivVisibility()

    {

        if (divDisplay == "block")

        {

            divDisplay = "none";

            inputText = "";

            outputText = "";

        }

        else

        {

            divDisplay = "block";

        }

    }

 

    public void OnZoomEvent(Syncfusion.Blazor.Maps.MapZoomEventArgs args)

    {

        divDisplay = "none";

        inputText = "";

        outputText = "";

    }

 

    public void OnPanEvent(Syncfusion.Blazor.Maps.MapPanEventArgs args)

    {

        divDisplay = "none";

        inputText = "";

        outputText = "";

    }

 

   public void OnResizeEvent(Syncfusion.Blazor.Maps.ResizeEventArgs args)

    {

        divDisplay = "none";

        inputText = "";

        outputText = "";

    }

 

}

You can find the sample from the below link.

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

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/maps-786359781

IMPORTANT NOTE: The above provided sample is a mockup example, you can extend the implementation in the sample application by storing the comments in a field in the object of marker data source to show it again on clicking the same marker. The design of the popup box can be improved as per your requirement.

Please let us know if you need any further assistance.