3

Don't know why there is an offset: The coordinates of the points that appear on the example were gotten through google's geocoder from some Rosario, Argentina directions. I have checked the lats and lngs and they were properly matched by the geocoder. Since I know Google works with EPSG:900913 and I've done the corresponding transformation. I cannot understand why the points are not been situated correctly.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers GeoJSON Reprojected Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        #mapDiv {
        height:400px;
        width:600px;
        border: 1px solid red;
    }
    </style>


    <script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
    <script type="text/javascript">
    var lon = -60;
    var lat = -33;
    var zoom = 5;
    var map;
    var featurecollection = {   "type": "MultiPoint",
//"coordinates": [    [-33.015055,-60.655964],[-32.940781,-60.636731],[-32.917201,-60.683852] ]
"coordinates": [    [-6752191.00,-3897302.43],[-6063673.10,-3294078.10],[-6068385.20,-3291720.10] ]    
};



    function Initialize() {

        // Map
        map = new OpenLayers.Map('mapDiv', {
            controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher()],
            //projection: new OpenLayers.Projection("EPSG:3857")
            projection: new OpenLayers.Projection("EPSG:4326")
        });

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

        // GeoJSON

        /*var geojson = new OpenLayers.Format.GeoJSON({
            'internalProjection': new OpenLayers.Projection("EPSG:900913"),
            'externalProjection': new OpenLayers.Projection("EPSG:3857")
        });*/

        var geojson = new OpenLayers.Format.GeoJSON();



        var geojsonLayer = new OpenLayers.Layer.Vector("GeoJSON", {
            projection: new OpenLayers.Projection("EPSG:3857"),
            isBaseLayer: true
        });
        map.addLayer(geojsonLayer);

        geojsonLayer.addFeatures(geojson.read(featurecollection));
       // console.log(featurecollection);
        // Options
        var center_coord = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        map.setCenter(center_coord, zoom);

    }
    </script>


  </head>
  <body onload="Initialize()">OpenLayers GeoJSON-Layer as BaseLayer
    <br />
    <div id="mapDiv"></div>
</body>
</html>
6
  • can you quantify the offset that you are getting over what you are expecting?
    – nmtoken
    Commented Apr 12, 2016 at 15:48
  • EPSG:900913 and EPSG:3857 are equivalents I think, but neither are the projection that should be used for GeoJSON, which is EPSG:4326, so your problem may be to do with a reprojection error
    – nmtoken
    Commented Apr 12, 2016 at 15:56
  • Yes nmtoken, tags appear in the Atlantic Ocean about 600km from Nigeria... I'll ilustrate the problem using google's geocoder: google-developers.appspot.com/maps/documentation/utils/geocoder - This is the real location: -33.015055,-60.655964 This is approximately the location that appears on OL app: -0.263671,1.713867 Commented Apr 13, 2016 at 4:58
  • The output of the Geocoder is not GeoJSON, it's just JSON, not sure if that is somehow the root of your problem
    – nmtoken
    Commented Apr 13, 2016 at 7:47
  • The output of the geocoder is a vector of two values: lat and long... With them I've made up a GeoJSON formatted string, more specifically, a multipoint geometry I've looked at the site you mentioned and the GeoJSON string defined inside the html code is well-formatted. I would need an example of a mashup made with OL api to know where the error... I'll look around to see if I can solve it myself Commented Apr 13, 2016 at 22:17

3 Answers 3

1

The geojson layer is in EPSG:4326, not 3857.

For the center_coord, you should reproject the degree values to EPSG:900913:

new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
1

Altough I wasn't able to find a bug in the above code... I managed to work it around using another way to load GeoJSON based layers.

Another thing, the lat and longs weren't properly ordered in the example given (so that the correspond to positions on Rosario, Argentina)... Below are written correctly.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers GeoJSON Reprojected Example</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        #mapDiv {
        height:400px;
        width:600px;
        border: 1px solid red;
    }
    </style>


    <script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
    <script type="text/javascript">
    var lon = -60;
    var lat = -33;
    var zoom = 5;
    var map;



    //The content of the following variable is now saved on a file called "codigo_viejo_gisex.json"
    /*var featurecollection = { "type": "Feature",
        "geometry": {   "type": "MultiPoint",
"coordinates": [    [ -60.655964, -33.015055],[-60.636731, -32.940781],[-60.683852, -32.917201] ]   
},
"properties": {"prop0": "value0"}};*/ //There are lats and lngs corresponding to the city of Rosario, Argentina



    function Initialize() {

        // Map
        map = new OpenLayers.Map('mapDiv', {
            controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher()],
            projection: new OpenLayers.Projection("EPSG:3857")
        });

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

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


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

    }
    </script>


  </head>
  <body onload="Initialize()">OpenLayers GeoJSON-Layer as BaseLayer
    <br />
    <div id="mapDiv"></div>
</body>
</html>
0

This looks like a projection issue. Your GeoJSON is showing units in degrees longitude and latitude:

{"type":"MultiPoint",
  "coordinates":[[-33.015055,-60.655964],[-32.940781,-60.636731],[-32.917201,-60.683852]]   
};

The default GeoJSON CRS is a geographic coordinate reference system, using the WGS84 datum, and with longitude and latitude units of decimal degrees, so this appears correct.

Nowhere in your code does it make any reference to a degree based coordinate reference system. You make reference to EPSG:900913 and EPSG:3857 throughout your code (these are different references to the same projection i.e. web-mercator) and this uses meters not degrees as the unit of reference.

You mention in comment that:

-33.015055,-60.655964 (degrees long,lat) appears in your OpenLayers client at a location that is approx -0.263671,1.713867.

It appears that you are telling your client that (-33.015055,-60.655964) is a measure of meters, in other words very close to the 0,0 origin of web mercator projection:

http://epsg.io/map#srs=3857&x=0.000000&y=-0.000000&z=4

3
  • Corrected code was posted... With the center_coord corrected as AndreJ suggested now the map centers at Rosario, Argentina... But having deleted the extra-reprojections that were causing trouble... Dots don't appear where they should, that is over Rosario Commented Apr 18, 2016 at 20:40
  • nmtoken... The code doesn't works yet... try it yourself... now it centers correctly at Rosario, but the points don't appear where they should... The projection problem remains even after fixing some bugs... This code still needs some working on... The original code that was replaced by new lines has been commented so is available for everybody to inspect... Because the question hasn't been solved I cannot mark the question as solved, if I did that would be me lying Commented Apr 19, 2016 at 22:11
  • Answer has been posted... Commented Apr 29, 2016 at 14:25

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.