I am having trouble drawing GeoJSON shapes in Highmaps. It draws the correct shape, but it is drawing the mirror image far below where it should be.
When I parse the GeoJSON and create an SVG path out of the coordinates, it draws it properly, so I know the coordinates are correct in the GeoJSON document.
Any help would be greatly appreciated.
GeoJSON drawing code:
var series = {
name: 'GeoJSON',
mapData: geojson
};
var chart = $('#container').highcharts();
chart.addSeries(series);
SVGPath drawing code:
var seriesdata = [];
pointstring.forEach(function(thispointstring) {
var thispointstringdata = {
"id": name.toString(),
"path": thispointstring
};
seriesdata.push(thispointstringdata);
});
var series = {
'name': 'SVGPath',
"data": seriesdata
};
var chart = $('#container').highcharts();
chart.addSeries(series);
http://jsfiddle.net/p3a2bd1d/2/ (Click the buttons to draw the shapes)
I have figured it out and will post the answer for anyone else with the same problem.
For some reason the Y values of SVGPath and GeoJSON are treated as opposites by Highmaps. If you take the absolute value of all of the Y values it will draw the GeoJSON properly.