Highcharts Long Lat to World Map Plot

author(s): Umair Rafiq

by Umair Rafiq

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://code.highcharts.com/mapdata/index.js"></script>
<script src="https://rawgithub.com/highcharts/draggable-points/master/draggable-points.js"></script>

<div id="outer">
  <div id="outer-container">
    <div id="container"></div>
    <div id="code-container">
      <button id="close">Back to map</button>
      <div id="code-inner"></div>
    </div>
  </div>

  <form>
    <div class="form">

      <p>
        <label>Load another map</label>
        <select id="maps"></select>
      </p>

      <p>
        Clicking adds points to
        <input type="radio" name="series" value="points" id="points" checked="checked" />
        <label for="points">Points</label>
        <input type="radio" name="series" value="connected-points" id="connected-points" />
        <label for="connected-points">Connected points</label>
      </p>

      <p>
        <input type="checkbox" name="delete" id="delete" />
        <label for="delete">Delete points by click</label>
      </p>
      <p>
        <button id="getconfig">Get series configuration</button>
      </p>
    </div>
  </form>
</div>

CSS

#outer {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

#outer-container {
  height: 500px;
  overflow: hidden;
}

#container {
  height: 500px;
  transition: margin-top 500ms;
}

#code-container {
  height: 500px;
  overflow: auto;
}

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

.form {
  border: 1px solid silver;
  padding: 0 1em;
}

pre {
  border: 1px solid green;
  border-radius: 5px;
  padding: 1em;
  color: green;
}

#close {
  float: right;
}

JavaScript

var H = Highcharts;

function showMap(mapKey) {

  var supportsLatLon = !!Highcharts.maps[mapKey]['hc-transform'];

  // Add series with state capital bubbles
  $.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-capitals.json', function(json) {
    console.log('loaded');
    var data = [];
    $.each(json, function() {
      this.z = this.population;
      data.push(this);
    });


    // Initiate the chart
    Highcharts.mapChart('container', {

      chart: {
        events: {
          click: function(e) {
            var series = this.get($('input[name=series]:checked').val()),
              x = Math.round(e.xAxis[0].value),
              y = Math.round(e.yAxis[0].value);

            series.addPoint(supportsLatLon ? this.fromPointToLatLon({
              x: x,
              y: y
            }) : {
              x: x,
              y: y
            });
          }
        },
        animation: false
      },

      title: {
        text: 'Draw your own points or lines'
      },

      subtitle: supportsLatLon ? {} : {
        text: 'This map does not support latitude/longitude - x/y coordinates will be used',
        style: {
          color: 'red'
        }
      },

      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },

      legend: {
        enabled: false
      },

      tooltip: {
        pointFormatter: function() {
          return supportsLatLon ? 'Lat: ' + this.lat.toFixed(3) + ', Lon: ' + this.lon.toFixed(3) : 'x: ' + this.x + ', y: ' + this.y;
        }
      },

      plotOptions: {
        series: {
          point: {
            events: {
              // Update lat/lon properties after dragging point
              drop: function() {
                var newLatLon;
                if (supportsLatLon) {
                  newLatLon = this.series.chart.fromPointToLatLon(this);
                  this.lat =...