Highcharts Demo

author(s): Øystein Moseng Torstein Hønsi

by Shuaib Khan

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js"></script>
<div id="container"></div>
<button id="reset" class="autocompare">Reset Zoom</button>
<button id="zoomin1" class="autocompare">Zoom In X = 1000</button>
<button id="zoomin2" class="autocompare">Zoom In X = -1000</button>

CSS

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

JavaScript

// Initiate the chart
var chart = Highcharts.Map({
    chart: {
        renderTo: 'container'
    },

    title: {
        text: 'Highmaps lat/lon demo'
    },

    mapNavigation: {
        enabled: true
    },
    

        xAxis: {
            crosshair: {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }
        },

        yAxis: {
            crosshair: {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }
        },

    tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
    },

    series: [{
        // Use the gb-all map with no data as a basemap
        mapData: Highcharts.maps['countries/gb/gb-all'],
        name: 'Basemap',
        borderColor: '#A0A0A0',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: false
    }, {
        name: 'Separators',
        type: 'mapline',
        data: Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline'),
        color: '#707070',
        showInLegend: false,
        enableMouseTracking: false
    }, {
        // Specify points using lat/lon
        type: 'mappoint',
        name: 'Cities',
        color: Highcharts.getOptions().colors[1],
        data: [{
            name: 'London',
            lat: 51.507222,
            lon: -0.1275
        }, {
            name: 'Birmingham',
            lat: 52.483056,
            lon: -1.893611
        }]
    }]
});

$('#reset').click(function () {
	chart.mapZoom();
});

$('#zoomin1').click(function () {
	chart.mapZoom(0.5, chart.xAxis[0].toValue(350), chart.yAxis[0].toValue(480), 350, 480);
});

$('#zoomin2').click(function () {
	chart.mapZoom(0.5, chart.xAxis[0].toValue(500), chart.yAxis[0].toValue(600), 500, 600);
});
chart.mapZoom(,chart.xAxis[0].toValue(350), chart.yAxis[0].toValue(480), 350, 480);

// Display...