We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Shape selection not working properly in Map Control

Thread ID:

Created:

Updated:

Platform:

Replies:

126340 Oct 9,2016 04:05 AM Oct 17,2016 08:37 AM ASP.NET MVC 5
loading
Tags: Map
Anas Alwindawee
Asked On October 9, 2016 04:05 AM

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
Replied On October 9, 2016 04:27 AM

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 [Syncfusion]
Replied On October 10, 2016 07:17 AM

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. 
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
Replied On October 10, 2016 04:31 PM

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
Replied On October 17, 2016 12:43 AM

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 [Syncfusion]
Replied On October 17, 2016 08:37 AM

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, 
 
 
For your reference we have attached the sample, kindly find the sample from below link. 
 


Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;