GeoJSON drawing incorrectly in Highmaps

125 views Asked by At

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)

1

There are 1 answers

0
MikeSWelch On

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.