2

I am new to OpenLayers and a beginner to JavaScript, but I have tried for 3 days and nights now. My code seems okay but there is something I am missing out and just can’t figure it out.

I have this problem, I can’t find my geometric points on my map. My code goes thus:

HTML:

<!doctype html>
<head>
    <title> Me OpenStreetMap </title>
    <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
    <link rel="stylesheet" href="../assets/ol3/css/samples.css" type="text/css" />
</head>
<body>

    <div id="map"></div>
    <script src="../assets/ol3/js/ol.js"></script>

    <script>

// style for geometric layer
var meStyle = new ol.style.Circle({
  radius: 20,
  fill: new ol.style.Fill({
    color: '#ff9900',
    opacity: 1
  }),
  stroke: new ol.style.Stroke({
    color: '#ffcc00',
    opacity: 1
  })
});
// geometric layer
var geoLayer = new ol.layer.Vector({
source : new ol.source.Vector({
projection : 'EPSG:3857',
url : '../data/json.json',
format: new ol.format.GeoJSON(),
style: meStyle
})
});

        // create layer
        var osmLayer = new ol.layer.Tile({
        source : new ol.source.OSM()
        });


        // create view 
        var yaounde = new ol.proj.transform([11.5653, 3.86617], 
        'EPSG:4326', 'EPSG:3857'
        );
        var view = new ol.View({
        center: yaounde,
        zoom: 15
        });

        // create map 
        var map = new ol.Map({
        target: 'map'
        });

        map.addLayer(osmLayer, geoLayer);
        map.setView(view);
    </script>

</body>
</html>

//geojson

{"type":"FeatureCollection",

    "features":
    [
    {"type":"Feature","properties":{"Name":"","Description":""},"geometry":{"type":"Point","coordinates":[0.0,0.0]}},
    {"type":"Feature","properties":{"Name":"1","Description":""},"geometry":{"type":"Point","coordinates":[11.50728,3.87471,0.0]}},
    {"type":"Feature","properties":{"Name":"2","Description":""},"geometry":{"type":"Point","coordinates":[11.5072,3.8759,0.0]}},
    {"type":"Feature","properties":{"Name":"3","Description":""},"geometry":{"type":"Point","coordinates":[11.5032,3.87556,0.0]}},
    {"type":"Feature","properties":{"Name":"4","Description":""},"geometry":{"type":"Point","coordinates":[11.50291,3.87552,0.0]}},
    {"type":"Feature","properties":{"Name":"5","Description":""},"geometry":{"type":"Point","coordinates":[11.50278,3.87573,0.0]}},
    {"type":"Feature","properties":{"Name":"6","Description":""},"geometry":{"type":"Point","coordinates":[11.50316,3.87621,0.0]}},
    {"type":"Feature","properties":{"Name":"7","Description":""},"geometry":{"type":"Point","coordinates":[11.50347,3.87611,0.0]}},
    {"type":"Feature","properties":{"Name":"8","Description":""},"geometry":{"type":"Point","coordinates":[11.50314,3.8763,0.0]}},
    {"type":"Feature","properties":{"Name":"9","Description":""},"geometry":{"type":"Point","coordinates":[11.50325,3.87652,0.0]}},
    {"type":"Feature","properties":{"Name":"10","Description":""},"geometry":{"type":"Point","coordinates":[11.50356,3.87558,0.0]}},
    {"type":"Feature","properties":{"Name":"11","Description":""},"geometry":{"type":"Point","coordinates":[11.5033,3.87564,0.0]}},
    {"type":"Feature","properties":{"Name":"12","Description":""},"geometry":{"type":"Point","coordinates":[11.50397,3.87586,0.0]}},
    {"type":"Feature","properties":{"Name":"13","Description":""},"geometry":{"type":"Point","coordinates":[11.50299,3.87641,0.0]}},
    {"type":"Feature","properties":{"Name":"14","Description":""},"geometry":{"type":"Point","coordinates":[11.50279,3.8771,0.0]}},
    {"type":"Feature","properties":{"Name":"15","Description":""},"geometry":{"type":"Point","coordinates":[11.50269,3.87723,0.0]}},
    {"type":"Feature","properties":{"Name":"16","Description":""},"geometry":{"type":"Point","coordinates":[11.50258,3.87722,0.0]}},
    {"type":"Feature","properties":{"Name":"17","Description":""},"geometry":{"type":"Point","coordinates":[11.49122,3.8738,0.0]}},
    {"type":"Feature","properties":{"Name":"18","Description":""},"geometry":{"type":"Point","coordinates":[11.48567,3.87447,0.0]}},
    {"type":"Feature","properties":{"Name":"19","Description":""},"geometry":{"type":"Point","coordinates":[11.48548,3.88107,0.0]}},
    {"type":"Feature","properties":{"Name":"20","Description":""},"geometry":{"type":"Point","coordinates":[11.48526,3.8812,0.0]}},
    {"type":"Feature","properties":{"Name":"21","Description":""},"geometry":{"type":"Point","coordinates":[11.48614,3.88044,0.0]}},
    {"type":"Feature","properties":{"Name":"22","Description":""},"geometry":{"type":"Point","coordinates":[11.48638,3.88033,0.0]}},
    {"type":"Feature","properties":{"Name":"23","Description":""},"geometry":{"type":"Point","coordinates":[11.48641,3.88053,0.0]}},
    {"type":"Feature","properties":{"Name":"24","Description":""},"geometry":{"type":"Point","coordinates":[11.4868,3.88029,0.0]}},
    {"type":"Feature","properties":{"Name":"25","Description":""},"geometry":{"type":"Point","coordinates":[11.48772,3.87994,0.0]}},
    {"type":"Feature","properties":{"Name":"26","Description":""},"geometry":{"type":"Point","coordinates":[11.4887,3.88057,0.0]}},
    {"type":"Feature","properties":{"Name":"27","Description":""},"geometry":{"type":"Point","coordinates":[11.48869,3.88057,0.0]}},
    {"type":"Feature","properties":{"Name":"28","Description":""},"geometry":{"type":"Point","coordinates":[11.48868,3.8807,0.0]}},
    {"type":"Feature","properties":{"Name":"29","Description":""},"geometry":{"type":"Point","coordinates":[11.4888,3.88071,0.0]}},
    {"type":"Feature","properties":{"Name":"30","Description":""},"geometry":{"type":"Point","coordinates":[11.49206,3.8775,0.0]}},
    {"type":"Feature","properties":{"Name":"31","Description":""},"geometry":{"type":"Point","coordinates":[11.49251,3.87748,0.0]}},
    {"type":"Feature","properties":{"Name":"32","Description":""},"geometry":{"type":"Point","coordinates":[11.4923,3.87783,0.0]}},
    {"type":"Feature","properties":{"Name":"33","Description":""},"geometry":{"type":"Point","coordinates":[11.49273,3.87822,0.0]}}
    ]
}

The OpenStreetMap appears, but I can’t find the points.

  • Your points seem to be in EPSG:4326 whereas your layer is in 3857. – drunkenwagoner Jul 1 '15 at 0:18
  • I forgot that. I have just changed the geometric layer projection to 'EPSG:4326', but still no change. – vncho Jul 1 '15 at 0:24
  • Your layer should be in 3857 to match the base layer. However, your point data also needs to be transformed to 3857. You should be able to do this using the JSON reader - if it's like OL2, you can set inner and outer projections that transform the data projections on-the-fly during the read process. Unfortunately, I'm not familiar enough with OL 3 to offer more precise directions. – drunkenwagoner Jul 1 '15 at 0:38
  • I do not know how to change that on the json file. I did export this json file from qgis but removed the line "crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}}, and the script still worked so I used it without this line. Well I did not understand it, reason why I omitted it – vncho Jul 1 '15 at 1:00
  • This is cross posted and answered here. – Jonatas Walker Jul 1 '15 at 9:55
1

As you load your points from an external JSON file, you can define your layer this way:

var geolayer = new ol.layer.Vector({
      source: new ol.source.Vector({
         url: '../data/json.json',
         format: new ol.format.GeoJSON()
      })
  });

Make sure you're using OL3 >= v3.5.0. Since then, projection parameter is no longer needed in the source definition. See https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350

  • I am using v3.6.0, I just omitted the projection definition for the geoLayer and reduced the opacity of osmLayer to 0.5 in case it was shading, but to no avail. Thanks though – vncho Jul 1 '15 at 1:45

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.