How to overlay GeoJSON on OSM with OpenLayers? - dictionary

Question

I am trying to create one map. I am using OSM as base layer and now I am trying to overlay my road network as GeoJSON. There is no error in my code (Checked by Firebug). I can view nice map of OSM but problem is there is not any road network on my OSM map. I do not know what I have done worng. Bellow, I have given my code.
I used following command to create GeoJSON from my console. I am using OSGeo Live (Ubuntu).
$ ogr2ogr -f "GeoJSON" roads.json roads.shp roads
JavaScript Code----
//OSM Layer-----------------------------------------------
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
//GeoJSON Layer-------------------------------------------
var vector_format = new OpenLayers.Format.GeoJSON({});
var vector_protocol = new OpenLayers.Protocol.HTTP({
url: 'ml/roads.json',
format: vector_format
});
var vector_strategies = [new OpenLayers.Strategy.Fixed()];
var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
protocol: vector_protocol,
strategies: vector_strategies
});
map.addLayer(vector_layer);
//Projection-----------------------------------------------
map.setCenter(
new OpenLayers.LonLat(18.068611, 59.329444).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 10
);
Thanks, in advance.

Answer 1

Is your GeoJSON in EPSG:900913? You should try to set the projection of the map explicitely in your map constructor.

Answer 2

First you may try to set visibility to the layer once added to the map using layer.setVisibility(true)
Second you should look using firebug if the request to ml/road.json is done and that you got data for the part of the map you're looking.
Then you may want to refresh the layer, here is what I used in a pas project :
layer.refresh({force:true});
Finally you may try putting the layers directly in the Map constructor :
//OSM Layer-----------------------------------------------
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
//GeoJSON Layer-------------------------------------------
var vector_format = new OpenLayers.Format.GeoJSON({});
var vector_protocol = new OpenLayers.Protocol.HTTP({
url: 'ml/roads.json',
format: vector_format
});
var vector_strategies = [new OpenLayers.Strategy.Fixed()];
var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
protocol: vector_protocol,
strategies: vector_strategies,
isBaseLayer: false
});
var options = {
layers: [layer, vector_layer]
};
var map = new OpenLayers.Map("Map", options);
//Projection-----------------------------------------------
map.setCenter(
new OpenLayers.LonLat(18.068611, 59.329444).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 10
);

Answer 3

I think your issue is one of projections. You could use OGRINFO to get data about the roads.shp file but probably the easiest for what it sounds like you are doing is to make OGR2OGR use the Spherical Mercator projection. You would do this by running OGR2OGR with the -t switch. This should look like
$ ogr2ogr -f "GeoJSON" roads.json roads.shp roads -t_srs EPSG:900913
Then make sure your map is using the Spherical Mercator projection
var map = new OpenLayers.Map('map',
{projection: new OpenLayers.Projection("EPSG:3857"),
sphericalMercator: true });
This is probably the easiest way to integrate everything with OSM using the same GCS, EPSG900913 and EPSG:3857 should be synonymous.