GeoJSON and OSM layers with different projection

Question

I have a GeoJSON from NaturalEarth for world state boundaries and I want to display it with only without backgroung. But also, I want to add a OSM layer as another baselayer option.

The code I am using is the following one, but when I check it, as OSM is in another projection, the center map does not work. However if I change the projection of "mapDiv" the one that does not work is the vector layer with the GeoJSON information.

    <script type="text/javascript">
    var lon = 5;
    var lat = 40;
    var zoom = 5;
    var map;

    function Initialize(){
        // Map
     map = new OpenLayers.Map('mapDiv', {
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher()]
            } );

        // OSM          
        var osmLayer = new OpenLayers.Layer.OSM("OSM");
        map.addLayer(osmLayer);

        // GeoJSON
        var geojsonLayer = new OpenLayers.Layer.Vector("GeoJSON", {
            isBaseLayer: true,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "world_0.json",
                format: new OpenLayers.Format.GeoJSON()
            })
        });
        map.addLayer(geojsonLayer);

        // Options
        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    }

</script>

I have try something similar to this example, but I continue having problems when switching between the layers.

The GeoJSON has been created with SHP files from NaturalEarth with ogr2ogr command.

The problem is similar to this one. But the solution does not work on this case — iblasi, Jun 25 '15 at 18:13
I found that a solution is to define the SRS during the conversion with ogr2ogr using following command: ogr2ogr -f GeoJSON -s_srs EPSG:4326 -t_srs EPSG:900913 xxxx.json yyyy.shp. However, it will be great it someone could solve the problem without requiring the SRS change. — iblasi, Jun 25 '15 at 18:26
Try replacing format: new OpenLayers.Format.GeoJSON() by format: new OpenLayers.Format.GeoJSON({ 'internalProjection': new OpenLayers.Projection("EPSG:900913"), 'externalProjection': new OpenLayers.Projection("EPSG:4326") }); — Germán Carrillo, Jun 25 '15 at 19:31

score 1 · Accepted Answer · answered Jun 26 '15 at 09:42

1

Transform your center point, use the internal and external Projection as cgarillo mentioned and then also define the Projection of your vectorLayer and your map:

var center_coord = new OpenLayers.LonLat(lon, lat).transform("EPSG:4326", "EPSG:3857");
    map.setCenter(center_coord, zoom);

...

 var geojsonLayer = new OpenLayers.Layer.Vector("GeoJSON", {
        projection: new OpenLayers.Projection("EPSG:3857"),
....

http://jsfiddle.net/expedio/jbwx0au9/

(slightly different method to get the features here, but still the same things to do...)

answered Jun 26 '15 at 09:42

Thomas B

8,807
1
21
62

That's correct @Thomas B. I transformed previously the center, but projection attribute of Vector Layer is the key. Can you explain why? I mean, why EPSG:3857 and EPSG:900913 are equivalent projections? And how could I know previously OSM projection for future problems? – iblasi Jun 26 '15 at 15:09
900913 is the unofficial Code for Google Sherical Mercator and 3857 the official one ;) http://docs.openlayers.org/library/spherical_mercator.html – Thomas B Jun 29 '15 at 18:52

GeoJSON and OSM layers with different projection

1 Answers1