OpenLayers want to access multiple GeoJSON files to create one or more vector layers

Question

If I had 200+ GeoJSON files defining borders of the world's countries, how would I get this data to appear on the map? Reading the multiple files is the part I cannot figure out. I know how to do this for a single GeoJSON file. Here's my single-file example:

var map, layer;

function init() {
  layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0", {
      layers: 'basic'
    }, {
      style: 'min-height:700px'
    });

  map = new OpenLayers.Map('map');
  map.addLayer(layer);
  createCountryBorders(map);

  map.setCenter(new OpenLayers.LonLat(0, 0), 4);
  map.zoomToMaxExtent();
}

function createCountryBorders(map) {
  var geoJsonLayer = new OpenLayers.Layer.Vector("Country Borders", {
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
      url: "countryborders/sub/countries-hires-line.json",
      format: new OpenLayers.Format.GeoJSON()
    })
  });
  map.addLayer(geoJsonLayer);
}

score 1 · Accepted Answer · answered Feb 20 '15 at 00:51

What kryger said in the answer above:

Note that transferring 200 files over the network and then processing each of them is going to make initialization noticeable (and perhaps even unbearable!)

I'de say unbearable and skip the noticable part. You should take full advantage of the capabilities of GeoJSON, one countryborder should be nothing more than one polygon or a multipolygon. that's one feature. You can create a GeoJSON featurecollection with multiple features, up to thousands if you want and put the entire collection in one file.

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "id": "AFG",
        "properties": {
            "Afghanistan"
        },
        "geometry": {
            "type": "MultiPolygon".
            "coordinates": [......]
        }
    }, {
        "type": "Feature",
        "id": "ALB",
        "properties": {
            "Albania"
        },
        "geometry": {
            "type": "MultiPolygon",
            "coordinates": [......]
        }
    }]
}

Check the GeoJSON spec for FeatureCollection: http://geojson.org/geojson-spec.html#feature-collection-objects

As a matter of fact you don't have to do that yourself. There are many to find on the net. Like the one i used in this example i made for someone here on SO (mind you, it's leaflet but it should get the point across) Here on Plunker: http://plnkr.co/edit/UGQ9xt?p=preview and here's the repo i used on Github: https://github.com/johan/world.geo.json But it you take a look around there are lots of other sources for those world boundary shapes, even in very high detail.

Thanks, but I already have a single hires file. I wanted to break it into smaller components for debugging purposes, but I planned on delivering it as a single file once all is said and done. — westandy, Feb 20 '15 at 01:40
There are better ways of debugging single features than to go through the hassle of what you are planning now. But ok, it's your party. Good luck! — iH8, Feb 20 '15 at 01:46
Any suggestions on debugging single features? Frankly, this party sucks! :) — westandy, Feb 20 '15 at 18:38
Depends on what you're trying to debug. A nice thing to have included during development when working with GeoJSON is https://github.com/mapbox/geojsonhint When you're not sure if you're working with a vaild object you can run it through GeoJSONHint to make check if it's valid: `var errors = geojsonhint.hint(string or object)` — iH8, Feb 22 '15 at 14:40
Excellent. Good to know. 2 weeks ago, I didn't even know GeoJSON existed. — westandy, Feb 23 '15 at 18:35

score 0 · Answer 2 · answered Feb 20 '15 at 00:27

You're not limited to using protocol for loading the data. You can read each file and feed it to the GeoJSON parser, getting back an array of Vectors which then can be added to the vector layer. Something like this:

var map = // ...
var vectorLayer = // ...
map.addLayer(vectorLayer);

var urls = ['country1.json', 'country2.json', 'country3.json'];
var parser = new OpenLayers.Format.GeoJSON();

urls.each(function(geoJsonUrl) {
  OpenLayers.Request.GET({
    url: geoJsonUrl,
    callback: function(response) {
      var geoJson = response.responseText;
      var vectors = parser.read(geoJson);
      vectorLayer.addFeatures(vectors);
    }
  });
})

Note that transferring 200 files over the network and then processing each of them is going to make initialization noticeable (and perhaps even unbearable!)

score 0 · Answer 3 · answered Feb 20 '15 at 01:29

I was able to get this code to work, based on kryger's suggestion. However, what I am really looking for is a way to generate the urls array from a list of files I received from the server.

Even if I end up with only 10 or so files, I would not want to hardcode their values if I can avoid it.

function createCountryBorders(map) {

    var vectorLayer = new OpenLayers.Layer.Vector("Country Borders");
    var urls = ['country1.json', 'country2.json', 'country3.json'];
    var parser = new OpenLayers.Format.GeoJSON();

    for( var ii in urls ) {
        var file = urls[ii];
        OpenLayers.Request.GET({
            url: 'countryborders/' + file,
            callback: function(response) {
              var geoJson = response.responseText;
              var vectors = parser.read(geoJson);
              vectorLayer.addFeatures(vectors);
            }
      });
    }

    map.addLayer(vectorLayer);
}

*"what I am really looking for is..."* - ask a new question, then. Nobody can see it when you ask inside an answer. — kryger, Feb 20 '15 at 21:49
So, I think this might be a potential solution to the "what I am really looking for is...": https://stackoverflow.com/questions/24658590/in-javascript-how-do-you-open-a-file-from-the-server using AJAX — westandy, Feb 23 '15 at 18:45

OpenLayers want to access multiple GeoJSON files to create one or more vector layers

3 Answers3