[GIS] How to update an OpenLayers layer from GeoJSON

geojsonopenlayers-2

OpenLayers can parse GeoJSON in order to create an array of features. So, it is possible to create a layer from GeoJSON input by simply parsing it and then adding the features to a new vector layer.

So, my current solution sends an AJAX request with the current map extent as a parameter and when the server returns the GeoJSON data, it parses them, then clears the layer and puts the newly received features into the layer.

However, I wonder if OpenLayers can do this automatically. Is it possible to create a layer that requests new GeoJSON data after being moved (e.g. using the BBOX strategy), parses the data and then adds them to the layer? The same way it is done with WFS, for example.

I tried this code:

vectorLayer = new OpenLayers.Layer.Vector("Address points", {
    projection: MAP_PROJECTION,        
    strategies: [new OpenLayers.Strategy.BBOX()],
    protocol: new OpenLayers.Protocol.HTTP({
      url: "my-webserver-that-gets-map-extent-and-returns-GeoJSON-encoded-features",
      format: new OpenLayers.Format.GeoJSON(),
      callback: function() { alert('Did at least something happen?'); }
    })
});

Firebug shows that the AJAX request is really being sent every time when I move the map and the server really replies with the GeoJSON data. I used the OpenLayers GeoJSON parser to verify if those data form a correctly structured FeatureCollection, and they do.

However, the features do not appear on the map. I tried the OpenLayers.Control.DrawFeature to draw some points to the map manually and it works ok, so the layer is definitely added and set to visible. The callback function apparently isn't invoked at all (as there is no alert message).

Any hints as to what could be wrong, please?

Best Answer

I tested you code on my server and it works fine with my JSON file. So my suspicion is that it could be the format of your JSON file. Can you include it in your original question please?

OpenLayers.Format.GeoJSON's read operation takes in a type which is the format type of the JSON file. But since we're using the OpenLayers.Protocol.HTTP to call it, we don't have the option of supplying it, which means we need to provide the data in FeatureCollection format.

Try this format: (it's what i'm using and it's working)

{ "type": "FeatureCollection",
    "features": 
    [
        {"type":"Feature", "properties":{"species":"Cat"}, "geometry":{"type":"Polygon", "coordinates":[[[-86.484375, 33.3984375], [-86.484375, 23.5546875], [-86.484375, 12.3046875], [-78.046875, 7.3828125], [-69.609375, 6.6796875], [-64.6875, 8.7890625], [-60.46875, 16.5234375], [-60.46875, 22.1484375], [-60.46875, 28.4765625], [-60.46875, 36.2109375], [-62.578125, 46.7578125], [-69.609375, 31.2890625], [-72.421875, 34.1015625], [-73.125, 34.1015625], [-75.9375, 34.1015625], [-79.453125, 34.1015625], [-79.453125, 31.9921875], [-86.484375, 45.3515625], [-87.890625, 44.6484375], [-86.484375, 33.3984375]]]}}
        ,
        {"type":"Feature", "properties":{"species":"Alligator"}, "geometry":{"type":"Polygon", "coordinates":[[[-15.46875, 35.5078125], [21.09375, 29.8828125], [59.0625, 34.1015625], [73.125, 34.1015625], [94.921875, 32.6953125], [109.6875, 24.2578125], [111.796875, 10.1953125], [101.25, -0.3515625], [79.453125, 1.0546875], [78.75, 7.3828125], [98.4375, 8.7890625], [101.25, 14.4140625], [87.890625, 17.2265625], [69.609375, 13.0078125], [75.234375, 12.3046875], [75.234375, 10.8984375], [68.90625, 10.1953125], [68.203125, 13.0078125], [49.21875, 12.3046875], [49.921875, 8.0859375], [43.59375, 7.3828125], [42.890625, 13.0078125], [29.53125, 14.4140625], [-9.84375, -8.0859375], [-14.0625, -6.6796875], [21.796875, 17.2265625], [-28.828125, 35.5078125], [-15.46875, 35.5078125]]]}}
        ,
        {"type":"Feature", "properties":{"species":"Elephant"}, "geometry":{"type":"Polygon", "coordinates":[[[-137.109375, -12.3046875], [-144.140625, -1.7578125], [-162.421875, -2.4609375], [-168.75, -31.2890625], [-167.34375, -56.6015625], [-143.4375, -56.6015625], [-138.515625, -35.5078125], [-139.21875, -49.5703125], [-132.1875, -57.3046875], [-113.203125, -54.4921875], [-97.03125, -48.8671875], [-84.375, -38.3203125], [-80.859375, -21.4453125], [-80.859375, -10.1953125], [-86.484375, -10.1953125], [-89.296875, -22.1484375], [-97.734375, -32.6953125], [-116.015625, -39.7265625], [-121.640625, -35.5078125], [-134.296875, -17.2265625], [-132.890625, -11.6015625], [-137.109375, -12.3046875]]]}}
    ]
}
Related Question