I am using a .svg file for plotting India map. It is displaying India map as desired. Now I want to display circles on this map using latitude and longitude.
How can I draw circles by using places array? Any source code and web link would be appreciated.
My index.html code is as like below and the svg file I am using is here. The final output of my script is here.
** Please also guide me, is this the correct way of displaying map?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="d3.v3.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var places = [
{
name: "GUNA",
location: {
latitude: 24.5429,
longitude: 77.1032
}
},
{
name: "THE DANGS",
location: {
latitude: 20.4633,
longitude: 73.4646
}
}
]
d3.xml("toilet.svg", function(xml) {
var x = document.importNode(xml.documentElement, true);
document.body.appendChild(x)
});
</script>
</body>
</html>
