datamaps
datamaps copied to clipboard
Open new link to certain countries
So for my map, I have set up an event so that when a country is clicked on the map, it redirects to the home page. But I only want this to happen when I have data for a country.
<script>
// example data from server
var series = [ ["USA", 10]];
...
new Datamap({
element: document.getElementById('container1'),
projection: 'mercator',
fills: { defaultFill: '#F5F5F5' },
data: dataset,
geographyConfig: {
borderColor: '#DEDEDE',
highlightBorderWidth: 2,
// don't change color on mouse hover
highlightFillColor: function(geo) {
return geo['fillColor'] || '#F5F5F5';
},
// only change border
highlightBorderColor: '#B7B7B7',
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
//alert(geography.properties.name);
return [window.location.href = "{{ url_for('home')}}"];
});
},
// show desired information in tooltip
popupTemplate: function(geo, data) {
// don't show tooltip if country don't present in dataset
if (!data) { return ; }
// tooltip content
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
//'<br>Count: <strong>', data.numberOfThings, '</strong>',
'</div>'].join('');
}
}
});
</script>
My popupTemplate works, and only shows the countries name, if it exists, so that means the USA is the only one that shows when hovering. But in my done() function, all the countries redirect to the home page. How can I make it so only countries in my dataset can be redirected?