1

I've been trying to load 2 WFS layers with the 3857 projection and I'm only able to load one of them, a line vector layer, while the other (point vector) doesn't load at all.

Later I'm going to want to edit both layers in the web app but for now I'm just trying to get them both to load

The code I'm using to load them is:

var geojsonFormat = new ol.format.GeoJSON();

var vectorSource = new ol.source.Vector({
loader: function(extent, resolution, projection) {
  var url1 =    'http://localhost:8080/geoserver/wfs?service=WFS&' +
    'version=1.1.0&request=GetFeature&typename=BFTchambers:bft2&' +
    'outputFormat=text/javascript&format_options=callback:loadFeatures' +
    '&bbox=' + extent.join(',');
$.ajax({url: url1, dataType: 'jsonp', jsonp: false})
    .done(function(response) {
        formatWFS = new ol.format.WFS(),
        sourceVector.addFeatures(formatWFS.readFeatures(response))
        });
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 20
})),
});

var vectorSource2 = new ol.source.Vector({
loader: function(extent, resolution, projection) {
  var url2 =    'http://localhost:8080/geoserver/wfs?service=WFS&' +
    'version=1.1.0&request=GetFeature&typename=BFTchambers:chamber&' +
    'outputFormat=text/javascript&format_options=callback:loadFeatures' +
    '&bbox=' + extent.join(',');
$.ajax({url: url2, dataType: 'jsonp', jsonp: false})
    .done(function(response) {
        pointWFS = new ol.format.WFS(),
        sourceVector2.addFeatures(pointWFS.readFeatures(response))
        });
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 20
})),
});


/**
 * JSONP WFS callback function.
 * @param {Object} response The response object.
*/
window.loadFeatures = function(response) {
console.log("some stuff loaded");
vectorSource.addFeatures(geojsonFormat.readFeatures(response));
vectorSource2.addFeatures(geojsonFormat.readFeatures(response));
};

selectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});

var layerVector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
  color: 'rgba(0, 0, 255, 1.0)',
  width: 5
  })
})
})
});

var layerVector2 = new ol.layer.Vector({
source: vectorSource2,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
  color: 'rgba(0, 0, 255, 1.0)',
  width: 2
})
})
});

var raster = new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Road',
key: 'AsBPC3VYKwiu_XhkUWVqfNQGC6upeSXaFwwVyN9SdMEu8znuAtNkymIX9xzRTfs6'
})
});

var map = new ol.Map({
layers: [raster, layerVector, layerVector2],
target: document.getElementById('map'),
view: new ol.View({
center: [-12000,6711790],   
zoom: 12
})
});

Only the layerVector loads, not the layerVector2. How to fix the code?

Entire fiddle here https://jsfiddle.net/Luffydude/2c5o284v/

  • 1
    Hi there, I think you should make 2 different window.loadFeatures one for the linestrings and the other for the points – Hicham Zouarhi Jun 10 '16 at 13:26
  • Hey Hicham man! I've managed to fix my code :) – Luffydude Jun 13 '16 at 10:40
  • Hey Luffydude Sorry I couldn't read your comment in time, good thing that you managed to solve it, could you please post it as an answer so that it may help others who got the same problem. Cheers – Hicham Zouarhi Jun 13 '16 at 11:10
  • The code posted below by pavlos worked, but I just needed to add a few codes of style – Luffydude Jun 13 '16 at 11:30
4

Your code is a bit complicated concering your callback:loadFeatures function. Within the function you add features for both requests to both sources. Try to distinguis them using two separate functions and see if this is your case.

var geojsonFormat = new ol.format.GeoJSON();

var vectorSource = new ol.source.Vector({
loader: function(extent, resolution, projection) {
  var url1 =    'http://localhost:8080/geoserver/wfs?service=WFS&' +
    'version=1.1.0&request=GetFeature&typename=BFTchambers:bft2&' +
    'outputFormat=text/javascript&format_options=callback:loadFeatures1' +
    '&bbox=' + extent.join(',');
    $.ajax({
      url: url1,
      dataType: 'jsonp',
      jsonp: false
    });
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 20
})),
});

var vectorSource2 = new ol.source.Vector({
loader: function(extent, resolution, projection) {
  var url2 =    'http://localhost:8080/geoserver/wfs?service=WFS&' +
    'version=1.1.0&request=GetFeature&typename=BFTchambers:chamber&' +
    'outputFormat=text/javascript&format_options=callback:loadFeatures2' +
    '&bbox=' + extent.join(',');
$.ajax({
      url: url2,
      dataType: 'jsonp',
      jsonp: false
    });
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 20
})),
});


/**
 * JSONP WFS callback function.
 * @param {Object} response The response object.
*/
window.loadFeatures1 = function(response) {
console.log("some stuff loaded 1st case");
vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};

window.loadFeatures2 = function(response) {
console.log("some stuff loaded 2nd case");
vectorSource2.addFeatures(geojsonFormat.readFeatures(response));
};

Also I am a bit confused why do you use ajax call as long as you provide callback function within the url. You may try to remove the callback functions from your urls or remove the ajax calls (from within the loader functions) and just use the callback functions distingusing them as I suggested on my code snip.

Also have a glance to this question and a working fiddle

  • Your code returns type error geoJsonformat.readfeatures1 not a function – Luffydude Jun 10 '16 at 13:40
  • 1
    sory that was a typo just remove the 1. Edited my answer – pavlos Jun 10 '16 at 13:45
  • Yea figured as much. there are no errors now but the points are still not showing up – Luffydude Jun 10 '16 at 13:51
  • Ok few more edits on my original answer. Can you try it? – pavlos Jun 10 '16 at 13:57
  • Still doesn't load it. But your new version removed the formatWFS which I think I need for the editing function – Luffydude Jun 10 '16 at 14:26

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.