Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open new link to certain countries #517

Open
rachelombok opened this issue Jul 3, 2020 · 0 comments
Open

Open new link to certain countries #517

rachelombok opened this issue Jul 3, 2020 · 0 comments

Comments

@rachelombok
Copy link

rachelombok commented Jul 3, 2020

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant