twentyone-world.github.io/index.html

---
layout: map
title: Twentyone.World
jsplugins:
qtip: '/js/jquery.qtip.min.js'
---

<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css">
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>


<script type="text/javascript">

    $(function () {

        // initialize tooltips
        $.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
        $.fn.qtip.defaults.style.def = false;

        var map = kartograph.map('#map');

        map.loadMap('map/world.svg', function () {
            map.addLayer('context', {
                styles: {
                    stroke: '#aaa',
                    fill: '#f6f4f2'
                }
            });
            map.addLayer('countries', {
                id: 'bg',
                styles: {
                    stroke: '#000',
                    'stroke-width': 6.15,
                    'stroke-linejoin': 'round'
                }
            });

            map.addLayer('countries', {
                title: function (d) { return d.name },
                styles: {
                    stroke: '#222',
                    fill: '#333'
                },
                mouseenter: function (d, path) {
                    path.attr('fill', Math.random() < 0.5 ? '#735000' : '#BBB');
                },
                mouseleave: function (d, path) {
                    path.animate({ fill: '#333' }, 1000);
                },
                click: function (d, path) {
                    console.log(d.iso);
                }
            });

            $.ajax({
                url: 'data/countries.json',
                dataType: 'json',
                success: function (countries) {

                    var scale = kartograph.scale.sqrt(countries.concat([{ nb_visits: 0 }]), 'nb_visits').range([0, 60]);
                    var orangeCountries = countries.filter(function hasLink(c) {
                        var hasLink = c.link ? true : false;
                        return hasLink;
                    });

                    map.getLayer('countries').style('fill', function (data) {
                        console.log('gnaaa');
                        var germany = countries[0];
                        console.log(germany);


                        console.log('ORANGE COUNTRIES: ' + orangeCountries);
                        var orangeCountryCodes = orangeCountries.map(function(c) {
                            return c.alpha3;
                        });

                        console.log('ORANGE CODES: ' + orangeCountryCodes);

                        var isOrangeCountry = orangeCountryCodes.includes(data.iso)

                        return isOrangeCountry ? '#d00' : '#ccc';
                    });


                    map.addSymbols({
                        type: kartograph.Bubble,
                        data: countries,
                        location: function (country) {
                            return [country.longitude, country.latitude];
                        },
                        radius: function (country) {
                            return scale(country.nb_visits);
                        },
                        tooltip: function (country) {
                            return '<h3>' + country.country_name + '</h3>' + country.nb_visits + ' visits';
                        },
                        sortBy: 'radius desc',
                        style: 'fill:#F2A900; stroke: #000; fill-opacity: 0.5;',
                    });
                }
            });

        }, { padding: -5 });

    });

</script>


<div id="map" style="border:0px solid #999; margin-bottom:1em">
</div>

<p>Lorem ipsum, add your stuff.</p>