0

I have an OpenLayers3 map with two layers provided from local GeoServer.My requirement is to get the attribute list of one layer and display it as a pop up inside the map window. To achieve this, I wrote something like this.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>


    <style>
        .ol-zoom {
          top: 52px;
        }
        .ol-toggle-options {
          z-index: 1000;
          background: rgba(255,255,255,0.4);
          border-radius: 4px;
          padding: 2px;
          position: absolute;
          left: 8px;
          top: 8px;
        }
        #updateFilterButton, #resetFilterButton {
          height: 22px;
          width: 22px;
          text-align: center;
          text-decoration: none !important;
          line-height: 22px;
          margin: 1px;
          font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
          font-weight: bold !important;
          background: rgba(0,60,136,0.5);
          color: white !important;
          padding: 2px;
        }
        .ol-toggle-options a {
          background: rgba(0,60,136,0.5);
          color: white;
          display: block;
          font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
          font-size: 19px;
          font-weight: bold;
          height: 22px;
          line-height: 11px;
          margin: 1px;
          padding: 0;
          text-align: center;
          text-decoration: none;
          width: 22px;
          border-radius: 2px;
        }
        .ol-toggle-options a:hover {
          color: #fff;
          text-decoration: none;
          background: rgba(0,60,136,0.7);
        }
        body {
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: small;
        }

        iframe {
            width: 100%;
            height: 250px;
            border: none;
        }
        /* Toolbar styles */
        #toolbar {
            position: relative;
            padding-bottom: 0.5em;
        }
        #toolbar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #toolbar ul li {
            float: left;
            padding-right: 1em;
            padding-bottom: 0.5em;
        }
        #toolbar ul li a {
            font-weight: bold;
            font-size: smaller;
            vertical-align: middle;
            color: black;
            text-decoration: none;
        }
        #toolbar ul li a:hover {
            text-decoration: underline;
        }
        #toolbar ul li * {
            vertical-align: middle;
        }
        #map {
            clear: both;
            position: relative;
            width: 600px;
            height: 800px;
            border: 1px solid black;
            bottom:802px;
            left:450px;
        }
        #left_frame
        {

            position: relative;
            width: 590px;
            height: 800px;
            border: 1px solid black;
            bottom:1635px;
            left:1060px;
        }
        img{
            position: relative;
            width: 444px;
            height: 775px;

            top:5px;

        }
        #legend {
            position: relative;
            width: 444px;
            height: 800px;
            border: 1px solid black;
            top:0px;

        }
        #wrapper {
            width: 444px;
            position: relative;
            bottom:802px;
            left:450px;
        }
        #location {


            bottom:802px;
            left:450px;
        }

        /* Styles used by the default GetFeatureInfo output, added to make IE happy */
        table.featureInfo, table.featureInfo td, table.featureInfo th {
            border: 1px solid #ddd;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            font-size: 90%;
            padding: .2em .1em;
        }
        table.featureInfo th {
            padding: .2em .2em;
            font-weight: bold;
            background: #eee;
        }
        table.featureInfo td {
            background: #fff;
        }
        table.featureInfo tr.odd td {
            background: #eee;
        }
        table.featureInfo caption {
            text-align: left;
            font-size: 100%;
            font-weight: bold;
            padding: .2em .2em;
        }

    </style>

    <script src="http://localhost:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script>

    <title>OpenLayers map preview</title>
  </head>
  <body>
    <div id="legend">
      <img src="Legend.PNG.jpg">
    </div>

    <div id="map"><div id="info"></div>
    </div>
    </div>


    <div id="wrapper">
        <div id="location"></div>
        <div id="scale"></div>
    </div>
    <div id="left_frame">
    <input type="checkbox" value="Village Boundary" checked>Village Boundary<br>
    <input type="checkbox" value="OSM Grids">OSM Grids<br></div>

    <script type="text/javascript">


      var pureCoverage = false;
      // if this is just a coverage or a group of them, disable a few items,
      // and default to jpeg format
      var format = 'image/png';
      var bounds = [472440.0520989996, 911801.0984444692,
                    768802.9061656371, 1424302.9894040015];
      if (pureCoverage) {
        document.getElementById('antialiasSelector').disabled = true;
        document.getElementById('jpeg').selected = true;
        format = "image/jpeg";
      }

      var supportsFiltering = true;
      if (!supportsFiltering) {
        document.getElementById('filterType').disabled = true;
        document.getElementById('filter').disabled = true;
        document.getElementById('updateFilterButton').disabled = true;
        document.getElementById('resetFilterButton').disabled = true;
      }

      var mousePositionControl = new ol.control.MousePosition({
        className: 'custom-mouse-position',
        target: document.getElementById('location'),
        coordinateFormat: ol.coordinate.createStringXY(5),
        undefinedHTML: '&nbsp;'
      });

      var projection = new ol.proj.Projection({
          code: 'EPSG:32643',
          units: 'm',
          axisOrientation: 'neu',
          global: false
      });




        var villageboundary = new ol.layer.Image({
                 title:'Village Boundary',
                 type: 'base',
                 label:'Village Boundary',
                 source: new ol.source.ImageWMS({
                 ratio: 1,
                 url: 'http://localhost:8080/geoserver/geog585/wms',
                 params: {'FORMAT': format,
                         'VERSION': '1.1.1',  
                         "LAYERS": 'geog585:Village_Boundary',
                         "exceptions": 'application/vnd.ogc.se_inimage',
                         }
                       })
                     });





         var osmgrid = new ol.layer.Image({
                 title:'OSM Grid',
                 visible: false,
                 label:'OSM Grid',
                 source: new ol.source.ImageWMS({
                 ratio: 1,

                 url: 'http://localhost:8080/geoserver/geog585/wms',
                 params: {'FORMAT': format,
                         'VERSION': '1.1.1',  
                         "LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
                         "exceptions": 'application/vnd.ogc.se_inimage',
                         }
                       })
                     });





         //Tile OSM

         var tiledOSM = new ol.layer.Tile({
        title:'OSM Grids',
        visible: false,
        label:'OSM Grids',
        source: new ol.source.TileWMS({
          url: 'http://localhost:8080/geoserver/geog585/wms',
          params: {'FORMAT': format, 
                   'VERSION': '1.1.1',
                   tiled: true,
                "LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
                "exceptions": 'application/vnd.ogc.se_inimage',
             tilesOrigin: 472849.4548000004 + "," + 912420.9497999996
          }
        })
      });




         //Tile OSM



      var map = new ol.Map({
        controls: ol.control.defaults({
          attribution: false
        }).extend([mousePositionControl]),
        target: 'map',
        layers: [
                villageboundary,

                tiledOSM
               ],
        view: new ol.View({
           projection: projection
        })
      });



      map.getView().on('change:resolution', function(evt) {
        var resolution = evt.target.get('resolution');
        var units = map.getView().getProjection().getUnits();
        var dpi = 25.4 / 0.28;
        var mpu = ol.proj.METERS_PER_UNIT[units];
        var scale = resolution * mpu * 39.37 * dpi;
        if (scale >= 9500 && scale <= 950000) {
          scale = Math.round(scale / 1000) + "K";
        } else if (scale >= 950000) {
          scale = Math.round(scale / 1000000) + "M";
        } else {
          scale = Math.round(scale);
        }
        document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
      });
      map.getView().fit(bounds, map.getSize());


      var changeLayer = function changeLayer(ev) {
      var val = $(this).val();
      var checked = $(this).is(':checked');
      map.getLayers().forEach(function (layer) {
      if (layer.get('label') === val) {
        layer.setVisible(checked);
        } 
      });
     };

    $('input').each(function (){  $(this).on('change', changeLayer); });



    /////popup//

      var popup = new ol.Overlay.Popup();
     map.addOverlay(popup);

     map.on('singleclick', function(evt) {
    popup.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());
    var url = tiledOSM.getGetFeatureInfoUrl(
      evt.coordinate, viewResolution, 'EPSG:32643',
      {'INFO_FORMAT': 'text/html'});
    if (url) {
    popup.getElementById('info').innerHTML =
        '<iframe seamless src="' + url + '"></iframe>';
    }

    popup.show(evt.coordinate, url);
    });

    </script>
  </body>
</html>

But it is not working. Since I am new to this, I do not know if I have to add any extra scripts/elements. How can I solve this?

0

You are trying to open an iframe, instead of it, you can have the data as JSON, parse, show.

Try this:

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

    <style>
        .ol-zoom {
            top: 52px;
        }

        .ol-toggle-options {
            z-index: 1000;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 4px;
            padding: 2px;
            position: absolute;
            left: 8px;
            top: 8px;
        }

        #updateFilterButton,
        #resetFilterButton {
            height: 22px;
            width: 22px;
            text-align: center;
            text-decoration: none !important;
            line-height: 22px;
            margin: 1px;
            font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
            font-weight: bold !important;
            background: rgba(0, 60, 136, 0.5);
            color: white !important;
            padding: 2px;
        }

        .ol-toggle-options a {
            background: rgba(0, 60, 136, 0.5);
            color: white;
            display: block;
            font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
            font-size: 19px;
            font-weight: bold;
            height: 22px;
            line-height: 11px;
            margin: 1px;
            padding: 0;
            text-align: center;
            text-decoration: none;
            width: 22px;
            border-radius: 2px;
        }

        .ol-toggle-options a:hover {
            color: #fff;
            text-decoration: none;
            background: rgba(0, 60, 136, 0.7);
        }

        body {
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: small;
        }

        iframe {
            width: 100%;
            height: 250px;
            border: none;
        }
        /* Toolbar styles */

        #toolbar {
            position: relative;
            padding-bottom: 0.5em;
        }

        #toolbar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #toolbar ul li {
            float: left;
            padding-right: 1em;
            padding-bottom: 0.5em;
        }

        #toolbar ul li a {
            font-weight: bold;
            font-size: smaller;
            vertical-align: middle;
            color: black;
            text-decoration: none;
        }

        #toolbar ul li a:hover {
            text-decoration: underline;
        }

        #toolbar ul li * {
            vertical-align: middle;
        }

        #map {
            clear: both;
            position: relative;
            width: 600px;
            height: 800px;
            border: 1px solid black;
            bottom: 802px;
            left: 450px;
        }

        #left_frame {
            position: relative;
            width: 590px;
            height: 800px;
            border: 1px solid black;
            bottom: 1635px;
            left: 1060px;
        }

        img {
            position: relative;
            width: 444px;
            height: 775px;
            top: 5px;
        }

        #legend {
            position: relative;
            width: 444px;
            height: 800px;
            border: 1px solid black;
            top: 0px;
        }

        #wrapper {
            width: 444px;
            position: relative;
            bottom: 802px;
            left: 450px;
        }

        #location {
            bottom: 802px;
            left: 450px;
        }
        /* Styles used by the default GetFeatureInfo output, added to make IE happy */

        table.featureInfo,
        table.featureInfo td,
        table.featureInfo th {
            border: 1px solid #ddd;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            font-size: 90%;
            padding: .2em .1em;
        }

        table.featureInfo th {
            padding: .2em .2em;
            font-weight: bold;
            background: #eee;
        }

        table.featureInfo td {
            background: #fff;
        }

        table.featureInfo tr.odd td {
            background: #eee;
        }

        table.featureInfo caption {
            text-align: left;
            font-size: 100%;
            font-weight: bold;
            padding: .2em .2em;
        }
    </style>

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" type="text/javascript"></script>

    <title>OpenLayers map preview</title>
</head>

<body>
    <div id="legend">
        <img src="Legend.PNG.jpg">
    </div>

    <div id="map">
    </div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
    </div>

    <div id="wrapper">
        <div id="location"></div>
        <div id="scale"></div>
    </div>
    <div id="left_frame">
        <input type="checkbox" value="Village Boundary" checked>Village Boundary
        <br>
        <input type="checkbox" value="OSM Grids">OSM Grids
        <br>
    </div>

    <script type="text/javascript">
        var pureCoverage = false;
        // if this is just a coverage or a group of them, disable a few items,
        // and default to jpeg format
        var format = 'image/png';
        var bounds = [472440.0520989996, 911801.0984444692,
            768802.9061656371, 1424302.9894040015
        ];
        if (pureCoverage) {
            document.getElementById('antialiasSelector').disabled = true;
            document.getElementById('jpeg').selected = true;
            format = "image/jpeg";
        }

        var supportsFiltering = true;
        if (!supportsFiltering) {
            document.getElementById('filterType').disabled = true;
            document.getElementById('filter').disabled = true;
            document.getElementById('updateFilterButton').disabled = true;
            document.getElementById('resetFilterButton').disabled = true;
        }

        var mousePositionControl = new ol.control.MousePosition({
            className: 'custom-mouse-position',
            target: document.getElementById('location'),
            coordinateFormat: ol.coordinate.createStringXY(5),
            undefinedHTML: '&nbsp;'
        });

        var projection = new ol.proj.Projection({
            code: 'EPSG:32643',
            units: 'm',
            axisOrientation: 'neu',
            global: false
        });

        var villageboundary = new ol.layer.Image({
            title: 'Village Boundary',
            type: 'base',
            label: 'Village Boundary',
            source: new ol.source.ImageWMS({
                ratio: 1,
                url: 'http://localhost:8080/geoserver/geog585/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    "LAYERS": 'geog585:Village_Boundary',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                }
            })
        });

        var osmgrid = new ol.layer.Image({
            title: 'OSM Grid',
            visible: false,
            label: 'OSM Grid',
            source: new ol.source.ImageWMS({
                ratio: 1,

                url: 'http://localhost:8080/geoserver/geog585/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    "LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                }
            })
        });

        //Tile OSM

        var tiledOSM = new ol.layer.Tile({
            title: 'OSM Grids',
            visible: false,
            label: 'OSM Grids',
            source: new ol.source.TileWMS({
                url: 'http://localhost:8080/geoserver/geog585/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    tiled: true,
                    "LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 472849.4548000004 + "," + 912420.9497999996
                }
            })
        });

        //Tile OSM

        var map = new ol.Map({
            controls: ol.control.defaults({
                attribution: false
            }).extend([mousePositionControl]),
            target: 'map',
            layers: [
                villageboundary,

                tiledOSM
            ],
            view: new ol.View({
                projection: projection
            })
        });

        map.getView().on('change:resolution', function(evt) {
            var resolution = evt.target.get('resolution');
            var units = map.getView().getProjection().getUnits();
            var dpi = 25.4 / 0.28;
            var mpu = ol.proj.Units.METERS_PER_UNIT[units];
            var scale = resolution * mpu * 39.37 * dpi;
            if (scale >= 9500 && scale <= 950000) {
                scale = Math.round(scale / 1000) + "K";
            } else if (scale >= 950000) {
                scale = Math.round(scale / 1000000) + "M";
            } else {
                scale = Math.round(scale);
            }
            document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
        });
        map.getView().fit(bounds, map.getSize());

        var changeLayer = function changeLayer(ev) {
            var val = $(this).val();
            var checked = $(this).is(':checked');
            map.getLayers().forEach(function(layer) {
                if (layer.get('label') === val) {
                    layer.setVisible(checked);
                }
            });
        };

        $('input').each(function() {
            $(this).on('change', changeLayer);
        });

        /////popup//
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var closer = document.getElementById('popup-closer');
        var overlay = new ol.Overlay({
            element: container,
            autoPan: true,
            autoPanAnimation: {
                duration: 250
            }
        });
        closer.onclick = function() {
            overlay.setPosition(undefined);
            closer.blur();
            return false;
        };
        map.addOverlay(overlay);

        map.on('singleclick', function(evt) {
            var view = map.getView();
            var viewResolution = /** @type {number} */ (map.getView().getResolution());
            var url = villageboundary.getSource().getGetFeatureInfoUrl(evt.coordinate, view.getResolution(), view.getProjection(), {
                'INFO_FORMAT': 'application/json',
                'PIXELRADIUS': 5,
                'FEATURE_COUNT': 10
            });
            if (url) {
                content.innerHTML =
                    'URL: ' + url;
            }

            overlay.setPosition(evt.coordinate);
        });
    </script>
</body>

</html>
  • I tried with your code. It worked when I tried to display the url in a pop up. But when I tried to parse the JSON data and display property name and value, it shows nothing. Can you correct me if it is wrong. JSFiddle link is given. jsfiddle.net/jomiracle/cehjva0m/2 – user6748530 Sep 16 at 12:01
  • The pop up was blank because of CORS error and I fixed it by adding Moesif CORS extension to Chrome browser.Now,the pop up appeared with expected result. – user6748530 Sep 24 at 4:19

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.