Display geometry shape in bing maps

17 Feb 20223 minutes to read

Usually bing map displays the Maps in satellite view in which you can’t make changes as per your requirement. To over come this, you can add maps shape as sublayer over the bing map and you can customize it as per your requirement. Kindly follow the below steps to add geometry shapes as sublayer in bing maps.

Step 1:

To render the Maps control as bing map, set the ShapeLayerType as Bing and also provide the key for the bing map.

<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer layerType="Bing" key="AuQazZ3PUo3p2_c2KPhqMku-iKvee5fKcRREIg46MENqVTM9dp2ZyTbrHJpR9esZ">
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

bing map

Step 2:

The geometry shape can be added in the bing map using sublayer concept. In the below example, Africa continent can be set as the sublayer in bing map using the Type property.

<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer layerType="Bing" key="..// BingMap key here">
        </e-maps-layer>
        <e-maps-layer layerType="Geometry" type="SubLayer" shapeData="ViewBag.africa">
            <e-layersettings-shapesettings fill="blue"></e-layersettings-shapesettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.africa = GetAfricaMap();
            ViewBag.africaShape = GetAfricaShape();
            return View();
        }

        public object GetAfricaShape()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/Africa.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }

        public object GetAfricaMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/Africa.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

bing map with sublayer