1

I want to display point data from PostGis to my Django application. I created WFS service from GeoServer and want to display using OpenLayers. I went through many posts but none of them worked My code is myproject/myapp/templates/map.html

<html>
<head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
    <style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;     
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:503px;
    width:240px;
    float:left;
    padding:5px;          
}
section {
    width:579px;
    float:left;
    padding:10px;   
    height:494px;
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;         
}
</style>
</head>
    <body onload="init()">
    <header>
    <h2>Plant Functional Types</h2>
    </header>
<nav>
<button type="button" onclick="go()">Actual plant functional type</button> 
<button type="button" >Potential plant functional type</button>
<button type="button" > Plant functional types likely to change</button>
<button type="button" > Upload species data</button>
</nav>

<div id="map" class="map" style="width:1080px; height:512px;float:right;" ></div>

<script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

       var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent, resolution, projection) {
          return 'http://localhost:8080/geoserver/PFT/ows?service=WFS&' +
              'version=1.0.0&request=GetFeature&typename=PFT:PFT_pft_pft&' +
              'maxFeatures=50&'+
              'outputFormat=application%2Fjson' +
              'bbox=' + extent.join(',') + ',EPSG:3857';
        },

      });
    </script>
 </body>
</html>

when I run localhost:8080/pft only map gets dispalyed. Features are not displayed. Please help!

geoserver log shows this

2016-01-06 17:03:02,960 INFO [wfs.json] - about to encode JSON 
2016-01-06 17:03:02,964 INFO [geoserver.wfs] - Request: getServiceInfo    
2016-01-06 17:03:02,966 INFO [geoserver.wfs] - Request: getFeature service = WFS version = 1.1.0 baseUrl = localhost:8080/geoserver query[0]: typeName[0] = {PFT}pft_pft maxFeatures = 50 outputFormat = application/json resultType = results
  • what is in the geoserver log? what shows up in the response from GeoServer? what exactly is sent to GeoServer? – Ian Turton Jan 6 '16 at 13:15
1

You are not adding vectorSource to the map. Are you?

Review the OL3 WFS example. Change the url to use your server http://localhost:8080/geoserver/wfs and your layer PFT:PFT_pft_pft.

It should look like:

    var vectorSource = new ol.layer.Vector({
        source:  new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function (extent) {
                return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
                        'version=1.1.0&request=GetFeature&typename=PFT:PFT_pft_pft&' +
                        'outputFormat=application/json&srsname=EPSG:3857&' +
                        'bbox=' + extent.join(',') + ',EPSG:3857';
            },
            strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ())
        })
    });

Then add it to the map:

map.addLayer(vectorSource);

Afterwards, use the browser's developer tools to check out the requests to the server (check the network requests). Check the response of your WFS requests.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.