1

My aim is to retrieve the attribute list of a WMS layer. The concept is to fetch it as JSON data, then parse it and display it in a pop up. I am using OpenLayers3 with local GeoServer and JavaScript.

When I enter the WMS request URL in browser, I get response as given below.

{"type":"FeatureCollection","features":[{"type":"Feature","id":"OSM_Grid_25000_include_hazard_line.60","geometry":{"type":"MultiPolygon","coordinates":[[[[623207.0023,1133268.8385],[609515.9426,1133223.6554],[609472.75,1147046.3421],[623158.4075,1147092.0522],[623207.0023,1133268.8385]]]]},"geometry_name":"the_geom","properties":{"OBJECTID_1":162,"OBJECTID_2":162,"OBJECTID":25925,"OSM_25K_IN":"C 43 K 3/SW","Map_No":39,"Map_KL_No":"KL 39"}}],"totalFeatures":"unknown","numberReturned":1,"timeStamp":"2019-09-19T12:06:17.336Z","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::32643"}}}

Here, I need the value of "Map_No" to be displayed inside the pop up. Hence I wrote the code given below.

map.on('singleclick', function(evt) {
            var view = map.getView();
            var viewResolution = /** @type {number} */ (map.getView().getResolution());
            var url = tiledOSM.getSource().getGetFeatureInfoUrl(evt.coordinate, view.getResolution(), view.getProjection(), {
                'INFO_FORMAT': 'application/json',
                'PIXELRADIUS': 5,
                'FEATURE_COUNT': 10
            });
if (url) {
        var parser = new ol.format.GeoJSON();
        $.ajax({
          url: url,
          dataType: 'jsonp',
          jsonpCallback: 'parseResponse'
        }).then(function(response) {
          var result = parser.readFeatures(response);
          if (result.length) {
            var info = [];
            for (var i = 0, ii = result.length; i < ii; ++i) {
              info.push(result[i].get('Map_No'));
            }
            content.innerHTML = info.join(",");

          } 
        });
      }

      overlay.setPosition(evt.coordinate); 
    }); 

When I run this code, the pop up is appearing blank. Since I am a beginner, I am not able to understand it.

Should I add any JavaScript reference link to make this code work?

0

The popup was appearing blank because of CORS error and I fixed it by adding Moesif CORS extension to chrome browser. Now, the above code works as expected. Hence,I am marking this as answer.

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.