3

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"
}

1 Answer 1

2

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);

Your Answer

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

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