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', {
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher()]
            } );

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

        // 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()

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


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
  • @gcarrillo your solution does not seem to work. – iblasi Jun 26 '15 at 6:24

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"),


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

| improve this answer | |
  • 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 ;) docs.openlayers.org/library/spherical_mercator.html – Thomas B Jun 29 '15 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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