1

I tried to insert a map in my page with a WFS request and using OpenLayers tools. I followed the same example here: http://openlayers.org/en/v3.6.0/examples/vector-wfs.html with the vector part but I get just a white page with no errors: OpenLayers map

This is my code :

<HTML>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>
</head>
<body>
<center>
<div id="mapid" style="width: 600px; height: 500px;"></div>
</center> 
<script>
var geojsonFormat = new ol.format.GeoJSON();
var vectorSource = new ol.source.Vector({
  loader: function(extent, resolution, projection) {
    var url = 'http://localhost:8080/geoserver/opengeo/ows?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=opengeo:comgeo&' +
        'outputFormat=text/javascript&format_options=callback:loadFeatures'+
        '&srsname=EPSG:4326&bbox=' + extent.join(',') + ',EPSG:4326';

    // use jsonp: false to prevent jQuery from adding the "callback"
    // parameter to the URL
    $.ajax({url: url, dataType: 'jsonp', jsonp: false});
  },
  strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
    maxZoom: 19
  }))
});

/**
 * JSONP WFS callback function.
 * @param {Object} response The response object.
 */
window.loadFeatures = function(response) {
  vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};

var map = new ol.Map({
  layers: [
  new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
})
  ],
  target: document.getElementById('mapid'),
  view: new ol.View({
    center: [-9, 30],
    maxZoom: 19,
    zoom: 5
  })
});
</script>
</body>
</HTML>

and this is my WFS request URL: http://localhost:8080/geoserver/opengeo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=opengeo:comgeo&maxFeatures=50&outputFormat=application%2Fjson

  • 3
    that's not blank - that small black dot is your data. So probably a projection issue, try transforming it to epsg:3857 from 4326 – Ian Turton May 22 '17 at 13:52
  • @iant yeah it's work thank you so much.. but theire is a anotherway to work in epsg:4326 ? – Mohamed Reda Aguezzoul May 22 '17 at 14:38
  • change the projection of your map to 4326 – Ian Turton May 22 '17 at 14:45
  • my map is Already in epsg:4326 – Mohamed Reda Aguezzoul May 22 '17 at 16:20
  • 1
    I see no evidence of that in your code! – Ian Turton May 22 '17 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.