A JPG/PNG Map Image to use as Map in ASP.net MVC SF [[Clickable/Color filling for polygons]

[ponejai]

Hi

I am trying to create a clickable custom png/jpg with Village Boundaries and need to fill Village polygons with specific colors. Is a Shape File or a GeoJSONFile must be used.. What tool can be used to create a geoJSON/Shape file from a jpg/png [like old time Image Maps] so it can be used in Syncyfusion Maps controls in ASP.Net [EJS or other]

In other way, best way to convert a map image into a clickable/fillable map in SF Maps for web

thanks in advance,

[ponejai]

The easier question may be

tool to create Custom Shape Files from JPG/PNG and JSON along with

[Indumathi Ravi]

Hi Ponejai,

Maps component is designed to display the shape from the JSON file which is in GeoJSON format and also online map providers such as Bing Maps, OSM, TomTom and others. We do not handle the image (PNG/JPEG) to JSON conversion. However, you can find many online vendors to achieve this conversion. The converted JSON file can be loaded into our Syncfusion Maps component using the "ShapeData" property. Please find the code snippet for the same below.

Code Snippet:

[Index.cshtml]

<div>

     @Html.EJS().Maps("maps").Layers(m =>

     {

         m.ShapeData(ViewBag.shapeData).Add();

     }).Render();

</div>

 

[HomeController.cs]

public ActionResult Index()

{

     ViewBag.shapeData = this.GetSimpleGeoJsonData();

     return View();

}

public object GetSimpleGeoJsonData ()

{

     string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/SimpleGeoJson.json"));

     return JsonConvert.DeserializeObject(allText, typeof(object));

}

A sample application demonstrating the rendering of a simple polygon using a JSON file in the Maps component is available at the link below.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication4-72397666

Please let us know if you need any further assistance.

[ponejai]

Thank you so much..  Will try and  get back

[Indumathi Ravi]

Hi Ponejai,

You're welcome.

Please get back to us if you need any further assistance.