topojson data not rendering in openlayers

Question

I am trying to load topojson files into openlayers

I use topojson files from https://github.com/deldersveld/topojson/tree/master/continents

When i draw south america it does work:

https://codepen.io/pixelatorz/pen/LdJwzQ?&editors=1010

var raster = new ol.layer.Tile({
  source: new ol.source.TileJSON({
    url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure'
  })
});

var style = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.6)'
  }),
  stroke: new ol.style.Stroke({
    color: '#319FD3',
    width: 1
  })
});

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'https://raw.githubusercontent.com/deldersveld/topojson/master/continents/south-america.json',
    format: new ol.format.TopoJSON(),
    overlaps: false
  }),
  style: style
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});

however when i change the source url to the one of north-america, or europe it does not work, oceania for example does work

example: https://codepen.io/pixelatorz/pen/MVqqqJ?editors=1010

I tested some other topojson files from other sources and some do get drawn others won't, I don't see much difference between the files and can't find what is going wrong.

score 1 · Accepted Answer · answered Apr 06 '18 at 18:53

You can see the error when looking at the console in your codepen. When you use ol-debug.js instead of the production version, it is way easier to debug:

VM1668 ol-debug.js:52808 Uncaught TypeError: geometryReader is not a function

at Function.ol.format.TopoJSON.readFeatureFromGeometry_ (VM52 ol-debug.js:52808)

The reason behind your error is, that the north-american dataset has geometries which do not have a type (nor any actual geometrical data).

As you can see in OL's TopoJson format source code, it tries to convert that to a geometry, using a list of geometryReaders. Since there is no reader for geometry type null, it fails.

But there is a simple workaround: register your own geometry conversion function for type null.

ol.format.TopoJSON.GEOMETRY_READERS_[null] = function(object, scale, translate){
  // convert into dummy point
  return new ol.geom.Point([0,0]);
}

for people who'd like a working example of the above code check here: https://codepen.io/pixelatorz/pen/aYPQQx?editors=1010 — pixelatorz, Apr 09 '18 at 14:43

topojson data not rendering in openlayers

1 Answers1