Australia - Highmaps

Highmaps demo

by oysteinmoseng

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<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/countries/au/au-all.js"></script>

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

CSS

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

JavaScript

$(function () {
    
    // Get chart Point object from coordinates. Might not work very well with old browsers.
    // TODO: IE needs clientX/Y instead of pageX/Y for elementFromPoint() method.
    // The coords argument is an object containing x and y properties (axis values). 
    // The series argument is the series to look for points in.
    Highcharts.Chart.prototype.getPointAtCoords = function (coords, series) {
        var chart = this,
            dataLabels = series.dataLabelsGroup && series.dataLabelsGroup.element,
            dataLabelsParent,
            insertionPoint,
            el,
            offset = HighchartsAdapter.offset(chart.container),
            insertDataLabels = function () {
                if (dataLabels) {
                    if (insertionPoint) {
                        dataLabelsParent.insertBefore(dataLabels, insertionPoint);
                    } else {
                        dataLabelsParent.appendChild(dataLabels);    
                    }
                }
            };

        // Make sure data labels are disabled until we have calculated the location of the lat/lon points.
        // Otherwise, the document.getElementFromPoint() method might return the data label element.               
        if (dataLabels) {
            insertionPoint = dataLabels.nextSibling;
            dataLabelsParent = dataLabels.parentNode;
            dataLabelsParent.removeChild(dataLabels);
        }

        var x = chart.xAxis[0].toPixels(coords.x) + offset.left,
            y = chart.yAxis[0].toPixels(coords.y) + offset.top;
        console.log("old:", coords.x, coords.y, "new:", x,y)
        
        // Get SVG element at the point
        el = document.elementFromPoint(x, y);

        // We loop through the points of the chart to see if their SVG elements match
        for (var i = 0, l = series.points.length; i < l; ++i) {
            if (series.points[i].graphic.element === el) {
                insertDataLabels();
               ...