Example of using WFS with a BBOX strategy.

This example loads new features from GeoServer WFS when the view extent changes.

<!DOCTYPE html>
    <link rel="stylesheet" href="" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src=",Element.prototype.classList,URL"></script>

    <div id="map" class="map"></div>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import GeoJSON from 'ol/format/GeoJSON.js';
      import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
      import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
      import BingMaps from 'ol/source/BingMaps.js';
      import VectorSource from 'ol/source/Vector.js';
      import {Stroke, Style} from 'ol/style.js';

      var vectorSource = new VectorSource({
        format: new GeoJSON(),
        url: function(extent) {
          return '' +
              'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
              'outputFormat=application/json&srsname=EPSG:3857&' +
              'bbox=' + extent.join(',') + ',EPSG:3857';
        strategy: bboxStrategy

      var vector = new VectorLayer({
        source: vectorSource,
        style: new Style({
          stroke: new Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2

      var raster = new TileLayer({
        source: new BingMaps({
          imagerySet: 'Aerial',
          key: 'Your Bing Maps Key from here'

      var map = new Map({
        layers: [raster, vector],
        target: document.getElementById('map'),
        view: new View({
          center: [-8908887.277395891, 5381918.072437216],
          maxZoom: 19,
          zoom: 12