Fetch feature data on pointer-move event to label on hover?

ChristianBischof

Hey I'm struggling with fetching feature data from a feature layer on pointer-move event. I'd like to fetch the feature data over which the mouse pointer is currently hovering.

I have a country and a feature layer which represents its states. The goal is to give the state over which the mouse pointer is hovering a striking fill colour eg. red and display its name on some kind of label/tooltip.

I'm grateful for any suggestions and code snippets.

Thanks in advance

ChristianBischof

view
          <SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</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>
            <SPAN class="keyword token">return</SPAN> flStreckenausbau<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</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="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">return</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</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 function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</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">"pointer-move"</SPAN><SPAN class="punctuation token">,</SPAN> handlerClick<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">handlerClick</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              view<SPAN class="punctuation token">.</SPAN>popup
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">fetchFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> x<SPAN class="punctuation token">:</SPAN> event<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> event<SPAN class="punctuation token">.</SPAN>y <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  <SPAN class="comment token">// Access the response from fetchFeatures</SPAN>
                  response<SPAN class="punctuation token">.</SPAN>allGraphicsPromise<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>graphics<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="token function">controlTooltip</SPAN><SPAN class="punctuation token">(</SPAN>graphics<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> event<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="keyword token">var</SPAN> currentName<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">controlTooltip</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">var</SPAN> tooltip <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"nametooltip"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>graphic <SPAN class="operator token">!==</SPAN> undefined<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> name <SPAN class="operator token">=</SPAN> graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Namen<SPAN class="punctuation token">;</SPAN>
                <SPAN class="comment token">//prevent tooltip from "wiggling" around by only changing the x and y values whenever a new feature is hovered</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>currentName <SPAN class="operator token">!==</SPAN> name<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>top <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN> <SPAN class="operator token">+</SPAN> e<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">+</SPAN> <SPAN class="string token">"px"</SPAN><SPAN class="punctuation token">;</SPAN>
                  tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>left <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN> <SPAN class="operator token">+</SPAN> e<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">+</SPAN> <SPAN class="string token">"px"</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"inline-block"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>position <SPAN class="operator token">=</SPAN> <SPAN class="string token">"absolute"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>backgroundColor <SPAN class="operator token">=</SPAN> <SPAN class="string token">"#fff"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>padding <SPAN class="operator token">=</SPAN> <SPAN class="string token">"10px"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>borderRadius <SPAN class="operator token">=</SPAN> <SPAN class="string token">"5px"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>fontFamily <SPAN class="operator token">=</SPAN> <SPAN class="string token">"sans-serif"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>fontWeight <SPAN class="operator token">=</SPAN> <SPAN class="string token">"bold"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>boxShadow <SPAN class="operator token">=</SPAN> <SPAN class="string token">"2px 2px 1px #88888888"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> name<SPAN class="punctuation token">;</SPAN>
                currentName <SPAN class="operator token">=</SPAN> name<SPAN class="punctuation token">;</SPAN>
              <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>graphic <SPAN class="operator token">==</SPAN> undefined<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">;</SPAN>
                tooltip<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">"hidden"</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="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 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>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>statetooltip<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="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>name<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>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="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

This is what I came up with. 

For some reason I had to use the view.popup.fetchFeatures method because the view.hitTest method didn't get me all the attributes (and I knew there had to be more than two). If anybody can tell me why this is/was happening or give a suggestion on how to improve my code feel free to contribute