1

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.

4
  • The problem is similar to this one. But the solution does not work on this case
    – iblasi
    Jun 25, 2015 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, 2015 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") }); Jun 25, 2015 at 19:31
  • @gcarrillo your solution does not seem to work.
    – iblasi
    Jun 26, 2015 at 6:24

1 Answer 1

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

2
  • 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, 2015 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, 2015 at 18:52

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.