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

SpikyMS · ‎06-04-2020

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

SpikyMS · ‎06-24-2020

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

ChristianBischof · ‎06-05-2020

<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

SpikyMS · ‎06-10-2020

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

elvispz · ‎10-16-2023

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

elvispz · ‎10-16-2023

<html>

<head>

<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"

/>

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({

url: "https://idec.ineter.gob.ni/geoserver/geonode/wms/capacartografiacatastral_idec",

featureInfoFormat: "text/html",

featureInfoUrl: "https://idec.ineter.gob.ni/geoserver/geonode/wms/capacartografiacatastral_idec?",

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>

</body>

</html>

SpikyMS · ‎06-24-2020

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 · ‎07-18-2020

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

imritanshu · ‎05-11-2023

were you able to resolve this?