5

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?

1
  • 1
    If the URL of the JSON server is not on the same domain as your web app then browser security will block it. You'll need to set up a proxy. Mar 30, 2012 at 17:16

1 Answer 1

2

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]]]}}
    ]
}
2
  • 1
    It works with the example you gave me and now it even works with my file. And I am not sure I even changed something in the file. So thank you for confirming I was doing it right :)
    – Imp
    Apr 3, 2012 at 14:39
  • 1
    I had the same problem, and I repaired my GeoJSON to Capt Dragon form i.e. in first line: { "type": "FeatureCollection",
    – Marcel GJS
    Mar 30, 2014 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.