Hyperlinks / Navigation with Maps Control

[gwoo]

Hi,

is it possible to post a simple example, how to use the SF Maps control in order to use databinding for generating shape specific hyperlinks, that can be followed by just clicking the shapes?

thanks and kind regards

[Baby Palanidurai]

Hi Gert, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. We can achieve your requirement in maps shapeSelected event. This event will fire when we click on the map’s shape. In that event, you can open a new page example.   

 

Please find the below code snippet for your reference,  

 

@using Syncfusion.EJ2; 

@Html.EJS().Maps("maps").ShapeSelected("shapeSelected").Layers(layer => 

{ 

    layer.ShapeData(ViewBag.worldMap).Add(); 

}).Render() 

 

<script> 

    function shapeSelected(args) { 

        var link = "https://en.wikipedia.org/wiki/"; 

        var aEl = document.createElement('a');  

        aEl.rel = 'nofollow'; 

        aEl.rel='nofollow' href = link + args.shapeData.name; 

        aEl.target = '_blank';  

        aEl.click();  

    } 

</script> 

 

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

 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Baby. 

[gwoo]

Thanks a lot!

I'm wondering why I get "MapPropertiesBuilder has no definition for "ShapeSelected" compilation error (or any other events) when using Syncfusion.EJ (not EJ2) like below. Any ideas? Layers are working fine, just the events not.

@(Html.EJ().Map("container").ShapeSelected("shapeSelected")
                                    .Layers(layer =>
                                    {
                                        layer.ShapeData(mapData)           
                                        .ShapeDataPath("name")
                                        .ShapePropertyPath("name")
                                        .DataSource(datasource)
                                        .EnableMouseHover(true)
                                        .ShowTooltip(true)
                                        .ShowMapItems(true)
                                        .ShapeSettings(ss  =>
                                        {
                                               ss.Fill("#9CBF4E")
                                            .StrokeThickness(0.5)
                                            .Stroke("White")
                                            .HighlightStroke ("White")                          
                                            .HighlightColor("#115353")
                                            .HighlightBorderWidth(1)
                                            .ValuePath("name");
                                        })
          
                                        .Add();
                                    })
                                   

[gwoo]

Ah got it... have to use ClientSideEventBuilder...

.ClientSideEvents(eve =>
                  {
                      eve.ShapeSelected("onSelect");
                      
                  })

[Baby Palanidurai]

Hi Gert, 

Thanks for your update. 

Please revert us, if you have any other concerns. We are always happy to assist you. 

Regards, 

Baby.