I'm having trouble rendering my WFS features in projection EPSG:4326, the below code works when I switch projection to EPSG:3857 (and change the center), it works fine. I've checked the response from the server and its coming back as EPSG:4326 format. The projection in my Geoserver for this layer is EPSG:4326. Am I missing a setting somewhere in the openlayer code?

import WFS from 'ol/format/WFS';
import GML from 'ol/format/GML';
import Tile from 'ol/layer/Tile';
import Vector from 'ol/layer/Vector';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import Select from 'ol/interaction/Select';
import DragPan from 'ol/interaction/DragPan';
import Modify from 'ol/interaction/Modify';
import {Draw} from 'ol/interaction';
import VectorSource from 'ol/source/Vector';

import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
import {click, pointerMove, altKeyOnly} from 'ol/events/condition.js';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Snap from 'ol/interaction/Snap';
import {Map, View, Feature} from 'ol';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';

var formatWFS = new WFS( {

var formatGML = new GML({
    featureNS: 'http://wamp-dev/us',
    featureType: 'crop_other',
    srsName: 'EPSG:4326'

var xs = new XMLSerializer();

var sourceWFS = new VectorSource({
    loader: function (extent) {
        $.ajax('', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'US:crop_other',
                srsname: 'EPSG:4326',
                bbox: extent.join(',') + ',EPSG:4326'
        }).done(function (response) {
                {dataProjection: 'EPSG:4326', featureProjection:EPSG:4326'})
    strategy: bboxStrategy

var layerWFS = new Vector({
    source: sourceWFS

var interaction;

var interactionSelectPointerMove = new Select({
    condition: pointerMove

var interactionSelect = new Select({
    style: new Style({
        stroke: new Stroke({
            color: '#FF2828'

var interactionSnap = new Snap({
    source: layerWFS.getSource()

var map = new Map({
    target: 'map',
    controls: [],
    interactions: [
        new MouseWheelZoom(),
        new DragPan()
    layers: [
        new Tile({
            source: new OSM({
                url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
                opaque: false,
                attributions: []
    view: new View({
        projection: 'EPSG:4326',
        center: [-119.934411,36.627444],
        //center: [-13350873.59,4401244.07],
        zoom: 15

2 Answers 2


When using a vectorSource, OL will transform from Data Projection (4326 by default) to View Projection (3857 by default). When providing a list of features (ex, from WFS/GeoJSON parser), one must set the data and feature projection explicitly.




    {dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:4326'});
  • Thank you, I thought this would work but didn't, I've updated the code block in my question to reflect this.
    – user127096
    Sep 27, 2018 at 0:32

Found the problem. In the WFS request I'm setting the property of the srs to 'srsname' not 'srs'. After changing that it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.