title: HighMap is not rendering map
body: <p>I am trying to use Highsock and Highmaps together and create two dynamic chart using ajax call. For Highmaps I am using the example of Map point with lat/long from Highmaps demo. <a href="http://www.highcharts.com/maps/demo/mappoint-latlon" rel="nofollow noreferrer">http://www.highcharts.com/maps/demo/mappoint-latlon</a></p>
  
  <p>The script is provided below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;title&gt;Different Maps&lt;/title&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt; --&gt;
      &lt;script src="http://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.highcharts.com/stock/modules/exporting.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"&gt;&lt;/script&gt;
  
      &lt;script src="http://code.highcharts.com/modules/map.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.highcharts.com/maps/modules/exporting.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.highcharts.com/mapdata/custom/world.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/app/appStart.js" &gt;&lt;/script&gt;
  
      &lt;link type="text/css" href="css/app.css" rel="stylesheet"&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div  class="chart" id="statusChart" &gt;
      &lt;/div&gt;
  
      &lt;div class ="chart" id ="geoChart" &gt;
      &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
   
  
  <pre><code>$(function() {
      var url = 'statistics';
  
      $.ajax(url).done(function(data) {
          loadStatusChart(data);
          loadGeoChart(data);
      });
  });
  
  
  function updateStatusSeries(handleData) {
      var url = 'statistics';
  
      $.ajax(url).done(function(data) {
          var statusCode = data.statusCode[0];
          handleData(statusCode);
      });
  }
  
  function updateGeoSeries(handleData) {
      var url = 'statistics';
      $.ajax(url).done(function(data) {
  
          var geoLocation = data.geoLocation[0];
          handleData(geoLocation);
      });
  }
  
  
  function loadStatusChart(statistics) {
      var StatusCode = statistics.statusCode;
  
      var StatusSeries = [];
      $.each(StatusCode, function(index, item) {
  
          var timeInSeconds = item.label/1000;
          for(var i = 10; i &gt;= 1; i--){
              StatusSeries.push({
                  x : (timeInSeconds - (i))*1000,
                  y : null
              });
          }
          StatusSeries.push({
              x : Number(item.label),
              y : item.value
          });
      })
  
      $("#statusChart").highcharts('StockChart', {
          chart : {
              type : 'spline',
              animation : Highcharts.svg,
              marginRight : 10,
              events : {
                  load : function() {
                      // set up updating of the chart after every 10 seconds
                      // second
                      var series = this.series[0];
                      setInterval(function () {
                          updateStatusSeries(function(statusCode) {
                              var x = (new Date()).getTime();
                              // series.addPoint([x, Math.random()], true, true);
                              series.addPoint([Number(statusCode.label), statusCode.value], true, true);
                          });
                      }, 1000);
                  }
              }         
          },
          rangeSelector: {
              buttons: [{
                  count: 10,
                  type: 'second',
                  text: '10s'
              }, {
                  count: 5,
                  type: 'minute',
                  text: '5M'
              }, {
                  type: 'all',
                  text: 'All'
              }],
              inputEnabled: false,
              selected: 0
          },
          title: {
              text: 'Live Data from Sample Application Servlet'
          },
          xAxis: {
              type: 'datetime'
          },
          yAxis: {
              title: {
                  text: 'Number of Clicks'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          // tooltip: {
          //    formatter: function () {
          //        return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' +
          //            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '&lt;br/&gt;' +
          //            Highcharts.numberFormat(this.y, 2);
  
          legend: {
              enabled: false
          },
          exporting: {
              enabled: false
          },
          series: [{ data: StatusSeries }]
      });
  };
  
  function loadGeoChart(statistics) {
      var GeoLocation = statistics.geoLocation;
  
      var GeoSeries = [];
      $.each(GeoLocation, function(index, item) {
          GeoSeries.push({
              x : item.lat,
              y : item.lon
          });
      })
  
      // Initiate the chart
      $('#geoChart').highcharts("Map", {
          title: {
              text: 'Highmaps basic lat/lon demo'
          },
  
          mapNavigation: {
              enabled: true
          },
  
          tooltip: {
              headerFormat: '',
              pointFormat: '&lt;b&gt;{point.name}&lt;/b&gt;&lt;br&gt;Lat: {point.lat}, Lon: {point.lon}'
          },
  
          series: [{
              // Use the custom/world map with no data as a basemap
              mapData: Highcharts.maps['custom/world'],
              name: 'Basemap',
              borderColor: '#A0A0A0',
              nullColor: 'rgba(200, 200, 200, 0.3)',
              showInLegend: false
          }, {
              name: 'Separators',
              type: 'mapline',
              data: Highcharts.geojson(Highcharts.maps['custom/world'], 'mapline'),
              color: '#707070',
              showInLegend: false
          }, {
              // Specify points using lat/lon
              type: 'mappoint',
              name: 'Countries',
              color: Highcharts.getOptions().colors[1],
              data: [{
                  load : function() {
                      // set up updating of the chart after every 10 seconds
                      // second
                      var series = this.series[0];
                      setInterval(function () {
                          updateGeoSeries(function(geoLocation) {
                              series.addPoint([geoLocation.lat, geoLocation.lon]);
                          });
                      }, 1000);
                  dataLabels: {
                      align: 'left', {
                          x: 5,
                          verticalAlign: 'middle'
                      }
                  }
  
                  series: [{ data: GeoSeries }]
  
                  }
              }]
          }]
      });
  };
  </code></pre>
  
  <p>But when I am running the script, the highstock chart is working fine but no map is visible and during debugging of the page I get the following error.</p>
  
  <pre><code>Highcharts.geojson is not a function.
  </code></pre>
  
  <p>And the error appears in this line.</p>
  
  <pre><code>data: Highcharts.geojson(Highcharts.maps['custom/world'], 'mapline'),
  </code></pre>
  
  <p>What am I doing wrong here? Any help will be really appreciated. Thanks.</p>