How to show popup for WMS layer in JS API 4.15?

2759
7
Jump to solution
06-04-2020 01:12 AM
SpikyMS
New Contributor II

Hi everyone,

I am trying to show a popup for a WMSLayer. I have build a sample here, but no popup is opened when clicking in the map: https://codepen.io/dpayk/pen/gOPbOxJ?editors=1000 

What do I have to do to show a popup?

Thanks a lot

Dennis

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
SpikyMS
New Contributor II

Just in case someone is looking for a working sample, here it is (I also updated the codepen linked above):

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Popup for WMS - 4.15</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
      require([
        "esri/Map",
        "esri/layers/WMSLayer",
        "esri/views/MapView"
      ], function(Map, WMSLayer, MapView) {
        var map = new Map({
          basemap: "gray"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [7, 51.5],
          zoom: 9
        });

        var layer = new WMSLayer({
          url: "https://www.wms.nrw.de/wms/krankenhaus",
          featureInfoFormat: "text/html",
          featureInfoUrl: "https://www.wms.nrw.de/wms/krankenhaus?",
          sublayers: [
            {
              name: "krankenhaus",
              popupEnabled: true,
              queryable: true
            }
          ]
        });

        map.add(layer);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

7 Replies
ChristianBischof
Esri Contributor
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Popup for WMS - 4.15</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
      var view;
      require([
        "esri/Map",
        "esri/layers/WMSLayer",
        "esri/views/MapView",
      ], function (Map, WMSLayer, MapView) {
        var map = new Map({
          basemap: "gray",
        });

        view = new MapView({
          container: "viewDiv",
          map: map,
          center: [7, 51.5],
          zoom: 9,
        });

        var layer = new WMSLayer({
          url: "https://www.wms.nrw.de/wms/krankenhaus",
          featureInfoFormat: "text/html",
          featureInfoUrl: "https://www.wms.nrw.de/wms/krankenhaus?",
          sublayers: [
            {
              name: "krankenhaus",
              popupEnabled: true,
            },
          ],
        });

        map.add(layer);

        view.when(function () {
          view.popup.autoOpenEnabled = false;
          view.on("click", function (event) {
              var info = layer.getFeatureInfo();
              console.log(info)
            view.popup.open({
                location: event.mapPoint
            });
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Add the lines which add the click event handler (form line 59) to your code. The popup should open at the click event's location

0 Kudos
SpikyMS
New Contributor II

Hi,

thanks for your response. Unfortunately it does not work. The method getFeatureInfo does not exist in the 4.x API.

I would be thankful for a working sample 🙂

Thanks

Dennis

0 Kudos
elvispz
New Contributor II
The function is not executed, please Helpme, Tengo un wms y no puedo ver la info
wms---> https://idec.ineter.gob.ni/geoserver/geonode/wms/capacartografiacatastral_idec
Here web in geonode and geoserver https://idec.ineter.gob.ni/catalogue/#/dataset/5

0 Kudos
elvispz
New Contributor II
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Popup for WMS - 4.15</title>
 
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
 
    <link
      rel="stylesheet"
    />
    <script src="https://js.arcgis.com/4.15/"></script>
 
    <script>
      var view;
      require([
        "esri/Map",
        "esri/layers/WMSLayer",
        "esri/views/MapView",
      ], function (Map, WMSLayer, MapView) {
        var map = new Map({
          basemap: "gray",
        });
 
        view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-86.266, 12.129],
          zoom: 16,
        });
 
        var layer = new WMSLayer({
          featureInfoFormat: "text/html",
            sublayers: [
            {
              name: "capacartografiacatastral_idec",
              popupEnabled: true,
  queryable: true
            },
          ],
        });
 
        map.add(layer);
 
        view.when(function () {
          view.popup.autoOpenEnabled = false;
          view.on("click", function (event) {
              var info = layer.getFeatureInfo();
              console.log(info)
            view.popup.open({
                location: event.mapPoint
            });
          });
        });
      });
    </script>
  </head>
 
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
 
0 Kudos
SpikyMS
New Contributor II

Just in case someone is looking for a working sample, here it is (I also updated the codepen linked above):

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Popup for WMS - 4.15</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
      require([
        "esri/Map",
        "esri/layers/WMSLayer",
        "esri/views/MapView"
      ], function(Map, WMSLayer, MapView) {
        var map = new Map({
          basemap: "gray"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [7, 51.5],
          zoom: 9
        });

        var layer = new WMSLayer({
          url: "https://www.wms.nrw.de/wms/krankenhaus",
          featureInfoFormat: "text/html",
          featureInfoUrl: "https://www.wms.nrw.de/wms/krankenhaus?",
          sublayers: [
            {
              name: "krankenhaus",
              popupEnabled: true,
              queryable: true
            }
          ]
        });

        map.add(layer);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
AgrimotionTeam
New Contributor II

Hi Dennis 

After hours of searching I came across your post. THANK YOU!! this helped immensely.

I am however receiving a x-frame issue now, any chance you have some advise please? 🙂 

Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 

TIA

Hugo

0 Kudos
imritanshu
New Contributor III

were you able to resolve this?

0 Kudos