[GIS] How to change an OpenLayers vector layer from automatic to manual get request

javascriptlayersopenlayers-2vector

I have a web server that returns a FeatureCollection in JSON. I was getting this using the code below, which works perfectly:

var vectorLayer = new OpenLayers.Layer.Vector('geoJSON', {
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: '<%= Url.Action("Vectors", "Maps") %>',
        format: new OpenLayers.Format.GeoJSON()
    }),
    styleMap: new OpenLayers.StyleMap(style)
});

I want to convert this into a manual async get request as part of something else (I'm displaying routes and want to do several requests, one for each route so I can display them as they are calculated, avoiding a large delay).

So, I've changed the above to the code below:

OpenLayers.Request.GET({
    url: '<%= Url.Action("Vectors", "Maps") %>',
    async: true,
    success: function(e) {
        var features = new OpenLayers.Format.GeoJSON().read(e.responseText);
        vectorLayer.addFeatures(features);
    }
});

However, when I run this although the callback is called, the e.responseText looks ok and the features variable seems to contain the correct objects and they do get added to the vectorLayer, they appear in the wrong place; Right next to the origin. On OSM's max zoom they are barely apart from each other, when they should be scattered around the UK.

Any idea why since the change to a manual GET they are appearing in the wrong places?

See below for my current code listing:

var map, layer;
map = new OpenLayers.Map(element.id);
baseLayer = new OpenLayers.Layer.OSM('Simple OSM Map');


var context = {
    getColor: function(feature) {
        return feature.attributes['Colour'];
    },
    getImageURL: function(feature) {
        return feature.attributes['ImageURL'];
    },
    getLabel: function(feature) {
        return feature.attributes['Label'];
    }
};

var template = {
    externalGraphic: '${getImageURL}',
    pointRadius: 5,
    strokeWidth: 3,
    strokeColor: "${getColor}"
};



var style = new OpenLayers.Style(template, { context: context });

/*var vectorLayer = new OpenLayers.Layer.Vector('geoJSON', {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: '<%= Url.Action("Vectors", "Maps") %>',
format: new OpenLayers.Format.GeoJSON()
}),
styleMap: new OpenLayers.StyleMap(style)
});*/

var vectorLayer = new OpenLayers.Layer.Vector('geoJSON');
vectorLayer.styleMap = new OpenLayers.StyleMap(style);

OpenLayers.Request.GET({
    url: '<%= Url.Action("Vectors", "Maps") %>',
    async: true,
    success: function(e) {
        var features = new OpenLayers.Format.GeoJSON().read(e.responseText);
        vectorLayer.addFeatures(features);
    }
});

map.addLayers([baseLayer, vectorLayer]);
map.setCenter(
    new OpenLayers.LonLat(-4, 55).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
    ), 6
);

An example of the JSON that gets returned (and hasn't changed since it worked):

{ "features" : [ { "geometry" : { "coordinates" : [ -0.72766602400000002,
                51.273638529999999
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ [ -0.82559629999999995,
                  51.296390000000002
                ],
                [ -0.72766602400000002,
                  51.273638529999999
                ],
                [ -0.82559629999999995,
                  51.296390000000002
                ]
              ],
            "type" : "LineString"
          },
        "properties" : { "Colour" : "#{72:x2}{241:x2}{152:x2}",
            "ImageURL" : null
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.82559629999999995,
                51.296390000000002
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/Home.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.41132172900000002,
                50.821081319999998
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ [ -0.47245280000000001,
                  50.817610000000002
                ],
                [ -0.41132172900000002,
                  50.821081319999998
                ],
                [ -0.47245280000000001,
                  50.817610000000002
                ]
              ],
            "type" : "LineString"
          },
        "properties" : { "Colour" : "#{206:x2}{155:x2}{66:x2}",
            "ImageURL" : null
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.47245280000000001,
                50.817610000000002
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/Home.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ 0.074993041999999996,
                51.270947649999997
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ [ 0.075924359999999996,
                  51.268300000000004
                ],
                [ 0.074993041999999996,
                  51.270947649999997
                ],
                [ 0.075924359999999996,
                  51.268300000000004
                ]
              ],
            "type" : "LineString"
          },
        "properties" : { "Colour" : "#{99:x2}{146:x2}{254:x2}",
            "ImageURL" : null
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ 0.075924359999999996,
                51.268300000000004
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/Home.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.24428876999999999,
                51.583668719999999
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ [ -0.251608,
                  51.580390000000001
                ],
                [ -0.24428876999999999,
                  51.583668719999999
                ],
                [ -0.251608,
                  51.580390000000001
                ]
              ],
            "type" : "LineString"
          },
        "properties" : { "Colour" : "#{188:x2}{122:x2}{221:x2}",
            "ImageURL" : null
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.251608,
                51.580390000000001
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/Home.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -1.4948717600000001,
                53.68926664
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      }
    ],
  "type" : "FeatureCollection"
}

Best Answer

This was answered on stackoverflow here by igorti

The reason is wrong projection. Points in your JSON file are in EPSG:4326 projection, while OpenStreetMap is in EPS:900913.

When you fetch data automatically OpenLayers obviously transforms coordinates if they are in projection different from the map.

You should transform features before adding them to map:

var features = new OpenLayers.Format.GeoJSON().read(e.responseText);
var transformedFeatures = [];
for(var i= 0; i < features.length; i++){
  transformedFeatures.push(features[i].geometry.transform(
     new OpenLayers.Projection("EPSG:4326"),
     new OpenLayers.Projection("EPSG:900913")
  ));
}
vectorLayer.addFeatures(transformedFeatures);
Related Question