nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

SpikyMS

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

Najděte více příspěvků označených jako

Accepted answers

SpikyMS

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

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

    <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="selector token">html,
      body,
      #viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
        <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
        <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
        <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN>
      <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN>
      <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.15/esri/themes/light/main.css<SPAN class="punctuation token">"</SPAN></SPAN>
    <SPAN class="punctuation token">/></SPAN></SPAN>
    <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.15/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

    <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/layers/WMSLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/views/MapView"</SPAN>
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> WMSLayer<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">7</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">51.5</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> layer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WMSLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.wms.nrw.de/wms/krankenhaus"</SPAN><SPAN class="punctuation token">,</SPAN>
          featureInfoFormat<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text/html"</SPAN><SPAN class="punctuation token">,</SPAN>
          featureInfoUrl<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.wms.nrw.de/wms/krankenhaus?"</SPAN><SPAN class="punctuation token">,</SPAN>
          sublayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"krankenhaus"</SPAN><SPAN class="punctuation token">,</SPAN>
              popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
              queryable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

ChristianBischof

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

    <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
      html<SPAN class="punctuation token">,</SPAN>
      body<SPAN class="punctuation token">,</SPAN>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

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

    <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
      <SPAN class="keyword token">var</SPAN> view<SPAN class="punctuation token">;</SPAN>
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/layers/WMSLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> WMSLayer<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">7</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">51.5</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> layer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WMSLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.wms.nrw.de/wms/krankenhaus"</SPAN><SPAN class="punctuation token">,</SPAN>
          featureInfoFormat<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text/html"</SPAN><SPAN class="punctuation token">,</SPAN>
          featureInfoUrl<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.wms.nrw.de/wms/krankenhaus?"</SPAN><SPAN class="punctuation token">,</SPAN>
          sublayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"krankenhaus"</SPAN><SPAN class="punctuation token">,</SPAN>
              popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

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

  <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

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

SpikyMS

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

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

    <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="selector token">html,
      body,
      #viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
        <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
        <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
        <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN>
      <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN>
      <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.15/esri/themes/light/main.css<SPAN class="punctuation token">"</SPAN></SPAN>
    <SPAN class="punctuation token">/></SPAN></SPAN>
    <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.15/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

    <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/layers/WMSLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/views/MapView"</SPAN>
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> WMSLayer<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">7</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">51.5</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> layer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WMSLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.wms.nrw.de/wms/krankenhaus"</SPAN><SPAN class="punctuation token">,</SPAN>
          featureInfoFormat<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text/html"</SPAN><SPAN class="punctuation token">,</SPAN>
          featureInfoUrl<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.wms.nrw.de/wms/krankenhaus?"</SPAN><SPAN class="punctuation token">,</SPAN>
          sublayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"krankenhaus"</SPAN><SPAN class="punctuation token">,</SPAN>
              popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
              queryable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

AgrimotionTeam

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

were you able to resolve this?

elvispz

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

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

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.