'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var Highcharts = require('highcharts/highmaps.src.js');
var proj4 = require('./proj4.js');
// NB! gb-all.js is modified to export content instead of setting it on Highcharts.
var map_GB_All = require('./gb-all.js');
var options = {
    title: {
        text: 'Highmaps lat/lon demo'
    },
    mapNavigation: {
        enabled: true
    },
    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: map_GB_All,
        name: 'Basemap',
        borderColor: '#A0A0A0',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: false
    }, {
        name: 'Separators',
        type: 'mapline',
        data: Highcharts.geojson(map_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
        }]
    }]
};
var onRender = function () {
    // NB! Hack to include Proj4. Highcharts looks for it on the window object.
    window.proj4 = proj4;
    // Create the chart.
    Highcharts.Map('chart', options);
}
var chartContainer = React.createElement('div', { id: 'chart' });
ReactDOM.render(chartContainer, document.getElementById('app'), onRender);