Maeve90 Maeve90 - 7 days ago 8
Javascript Question

Adding Maplines in HighMaps using geojson file

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

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.

Comments