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.
Syncfusion Feedback

Display Bing Map in the background of GeoJSON polygons

Thread ID:

Created:

Updated:

Platform:

Replies:

126236 Oct 3,2016 01:29 PM UTC Apr 14,2017 10:02 AM UTC ASP.NET MVC 12
loading
Tags: Map
Anas Alwindawee
Asked On October 3, 2016 01:29 PM UTC

Hello,

I'm try to display Bing map in the background of the GeoJSON polygons, I managed to draw the polygons alone and also I managed to render Bing map alone, but when I try to combine them using sublayer property it's not work, below is my code.

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

                .Layers(lr =>
                {
                    lr.LayerType(Syncfusion.JavaScript.DataVisualization.Models.LayerType.Bing)
                    .Key("mykey")                   
                    .SubLayers(ssl =>                        
                        {
                            ssl.ShapeData(mapData1)
                            .ShapeSettings(ss =>
                            {
                                ss.Fill("Blue")
                                .StrokeThickness(0.5)
                                .Stroke("Green");
                            })
                            .Add();                                                       
                        })
                        .Add();
                                                                                                   
                })
Please help me.



Dharanidharan Dharmasivam [Syncfusion]
Replied On October 4, 2016 11:21 AM UTC

Hi Anas, 

Thanks for using syncfusion product.  
We have analyzed your query and tried to replicate the issue , but the issue is not reproduced at our end. We have prepared a sample by displaying bing map in the background of GeoJSON Polygons(Africa). We have created basic key for education applications and used that key for bing map. Kinldy find he code snippet, 

Code Snippet: 
Asp: 

@(Html.EJ().Map("container") 
                .Layers(lr => 
                { 
                    lr.LayerType(LayerType.Bing).Key("AthrQ-lRLgDOIIN2rl6EaKZ5SIyvf1PvAidvJfIRjoVUVi9_XoVC9LYtWQOOJxP7") 
                     .SubLayers(sl => 
                     { 
                         sl.ShapeData(mapData) 
                 .ShapeSettings(ss => 
                  { 
                   ss.Fill("Blue") 
                   .StrokeThickness(0.5) 
                   .Stroke("Green"); 
                  }).Add(); 
                 }).Add(); 
                }) 
                ) 


Screenshot:  
 

For your reference we have attached the sample. Kinldy find the sample from below link, 
The bing map key can be obtained from below link, 

Since we cannot reproduce the issue at our end, kinldy revert us with following details, so that we can provide solution sooner. 
·       By modifying the attached sample or provide us with your sample with replication steps. 
  
Thanks, 
Dharani. 


Anas Alwindawee
Replied On October 4, 2016 07:28 PM UTC

Hello Dharani,

Thanks for your kind help, it's highly appreciated, at my end I recompiled the project and run it it's working now, I thing it was may be internet connection problem because I was getting an error in the javascript debugger but now I'm not.

another thing is that can I zoom to window of selected shapes, also can I select shapes with code ??

many thanks for your kind support.

BR


Dharanidharan Dharmasivam [Syncfusion]
Replied On October 5, 2016 12:58 PM UTC

Hi Anas, 

Thanks for your update. 
 
You can able to zoom on the selected shapes by enabling EnableZoomOnSelection property. You can also select the shapes with code using navigateTo and selectShape method. Kindly find the code snippet below, 
 
Code snippet: 
ASP.NET MVC: 

@(Html.EJ().Map("map") 
//... 
.ZoomSettings(zm => 
        { 
            zm.EnableZoomOnSelection(true); 
        }) 
//... 

// select shape using the navigateTo and selectShape methods 
     function buttonClick() { 
         var combo = $("#countriesCombo"); 
         var index = combo[0].selectedIndex; 
         var lat = latLongPoints[index].latitude; 
         var lon = latLongPoints[index].longitude; 
         var level = 4; 
         $("#map").ejMap("navigateTo", lat, lon, level); 
         $("#map").ejMap("selectShape", latLongPoints[index].name, null, false); 
    } 


Screenshot: 
 

For your reference, we have attached the sample. Kindly find the sample from the below link. 
  
Thanks, 
Dharani. 



Anas Alwindawee
Replied On October 6, 2016 07:00 AM UTC

Hello,

I'm really thankful for your kind support, you are wonderful team, thanks again.

What if I need to add more than two layers, actually I want to add Bing map in the background and over that I want to add open street map, and finally I need to add my polugons.

Also can I create a layer and add shapes to this layer during the running ??

finally is there any documentation for your product because I did not found all methods of map control in the documentation page.

BR

Anas Alwindawee
Replied On October 6, 2016 07:19 AM UTC

Hello,

Sorry I forget another point, that points and polygons are shifted, I think it's because of the projection, I have polygons like below.

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                               
"features": [
{ "type": "Feature", "properties": { "name": "cell1"}, "geometry": { "type": "Polygon", "coordinates": [ [ [
              44.37704086303711,
              35.42696613377983
            ],
            [
              44.37952995300293,
              35.43074278209167
            ],
            [
              44.38193321228027,
              35.430043416136144
            ],
            [
              44.38201904296875,
              35.42780540426507
            ],
            [
              44.37704086303711,
              35.42696613377983
            ] ] ] } },
{ "type": "Feature", "properties": { "name": "cell2"}, "geometry": { "type": "Polygon", "coordinates": [ [ [
              44.37695503234863,
              35.42703607332096
            ],
            [
              44.381675720214844,
              35.42549738938698
            ],
            [
              44.3818473815918,
              35.42360896438525
            ],
            [
              44.379873275756836,
              35.42311936549123
            ],
            [
              44.37695503234863,
              35.42703607332096
            ] ] ] } }
]
}

How can I correct the shifting ?

thanks in advance.

Dharanidharan Dharmasivam [Syncfusion]
Replied On October 7, 2016 12:10 PM UTC

Hi Anas, 
 
Thanks for your update. 
We have analyzed query. We have prepared a sample with respect to your requirement. In this we have added bing map to the background and then over that OSM and over that your polygons. Kindly find the code snippet below, 
 
[CS] 
 
@(Html.EJ().Map("container") 
                .Layers(lr => 
                { 
                    lr.LayerType(LayerType.Bing) 
                    .ShapeData(worldData) 
                     .SubLayers(sl => 
                     { 
                         sl.LayerType(LayerType.OSM).Add(); 
                         sl.LayerType(LayerType.Geometry) 
                         .ShapeData(polygon) 
                   .ShapeSettings(ss => 
                  { 
                      ss.Fill("Blue") 
                      .StrokeThickness(5) 
                      .Stroke("Green"); 
                  }) 
                  .Add();}).Add(); 
                }) 
                )} 
 
 
Screenshot:  
 

For your reference we have attached the sample. Find the sample from below link, 
As of now, we are facing an issue while adding layers dynamically. So we have logged issue report for this and for better follow up, we have created branch incident under your account
Please follow incident #165151 for more details regarding this. 

 Kindly revert us if you have any concern.

 

Thanks, 
Dharani. 


Anas Alwindawee
Replied On October 9, 2016 07:55 AM UTC

Hello,

Thanks for your kind support, but please refer to a documentation because the online documentation page does not offer full details about the map control.

now I'm facing another problem which I posted in new thread "Shape selection not working properly in Map Control", your kind support is highly appreciated.

BR



Dharanidharan Dharmasivam [Syncfusion]
Replied On October 10, 2016 11:50 AM UTC

Hi Anas, 
 
Thanks for your update. 
 
You can find documentation for adding sublayers, zooming functionalities and methods in map control from the below locations. 
 
Sublayers:  
Zooming functionalities:  
Methods: 
 
If we have missed any feature in documentation, kindly revert us. 
 
Regarding shape selection query, we will update in “Shape selection not working properly in Map Control” thread. 
 
Thanks, 
Dharani. 
 
 


Anas Alwindawee
Replied On October 10, 2016 08:36 PM UTC

Hello,

Thanks for your response, Actually I was looking for the methods (below) which I did not find in the ASP.NET MVC documentation and did not know it's there in the JS help page, thank you again.

Methods: 


Dharanidharan Dharmasivam [Syncfusion]
Replied On October 11, 2016 11:08 AM UTC

Hi Anas, 
 
Thanks for your update. 

You can find the documentation for methods and events from the below link. 

Methods:  
Events: 

Kindly revert us, if you require further assistance on this. 

Thanks, 
Dharani. 


Jesse Seger
Replied On April 12, 2017 08:54 PM UTC

This discussion seems to solve part of my issue, but is there a way to change the opacity of the shapes that overlay the map?  Also, is there a way to zoom to only the portion of the map that contains the shapes?

Anandaraj T [Syncfusion]
Replied On April 14, 2017 10:02 AM UTC

Hi Jesse, 

Thanks for the update. 

We have prepared a simple sample based on your requirements and it can be downloaded from the following link 

Query #1: is there a way to change the opacity of the shapes that overlay the map? 

We can customize the opacity of shapes by setting the Fill property of ShapeSettings in RGBA color format. 

Please refer the following code snippet to achieve this 

[CSHTML] 
 
@(Html.EJ().Map("container") 
 
  //. . . . 
.Layers(lr => 
                { 
                    lr.SubLayers(sl => 
                     { 
 
                        //. . . .  
                        .ShapeSettings(ss => 
                        { 
                            //Fill shape with opacity 
                            ss.Fill("rgba(0, 0, 255, 0.4)")                             
 
                            //. . . .  
 
                        }).Add(); 
 
                        //. . . .  
 
                    }).Add(); 
 
                    //. . . .  
                }) 
)} 
 


Query #2: Also, is there a way to zoom to only the portion of the map that contains the shapes? 

We can customize the zoom level of map using the Level property in ZoomSettings. We can use the CenterPosition property of map to zoom from the specified latitude and longitude coordinates of a shape. 

We have found an issue when using CenterPosition property and created a separate incident under your direct trac account. We suggest you to follow up the incident for further details. 

To avoid this issue, we can use the client-side event OnRenderComplete as a work around to achieve this requirement. Please refer the following code snippet 

[CSHTML] 
 
@(Html.EJ().Map("container") 
 
    .ClientSideEvents(events=>events.OnRenderComplete("renderComplete")) 
  
    . . . . 
    . . . . 
 
)} 
 
<script type="text/javascript"> 
    var first = true; 
    function renderComplete(sender) { 
 
        //Zoom from the location corresponing to latitude and longitude co-ordinates 10 and -100 
        sender.model.centerPosition = [10, -100]; 
 
        if (first) { 
 
            //Refresh the map 
            //container is the id used for creating the map in sample 
            $('#container').ejMap('refresh'); 
            first = false; 
        } 
    } 
</script> 

Please let us know if you have any concern. 

Regards, 
Anand 


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.

Warning Icon 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.Close Icon

;