I want that if you click to a link in Datamaps (D3), you get to a special Link, but this should be just possible, if the variable blogentries is >0 or is set.
My Code:
<script>
var map = new Datamap({
element: document.getElementById('worldmap'),
responsive: true,
geographyConfig: {
highlightOnHover: false,
popupOnHover: false
},
fills: {
'VISITED': '#13304F',
defaultFill: '#d6e5f5'
},
data: {
'FIN': {
fillKey: 'VISITED',
blogentries: 1
},
'AUT': {
fillKey: 'VISITED',
blogentries: 1
},
},
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
if (data.blogentries > 0) {
window.location = "https://www.link.com/" + (geography.properties.name);
}
});
}
});
// Pure JavaScript
window.addEventListener('resize', function() {
map.resize();
});
// Alternatively with d3
d3.select(window).on('resize', function() {
map.resize();
});
// Alternatively with jQuery
$(window).on('resize', function() {
map.resize();
});
</script>
Thx for your help
try
if (d3.select(geography).datum().blogentries > 0) {
// ....
}
Edit
You have to put the map-fill-data in a separate variable and use the geography.id
to get the value for blogentries
var mapData = {
'FIN': {
fillKey: 'VISITED',
blogentries: 1
},
'AUT': {
fillKey: 'VISITED',
blogentries: 1
},
};
var map = new Datamap({
element: document.getElementById('worldmap'),
responsive: true,
geographyConfig: {
highlightOnHover: false,
popupOnHover: false
},
fills: {
'VISITED': '#13304F',
defaultFill: '#d6e5f5'
},
data: mapData,
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
if (mapData[geography.id] && mapData[geography.id].blogentries > 0) {
window.location = "https://www.test.com/" + (geography.properties.name);
}
});
}
});