Hi SK,
Thank you for contacting Syncfusion support.
We can load the vector or geometry maps in the Maps component by using JSON object. We can set the JSON object by setting directly to the shapeData property. We can also load the JSON data from the database. To load the JSON file in the Maps control, we need to use the MapAjax object. When the JSON file is available in the remote URL, we set the URL in the MapAjax object. If the file is available in the local folder, we can refer same as remote URL. Since the JSON document is in local location, we need to host the application to load the document.
We have created a simple JavaScript application to demonstrate the same and it can be downloaded from the below link.
Code Snippet
var maps = new ej.maps.Maps({
layers: [
{
shapeData: new ej.maps.MapAjax('./src/maps/map-data/world-map.json'),
}]
});
maps.appendTo('#container'); |
In the above sample, we have rendered a world map using the MapAjax. Please let us know if the above sample meets your requirement.
Note: Since the JSON file is referred from the local location, we need to host the application in IIS or open it as website in the IDE to load the JSON document.
We get JSON data for maps randomly from the online. We do not recommend any open-source library for vector maps.
Please let us know if you need any further assistance.
Regards,
Swetha Babu