OL3 WFS

by Thomas B.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<div id="map" class="map"></div>

CSS

html, body {
    height: 400px;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    }
.map {
	height: 100%;
	width: 100%;
    }

JavaScript

sourceVector = new ol.source.Vector({
	loader: function(extent) {
		$.ajax('http://demo.opengeo.org/geoserver/wfs',{
			type: 'GET',
			data: {
				service: 'WFS',
				version: '1.1.0',
				request: 'GetFeature',
				typename: 'water_areas',
				srsname: 'EPSG:3857',
				bbox: extent.join(',') + ',EPSG:3857'
				},
			}).done(loadFeatures);
		},
		strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({
			maxZoom: 19
			})),
	});

window.loadFeatures = function(response) {
    formatWFS = new ol.format.WFS(),
    sourceVector.addFeatures(formatWFS.readFeatures(response));
    };

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

map = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layerVector],
    target: document.getElementById('map'),
    view: new ol.View({
        center: [-8908887.277395891, 5381918.072437216],
        maxZoom: 19,
        zoom: 12
        })
    });