I am brand new to openLayers, got several Examples from the site working OK but now I am stuck when trying to switch from static file source to server (database) source. I am using ver 4.0.1

My server output is GeoJSON. I ran it through geojsonlint.com and it conforms. If I write the server response to console.log and copy (or view the server response in F12 Dev Tools and copy) and paste that into a file, it loads and displays just fine when my OL source url points to the file. But when I load the exact same data directly from the server into my map, it seems to load fine but nothing displays. I have tried changing the projections of source and features, to no avail.

I am limiting output to 100 features. They are polygons. I can query and see I have 100 features loaded into the layer. I can query and see that I have all the layers on the map. But only the OSM layer (base) displays when loading server data. What gives?

Here is what my raw data looks like (partial):

 {"d":
"{\"type\": \"FeatureCollection\", \"crs\": { \"type\": \"name\", \"properties\": { \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\" }},
\"features\": [
{\"type\": \"Feature\", \"properties\":{\"name\":\"60.0505\"},\"geometry\": {\"type\": \"Polygon\",\"coordinates\": [[[-88.760199636185646,41.285820006929207],[-88.760155747029913,41.285834529557967],[-88.760152680477418,41.285835096224112],[-88.760178957327653,41.285886280555211],[-88.760182023882308,41.285885713888376],[-88.760220822924964,41.285872516818131],[-88.760199636185646,41.285820006929207]]]}}
,{\"type\": \"Feature\", \"properties\":{\"name\":\"189.944\"},\"geometry\": {\"type\": \"Polygon\",\"coordinates\": [[[-88.760152680469886,41.285835096224751],[-88.760116576863126,41.285836767179227],[-88.760087235203429,41.2858348902221],[-88.760090859431287,41.285889709953722],[-88.760131737533243,41.285890450563663],[-88.760178957320036,41.2858862805557],[-88.760152680469886,41.285835096224751]]]}}
,{\"type\": \"Feature\", \"properties\":{\"name\":\"176.599\"},\"geometry\": {\"type\": \"Polygon\",\"coordinates\": [[[-88.7600872352026,41.285834890222162],[-88.760014241893046,41.285834799248633],[-88.760012428996035,41.285834367185579],[-88.7600119545558,41.285889253871225],[-88.760016018391411,41.285889670752233],[-88.760090859430449,41.285889709953778],[-88.7600872352026,41.285834890222162]]]}}.... etc

The geoJSON is wrapped in a JSON element d at the server, so you get it with serverResponse.d. I know I don't need the properties for the FeatureCollection because they are default, but I am trying to copy the geojson/polygon-samples.geojson example as closely as possible. Here's the javascript:

$(document).ready(function () {

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

        var dataLayer = new ol.layer.Vector({
            source: dataLayerSourceEmpty
        });//for some reason I had to start with empty source and add data later for the loader to work

        var dataLayerSourceEmpty = new ol.source.Vector();

        var dataLayerSource = new ol.source.Vector({

            format: new ol.format.GeoJSON({
                projection: 'ESPG:3857'
            }),
            loader: function (extent, resolution, projection) {
                var url = dataSVC;  //it is a WCF service call to server
                var format = new ol.format.GeoJSON();
                format.ignoreExtraDims = true;
                var source = this;

                $.ajax({
                    method: 'POST',
                    url: url,
                    data: JSON.stringify(payload),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    processData: false,
                    timeout: 0,
                    success: function (data, statusString, jqXHR) {
                        console.dir(data.d); //show the geoJSON looking fine
                        try {
                            var features = format.readFeatures(JSON.parse(data.d), {
                                featureProjection: 'ESPG:3857'
                            });
                            source.addFeatures(features);               
                            console.log('loaded features');
                            source.changed();
                            var featureCount = dataLayer.getSource().getFeatures().length;
                            console.log('loaded ' + featureCount + ' features'); //says I got 100 features
                        } catch (err) {
                            alert(err);
                            return;
                        }
                    },
                    error: function (xhr, txtStatus, err) {
                        console.log("jqxhr error: " + err + "; status " + txtStatus + "; xhr= " + JSON.stringify(xhr));
                    }
                });
            },
            strategy: ol.loadingstrategy.all
        });

var map = new ol.Map({
            target: 'map',
            layers: [osmLayer, dataLayer],
            view: new ol.View({
                center: ol.proj.fromLonLat([-88.760199636185646, 41.285820006929207])
                , zoom: 15
            })
        });

setTimeout(function () {

            dataLayer.setSource(dataLayerSource);
        }, 1000);
});

My map is only displaying the osmLayer and not the dataLayer. I hate to say I have been hacking at this for 2+ days and can't find any useful hints at all. I tried just loading the data into a local object and then setting source to object: myGeoJSONobject, with no luck. Please help give me a clue.

Answer for my own question. I was researching rendering and webgl when I came across a line of code that fixed my problem:

var features = format.readFeatures(JSON.parse(data.d), {
      featureProjection: **map.getView().getProjection()**
});

all that business about 'ESPG:3857' was for naught

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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