Adding Maplines in HighMaps using geojson file

Question

I a trying to create a chloropleth map of population in HighMaps using custom geojson files.

I have 2 geojson files - the first contains county level data and the second contains smaller townland areas which are contained within the counties.

I am trying to add county level borders to my chloropleth map similar to this example: http://www.highcharts.com/maps/demo/us-counties

I am able to get the small areas to plot correctly with the appropriate colour gradients; however the county borderlines are not appearing on my map.

My js code is below:

$(function() {

  $.getJSON('population.json', function(data) {

  $.getJSON('smaller_areas.geojson', function(geojson) {

  $.getJSON('counties.geojson', function(maplines){


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

                    width: 600,
                borderWidth: 1
            },

    title: {
      text: 'Population'
    },

    legend: {

                title: {
                    text: 'Crime Rates',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                    }
                },
                align: 'right',
                verticalAlign: 'top',
                floating: true,
                layout: 'vertical',
                valueDecimals: 0,
                backgroundColor: (Highcharts.theme &&   Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
                symbolRadius: 0,
                symbolHeight: 14
            },

      mapNavigation: {
        enabled: true,
        enableDoubleClickZoomTo: true
      },

         colorAxis: {
            min: 1,
            type: 'logarithmic',
            minColor: '#EEEEFF',
            maxColor: '#000022',
            stops: [
                [0, '#EFEFFF'],
                [0.67, '#4444FF'],
                [1, '#000022']
            ]
        },

      series: [{
        data: data,
        mapData: geojson,
        joinBy: ['GEOGID', 'GEOGID'],
        name: 'Population',
        tooltip: {
          pointFormat: '{point.Name}: {point.value}'
        }
        },
        {
              type: 'mapline',
              name: 'County Borders',
              Data: maplines,
              color: 'black',
              lineWidth: 10
          }]
        });
      });
    });
  });
});

I am presuming that I will need to modify the 'data' command for the maplines series due to the fact I am reading from a geojson file; however I am not sure how to do this.

My geojson for the county data looks like this: { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name" "urn:ogc:def:crs:EPSG::3857" } }, "features": [ { "type": "Feature", "properties": {"COUNTYNAME": "Leitrim"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -925332.1353, 7260461.4174 ], [ -925231.9477, 7260212.372 ], [ -925020.4407, 7260020.804 ], [ -924719.8781, 7259925.0218 ], [ -924597.4266, 7259886.7092 ],

followed by the remaining projections for that county and the subsequent counties.

Can anyone help?

Thanks in advance.

Answer 1

I actually solved it myself - the trick to this was to call javascript files containing the geojson data instead of calling the geojson files directly.