I'm trying to have a zoom to extents of WFS layer. I'm using this code:

var map = new ol.Map({
  controls: ol.control.defaults().extend([
    new ol.control.FullScreen({className: 'ol-full-screen', tipLabel: 'Toggle full-screen'}),
    new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')}),
  target: 'map',

var view = new ol.View({
  center: ol.proj.fromLonLat([9.25040, 45.54318]),
  zoom: 12,

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()

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

var treeLayer = new ol.layer.Vector({
  source: treeSource,
  style: customStyle,

var featureRequest = new ol.format.WFS().writeGetFeature({
  srsName: 'EPSG:4326',
  featurePrefix: 'workspacename',
  featureTypes: ['trees'],
  outputFormat: 'application/json',

fetch('http://localhost:8080/geoserver/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest)
  }).then(function(response) {
    return response.json();
  }).then(function(json) {
    var features = new ol.format.GeoJSON().readFeatures(json);

What I see is a zooming on the extent of the WFS but the features are out of scale because I see 50mm on scale bar. I exclude that the problem is on the features because I can use this features using WMS service withouth problems. Another strange thing is that for a few second I can see the background map from OSM and after this I see only the WFS and the map is putted on 0,0.

I've used almost the same code of the official example.

If I use this code for the same layer, but using WMS service, I've no problems:

var wmsTreesSource = new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/workspacename/wms',
  params: {
    'LAYERS': 'trees',
    'TILED': true,
var wmsTrees = new ol.layer.Tile({
  title: 'Trees',
  source: wmsTreesSource,
  visible: true,

You are requesting the feature in EPSG:4326 but your view is EPSG:3857, so you are zooming to somewhere within 180 meters of [0, 0]

If the server does not support EPSG:3857 requests you will need

 var features = new ol.format.GeoJSON().readFeatures(json, {dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection()});
| improve this answer | |

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.