<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Colour Map</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
        .floating {
            float: right;
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 100;
          justify-content: center;
          align-items: center;
        }

        .button {
            background-color: #555555;
            border: none;
            color: white;
            padding: 6px 0px;
            width: 100%;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 8px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
        }
    </style>
</head>
<body>
    <div id="regions_div" style="width: 100%; height: 100%;"></div>
    <div id='chart_div'></div>
    <div class="floating">
        <a class="button" href="#" id="downloader" download="map.png">Download</a>
    </div>
           
    <script type="text/javascript"> 
        google.charts.load('current', {
            'packages':['geochart'],
          });
        google.charts.setOnLoadCallback(drawRegionsMap);    

        function drawRegionsMap() {


              var data = new google.visualization.DataTable();
                data.addColumn('string', 'Country');
                data.addColumn('number', 'Colour');
                // A column for custom tooltip content
                data.addColumn({type: 'string', role: 'tooltip'});
                data.addRows([
                    {% for country, colour in iso2colour.items() %}
                        ['{{country}}', {{colours.index(colour)}}, '{{iso2tooltip[country]}}'],
                    {% endfor %}
                ]);
        
              var options = {
                displayMode: 'regions',
                colorAxis:{
                  colors: [{% for colour in colours %} '{{colour}}', {% endfor %}],
                  values: [{% for i in range(colours|length) %} {{i}}, {% endfor %}]
                },
               legend:'none'
              };
        
              var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
              
              // Wait for the chart to finish drawing before calling the getImageURI() method.
              google.visualization.events.addListener(chart, 'ready', function () {
                    document.getElementById("downloader").href = chart.getImageURI().replace(/^data:image\/[^;]/, 'data:application/octet-stream');
              });
        
        
             chart.draw(data, options);
          }
    </script>
</body>
</html>