Loading source vector (Features won't show?)

Question

I have a function that loads a vector source from a local geojson file.

Problem is, I need it to be remote for one of the layers, yet the features never show despite loading the source properly and the console.logs showing me it did indeed fetch them...plus a weird thing happens if I omit the line: "this.layerSwitcherGroup.getLayers().push(this.pointsLayer);" from the code. When that line is commented, the loader never runs (no console.logs appear from inside it).

Note: I am editing the crs only temporarily until the file in the server has the crs updated to a non-legacy one. I did the same when I tested the geojson file from the server with local function by downloading it and editing the crs part. Local function worked, but remote doesn't.

addPoints: function() {
    this.addPointInteraction();

    this.pointsLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            /**
             * The function is responsible for loading the features and adding them to the source.
             * ol.source.Vector sources use a function of this type to load features.
             * @param extent - the area to be loaded
             * @param resolution - the resolution (map units per pixel)
             * @param projection - ol.proj.Projection for the projection as arguments
             *
             *  this (keyword): within the function is bound to the ol.source.Vector it's called from.
             */
            loader: function(extent, resolution, projection) {
                console.log('vector Loader...');

                var url = //can't show the url here;
                $.ajax({
                    url: url,
                    context: this,
                    success: function(json) {
                        console.log('Data: ', json);

                        json.data.crs = {
                            "type": "name",
                            "properties": {
                                "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
                            }
                        };

                        console.log('changed CRS: ', json);

                        var features = new ol.format.GeoJSON().readFeatures(json.data);

                        console.log('this inside loader: ', this);

                        this.addFeatures(features);
                    }
                });
            }
        }),
        style: this.defaultPointStyleFunction
    });

    this.layerSwitcherGroup.getLayers().push(this.pointsLayer);

    this.pointsLayer.getSource().once("change", function(evt) {
        console.log('pointsLayer once');
        //console.log('pointsLayer changed: ', this.pointsLayer);
        //console.log('pointsLayer source: ', this.pointsLayer.getSource());
        console.log('pointsLayer features: ', this.pointsLayer.getSource().getFeatures());
        //console.log('current layerSwitcherGroup layers: ', this.layerSwitcherGroup.getLayers());

        this.hidePoints();
        this.onSetSelection(1);
    }, this);

    this.currPointId = null;
},

Every function that is listed above works with local mode, so I'm not quite sure what am I doing wrong with the remote loader...

The output shows that the vector is added correctly, can't exactly show it easily since I'd have to hide a lot of confidential information from it. :/ I did discover that the points *are* showing...in the wrong place, so it's a projection error somewhere. — Ada, Mar 30 '16 at 14:48

score 3 · Accepted Answer · edited May 23 '17 at 10:29

So all I was missing was adding {featureProjection: 'EPSG:3857'} to readFeatures so that the features would be projected in the map view correctly... (since that is the map projection)

Fixed it by replacing

var features = new ol.format.GeoJSON().readFeatures(json.data);

With

var features = format.readFeatures(json.data, {featureProjection: 'EPSG:3857'});

Found it through https://stackoverflow.com/a/32455939/2340999 and the features are showing in the proper positions now!

Thank you for all the suggestions!

score 0 · Answer 2 · answered Mar 25 '16 at 17:17

0

Change this

var features = new ol.format.GeoJSON().readFeatures(json.data);

to this

var features = (new ol.format.GeoJSON()).readFeatures(json.data);

answered Mar 25 '16 at 17:17

Alvin Lindstam

3,094
16
28

That didn't do anything :/ – Ada Mar 25 '16 at 23:17

score 0 · Answer 3 · answered Mar 30 '16 at 14:32

0

I have done this using the example available here: http://openlayersbook.github.io/ch11-creating-web-map-apps/example-03.html

Not sure if that helps.

answered Mar 30 '16 at 14:32

MoreScratch

2,933
6
34
65

Hm, my features are in a geojson file though. In the end doing what you linked would be basically creating the features again that already exist in the file. The only problem with my approach is that the points are not being properly projected and appear in the ocean near africa :/ I'm trying to debug both the local and remote loading of geojson files functions I have to find a possible lapse in the remote, but so far nothing. – Ada Mar 30 '16 at 16:57

Loading source vector (Features won't show?)

3 Answers3

Related