Shape selection not working properly in Map Control

[Anas Alwindawee]

Hello,

Hope you are doing fine.

I'm facing a problem in shape selection, when I add the shapes without Bing map in the background the selection is work, but when I add the Bing map the selection only work for large shapes, please use the below code to replicate the issue.

map control cshtml page

<div style="height:600px;width:900px;">

    @(Html.EJ().Map("container")
                .Layers(lr =>
                {                   
                    lr.LayerType(Syncfusion.JavaScript.DataVisualization.Models.LayerType.Bing)
                    .Key("AhJdl18HYFR7_JMICmMv1QJGHDyiDQqPTTeTDq5I29whbZLOTDrS__dF1WmKNB8a")
                    .EnableSelection(false)                           
                    .SubLayers(sl =>                       
                        {                           
                            sl.LayerType(LayerType.Geometry)
                            .ShapeData(mapData1)
                            .EnableSelection(true)                           
                            .ShapeSettings(ss =>
                            {
                                ss.Fill("Blue")
                                .StrokeThickness(0.5)
                                .Stroke("Green");
                            })
                            .Add();                                                      
                        })                       
                        .Add();
                                                                                                  
                })                   
                .ClientSideEvents(e => e.ShapeSelected("shapeSel"))
    )

</div>

GeoJson shapes

{
  "type": "FeatureCollection",
  "features": [  
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -97.57155418395996,
              35.437666177347005
            ],
            [
              -97.57155418395996,
              35.452490031428646
            ],
            [
              -97.54915237426758,
              35.452490031428646
            ],
            [
              -97.54915237426758,
              35.437666177347005
            ],
            [
              -97.57155418395996,
              35.437666177347005
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -97.54554748535156,
              35.43409965413408
            ],
            [
              -97.54554748535156,
              35.435987833161484
            ],
            [
              -97.54237174987793,
              35.435987833161484
            ],
            [
              -97.54237174987793,
              35.43409965413408
            ],
            [
              -97.54554748535156,
              35.43409965413408
            ]
          ]
        ]
      }
    }
  ]
}

BR

[Anas Alwindawee]

Additional information

By the way I add the shapes as sub layer over Bing map where it's added as layer, here the selection is not working for small shapes,
but when I add the shapes as layer without Bing map in behind the selection is working properly even for small shapes.

BR

[Dharanidharan Dharmasivam]

Hi Anas, 

Thanks for using Syncfusion product. 

We have analyzed your query. We were not able to reproduce the reported issue. In the code snippet the shape which you have given is small, so we used SelectionStrokeWidth and SelectionStroke properties and changed StrokeThickness property as 4 in order to make visible. When the shape is selected the ShapeSelected event is triggering and we have used alert box to show the notification when the shape is selected. Kindly find the code snippet below, 

 

Code Snippet: 

ASP.NET MVC 

 

<div style="height:600px;width:900px;"> 

    @(Html.EJ().Map("container") 

                .Layers(lr => 

                { 

                    lr.LayerType(Syncfusion.JavaScript.DataVisualization.Models.LayerType.Bing) 

                    .Key("AhJdl18HYFR7_JMICmMv1QJGHDyiDQqPTTeTDq5I29whbZLOTDrS__dF1WmKNB8a") 

                    .EnableSelection(false) 

                    .SubLayers(sl => 

                    { 

                        sl.LayerType(LayerType.Geometry) 

                        .ShapeData(mapData1) 

                        .EnableSelection(true) 

                        .ShapeSettings(ss => 

                        { 

                            ss.Fill("Blue") 

                            .StrokeThickness(5) 

                            .Stroke("red") 

                            .SelectionStroke("purple") 

                            .SelectionStrokeWidth(10); 

                        }) 

                        .Add(); 

                    }) 

                        .Add(); 

 

                }) 

                .ClientSideEvents(e => e.ShapeSelected("shapeSel")) 

    ) 

</div> 

    <script> 

        function shapeSel(sender) { 

            alert("shape is selected") 

        } 

 

    </script> 

 

 

 

Screenshot: 

 

For your reference , we have attached the sample. Kindly find the sample from below location. 

Sample Location: http://www.syncfusion.com/downloads/support/forum/126340/ze/shape_selection-105156474  

Since we can’t able to reproduce the issue, kindly provide the following details, so that we can provide solution sooner. 

·       Modify the attached sample/ provide us with your sample with replication steps. 

·       Specify the browser with version. 

 

Thanks, 

Dharani. 

[Anas Alwindawee]

Hello Dharanidhara,

Thanks again for your kind support.

Attached is my sample project where I add two map controls one with Bing map behind the shapes and one without Bing map, in the one with Bing map I can only select big shapes, but with the one without Bing map I can select big shape and small shape, please zoom in to the map with Bing map so you can see the small shape.

I also attached a video from screen showing the issue.

I'm using Mozilla Firefox 49.0.1.

BR

Attachment: maptest_a4c4e9a8.rar

[Anas Alwindawee]

Hello Dharanidharan,

I'm still waiting for your feedback regard my last update where I attached sample project and a video showing the isdue, you can find them in the pervious replays attachment.

Br

[Dharanidharan Dharmasivam]

Hi Anas, 

 

Thanks for your patience. 

 

We have analyzed  your query. It seems that there is an issue in binding events for scalled small objects in firefox browser, but its working properly in IE and chrome browser. So, we have raised question in firefox forum. Kindly find forum link below, 

 

Firefox Forum: https://bugzilla.mozilla.org/show_bug.cgi?id=1310625  

 

For your reference we have attached the sample, kindly find the sample from below link. 

 

Sample Location: https://jsfiddle.net/n5rgx56r/4/  

Thanks, 

Dharani.