Am using d3.js in my angular7 project to display the map and am using https://datamaps.github.io/ datamaps which is also using d3.js. to plot points(data) we need lat-long but what if I don't have lat-long and I have a country name then how can I plot the points(data) without lat-long.
bubble_map.bubbles([ { radius: 10, centered: 'BRA', country: 'USA', data: { Open: 120, Closed: 40, Agriculture: 60, Water: 34, Finance: 10, Transportation: 8, Other: 4, } }, { radius: 8, country: 'USA', centered: 'USA', data: { Open: 120, Closed: 40, Agriculture: 60, Water: 34, Finance: 10, Transportation: 8, Other: 4, } }, { radius: 12, country: 'USSR', latitude: 73.482, longitude: 54.5854, data: { Open: 120, Closed: 40, Agriculture: 60, Water: 34, Finance: 10, Transportation: 8, Other: 4, } } ]}
export class MapComponent implements OnInit {
constructor() { }
ngOnInit() {
let bubble_map = new Datamap({
element: document.getElementById("container"),
height: '460',
scope: 'world',
geographyConfig: {
popupOnHover: false,
dataUrl: null,
borderColor: '#E5E5E5',
hideAntarctica: true,
hideHawaiiAndAlaska: true,
borderWidth: 1,
borderOpacity: 1,
highlightOnHover: true,
highlightFillColor: '#F2F2F2',
highlightBorderColor: '#E5E5E5',
highlightBorderWidth: 1,
highlightBorderOpacity: 1,
exitDelay: 100,
animate: true
},
fills: {
defaultFill: '#F2F2F2'
},
bubblesConfig: {
borderWidth: 4,
borderOpacity: 1,
animate: true,
fillColor: '#fff',
borderColor: '#632AFF',
popupOnHover: true,
highlightFillColor: '#fff',
highlightBorderColor: '#632AFF',
highlightBorderWidth: 6,
exitDelay: 100
},
arcConfig: {
strokeColor: '#DD1C77',
strokeWidth: 1,
arcSharpness: 1,
animationSpeed: 600
},
done: function() {},
});
// d3.select(window).on('resize', function () {
// bubble_map.resize();
// });
bubble_map.bubbles([
{
radius: 10,
centered: 'BRA',
country: 'USA',
data: {
Open: 120,
Closed: 40,
Agriculture: 60,
Water: 34,
Finance: 10,
Transportation: 8,
Other: 4,
}
},
{
radius: 8,
country: 'USA',
centered: 'USA',
data: {
Open: 120,
Closed: 40,
Agriculture: 60,
Water: 34,
Finance: 10,
Transportation: 8,
Other: 4,
}
},
{
radius: 12,
country: 'USSR',
latitude: 73.482,
longitude: 54.5854,
data: {
Open: 120,
Closed: 40,
Agriculture: 60,
Water: 34,
Finance: 10,
Transportation: 8,
Other: 4,
}
}
], {
popupTemplate: function (geo, res) {
// data = {};
// let name = res.country;
let newdata = res.data;
return `<div class="hoverinfo"
style="
background: rgba(255, 255, 255, 0.96);
border: 1px solid #e5e5e5;
box-sizing: border-box;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
border-radius: 10px;
padding: 8px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
color: #000000;
float: left;
cursor: pointer;
">
<div style="
font-size: 12px;
font-weight: bold;
margin-bottom: 4px;
">${ res.country }</div>
<div style="
float:left;
margin-right: 15px;
">
<div style="margin-bottom: 2px;">Open : ${newdata.Open}</div>
<div>Closed : ${newdata.Closed}</div>
</div>
<div style="
float:left
">
<div style="margin-bottom: 2px;">Agriculture: ${newdata.Agriculture}</div>
<div style="margin-bottom: 2px;">Water: ${newdata.Water}</div>
<div style="margin-bottom: 2px;">Finance: ${newdata.Finance}</div>
<div style="margin-bottom: 2px;">Transportation: ${newdata.Transportation}</div>
<div style="margin-bottom: 2px;">Other: ${newdata.Other}</div>
</div>
</div>`
}
});
}
ngAfterViewInit() { }
}