datamaps icon indicating copy to clipboard operation
datamaps copied to clipboard

Open new link to certain countries

Open rachelombok opened this issue 4 years ago • 0 comments

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?

rachelombok avatar Jul 03 '20 21:07 rachelombok