title: openlayers3 load vector data in WFS format, but not displaying it
body: <p>I can see, that WFS data is loading by monitoring cache/network tab in FF/Chrom(ium), but no featured vectors are being displayed on the map.
  I've even tried to disable the OSM layer beneath, so, that I can only see the vector layer, but nothing is visible.
  When dragging the map area zooming in/out, I see, that new data is being loaded, but nothing appears on the map.
  What did I do wrong?
  Openlayers Version: v3.19.1</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="ru"&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta name="viewport" content="width=device-width"&gt;
  
   &lt;title&gt;The Book of OpenLayers3 - Code samples&lt;/title&gt;
   &lt;link rel="stylesheet" href="progr/nm/ol.css" type="text/css"&gt;
   &lt;script src="progr/nm/jquery-3.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script src="progr/nm/ol.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;style type="text/css"&gt;
  .map {
   width: calc(100% - 9px);
   height: 500px;
   box-shadow: 4px 4px 20px black;
   border: 3px solid blue;
   float: left;
  }
  .tree {
   width: auto;
   border: 3px solid red;
   background: yellow;
   float: left;
  }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;dev id='mapAjax' class='map col-sm-6'&gt;&lt;/dev&gt;
  
  &lt;script&gt;
  var layerSrc = {
   srvVec: new ol.source.Vector({
    loader: function(extent, resolution, projection){
     $.ajax(
      'http://demo.opengeo.org/geoserver/wfs?service=WFS&amp;request=GetFeature&amp;version=1.1.0&amp;typename=osm:water_areas&amp;srsname=EPSG:3857&amp;bbox='+extent.join(',')
     ).then(function(response){
      var format = new ol.format.WFS({
       featureNS: 'http://openstreetmap.org',
       featureType: 'water_areas'
      });
      layerSrc['srvVec'].addFeatures(format.readFeatures(
       response,
       {featureProjection: 'EPSG:3857'}
      ));
     });
    },
    strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({maxZoom: 19}))
  //  strategy: ol.loadingstrategy.bbox
   })
  };
  
  var layers = {
   OSM: new ol.layer.Tile({source: new ol.source.OSM()}),
   vec: new ol.layer.Vector({
    source: layerSrc['srvVec'],
    style: new ol.style.Style({
     stroke: new ol.style.Stroke({
      color: 'green',
      width: 2
     })
    })
   })
  };
  
  var view = new ol.View({
   center: ol.proj.transform([-75.923853, 45.428736], 'EPSG:4326', 'EPSG:3857'),
   maxZoom: 19,
   zoom: 11
  });
  
  var maps = {
   mapAjax: new ol.Map({
    target: 'mapAjax',
    renderer: 'canvas',
  //  layers: [layers['OSM'], layers['vec']],
    layers: [layers['vec']],
    view: view
   })
  };
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>P.S.:</h2>
  
  <p>Updated openlayers to version v3.20.1 - didn't help.
  Examples from:
  <a href="http://openlayers.org/en/latest/examples/vector-wfs-getfeature.html" rel="nofollow noreferrer">http://openlayers.org/en/latest/examples/vector-wfs-getfeature.html</a>
  and:
  <a href="http://openlayers.org/en/latest/examples/vector-wfs.html" rel="nofollow noreferrer">http://openlayers.org/en/latest/examples/vector-wfs.html</a>
  didn't clarify, either.</p>