Want to add button on Map

[Yogesh Patil]

Hello Syncfusion,

I am using Map component. On map I want to add Settings and FilterIcon. So how can I achieve same.

Thank You,

Yogesh Patil

[Indumathi Ravi]

Hi Yogesh,

 

In Maps component, we can add any HTML element such as buttons using “AnnotationDirective” tag. When the “content” property of the “AnnotationDirective” tag is set with any HTML elements, it will be rendered in the component. The position of the annotation can be customized using “x” and “y” properties. Please find the code snippet below for your reference.

 

Code Snippet:

[index.js]

<MapsComponent id="maps">

            <Inject services={[MapsTooltip, Annotations]} />

            <AnnotationsDirective>

              <AnnotationDirective content="#settings" x="83%" y="5%" />

              <AnnotationDirective content="#filter" x="89%" y="5%" />

            </AnnotationsDirective>

          //..

        //..

</MapsComponent>

 

[index.html]

 

<script id='settings' type="text/x-template">

        <div id='template' onclick="SettingsClick()">

        <i class="fa fa-gear" style="font-size:36px;"></i>

        </div>

</script>

 

<script id='filter' type="text/x-template">

        <div id='template' onclick="FilterClick()">

        <i class="fa fa-filter" style="font-size:36px"></i>

        </div>

    </script>

    <script>

    function SettingsClick(){

        alert("Settings Icon is Clicked");

    }

    function FilterClick(){

        alert("Filter Icon is Clicked");

    }

</script>

 

You can find the sample from the below link.

https://stackblitz.com/edit/react-hckhtf-apc1cr?file=index.html

 

Please let us know if the above sample meets your requirements.

 

Regards,

Indumathi R.