Display Bing Map in the background of GeoJSON polygons

[Anas Alwindawee]

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]

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, 

Sample link: http://www.syncfusion.com/downloads/support/forum/126236/ze/Map948998331  

The bing map key can be obtained from below link, 

https://www.microsoft.com/maps/create-a-bing-maps-key.aspx  

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]

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]

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. 

Sample link: http://www.syncfusion.com/downloads/support/forum/126236/ze/Zoom_map462380191  

  

Thanks, 

Dharani. 

[Anas Alwindawee]

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]

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]

HiAnas,

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,

Sample Location:http://www.syncfusion.com/downloads/support/forum/126236/ze/map_3layers-1792295616

As of now, we are facing an issue while adding layers dynamically. So we have logged issue report for this andfor better follow up, we have created branch incidentunder your account.

Please follow incident#165151for more details regarding this.

Kindly revert us if you have any concern.

Thanks,

Dharani.

[Anas Alwindawee]

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]

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:  

https://help.syncfusion.com/aspnetmvc/maps/layers#sublayer  

Zooming functionalities:  

https://help.syncfusion.com/aspnetmvc/maps/user-interaction#zooming  

Methods: 

https://help.syncfusion.com/js/api/ejmap#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]

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: 

https://help.syncfusion.com/js/api/ejmap#methods 

BR

[Dharanidharan Dharmasivam]

Hi Anas, 

 

Thanks for your update. 

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

Methods:  

https://help.syncfusion.com/js/api/ejmap#methods  

Events: 

https://help.syncfusion.com/js/api/ejmap#events  

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

Thanks, 

Dharani. 

[Jesse Seger]

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]

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 

http://www.syncfusion.com/downloads/support/forum/129915/ze/Map543855073 

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