Europe - Highmaps

Highmaps demo

by oysteinmoseng

HTML

<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/europe.js"></script>

<div id="container"></div>

CSS

#container {
    height: 800px; 
    width: 800px;
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

$(function () {
     
    function onMouseOver() {
        var pointElem = this.graphic;
        if (this.hoverTimeout) {
            clearTimeout(this.hoverTimeout);
            return;
        }
        pointElem.attr({
            translateX: -4,
            translateY: -4,
            zIndex: 2 // Is there a cleaner way to avoid messing with Z-index?
        });
        pointElem.shadow({
            offsetX: -2,
            offsetY: -2,
            width: 4,
            opacity: 0.6
        });
    }
    
    function onMouseOut() {
        var point = this,
            pointElem = point.graphic,
            shadows = pointElem.shadows,
            numShadows = shadows.length;            
        
        point.hoverTimeout = setTimeout(function () {
            // Destroy shadows
            for (var i = 0; i < numShadows; ++i) {
                pointElem.safeRemoveChild(shadows[i]);
            }
            
            // Reposition to original
            pointElem.attr({
                translateX: 0,
                translateY: 0,
                zIndex: 1
            });
            delete point.hoverTimeout;
        }, 50);
    }
    
    // Prepare demo data
    var data = [
        {
            "hc-key": "dk",
            "value": 0
        },
        {
            "hc-key": "fo",
            "value": 1
        },
        {
            "hc-key": "hr",
            "value": 2
        },
        {
            "hc-key": "nl",
            "value": 3
        },
        {
            "hc-key": "ee",
            "value": 4
        },
        {
            "hc-key": "bg",
            "value": 5
        },
        {
            "hc-key": "es",
            "value": 6
        },
        {
            "hc-key": "it",
            "value": 7
        },
        {
            "hc-key": "sm",
            "value": 8
        },
        {
            "hc-key": "va",
            "value": 9
        },
        {
            "hc-key": "tr",
            "value": 10
      ...