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.

data should start with the small letter. Can you recreate the issue on jsfiddle/codepen/etc.? You can paste the json contect so it wont use ajax call. — morganfree

Maeve90 Maeve90 · Accepted Answer · 2016-11-26T12:07:01

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.

Adding Maplines in HighMaps using geojson file

1 Answers