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 make a menu on right click of feature on feature layer

RitikaManderwal
I want a context menu that triggers on right click of a feature in feature layer.
I m getting solution of it for version 3.29 arcgis js api.
But i want it for 4.10 arcgis js api
Encontre mais publicações marcadas com

Accepted answers

RobertScheitlin__GISP
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
All comments

RobertScheitlin__GISP
Ritika,
Here is a sample that shows how in 4.12.
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<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>Access features <SPAN class="keyword token">with</SPAN> pointer events <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.12</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>

    #info <SPAN class="punctuation token">{</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN>
      opacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.75</SPAN><SPAN class="punctuation token">;</SPAN>
      color<SPAN class="punctuation token">:</SPAN> orange<SPAN class="punctuation token">;</SPAN>
      font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 18pt<SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
      visibility<SPAN class="punctuation token">:</SPAN> hidden<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.12/esri/themes/light/main.css"</SPAN> <SPAN class="operator token">/</SPAN><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.12/dijit/themes/claro/claro.css"</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.12/"</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="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/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dijit/Menu"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dijit/MenuItem"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dijit/popup"</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> MapView<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN>
      Menu<SPAN class="punctuation token">,</SPAN> MenuItem<SPAN class="punctuation token">,</SPAN> popup<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">let</SPAN> ctxMenuForGraphics<SPAN class="punctuation token">,</SPAN> attributes<SPAN class="punctuation token">,</SPAN> category<SPAN class="punctuation token">,</SPAN> tname<SPAN class="punctuation token">,</SPAN> wind<SPAN class="punctuation token">,</SPAN> tyear<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">const</SPAN> hurricanesLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1"</SPAN><SPAN class="punctuation token">,</SPAN>
        outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string 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">const</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">"dark-gray"</SPAN><SPAN class="punctuation token">,</SPAN>
        layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>hurricanesLayer<SPAN class="punctuation token">]</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">const</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="operator token">-</SPAN><SPAN class="number token">61.125537</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">35.863534</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">,</SPAN>
        highlightOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"orange"</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"info"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><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="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> hurricanesLayer<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="token function">createFeatureMenu</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">const</SPAN> renderer <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>renderer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          renderer<SPAN class="punctuation token">.</SPAN>symbol<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">;</SPAN>
          renderer<SPAN class="punctuation token">.</SPAN>symbol<SPAN class="punctuation token">.</SPAN>color <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.8</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          layer<SPAN class="punctuation token">.</SPAN>renderer <SPAN class="operator token">=</SPAN> renderer<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">"click"</SPAN><SPAN class="punctuation token">,</SPAN> eventHandler<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">function</SPAN> <SPAN class="token function">eventHandler</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>button <SPAN class="operator token">===</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitTest</SPAN><SPAN class="punctuation token">(</SPAN>event<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>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="token function">getGraphics</SPAN><SPAN class="punctuation token">(</SPAN>evt<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="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
              document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"info"</SPAN><SPAN class="punctuation token">)</SPAN><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>
              popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN>ctxMenuForGraphics<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>highlight<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                highlight<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                highlight <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</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">let</SPAN> highlight<SPAN class="punctuation token">,</SPAN> currentYear<SPAN class="punctuation token">,</SPAN> currentName<SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getGraphics</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">,</SPAN> mevent<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// the topmost graphic from the hurricanesLayer</SPAN>
            <SPAN class="comment token">// and display select attribute values from the</SPAN>
            <SPAN class="comment token">// graphic to the user</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">const</SPAN> graphic <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">.</SPAN><SPAN class="token function">filter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">return</SPAN> result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>layer <SPAN class="operator token">===</SPAN> hurricanesLayer<SPAN class="punctuation token">;</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">;</SPAN>

              attributes <SPAN class="operator token">=</SPAN> graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">;</SPAN>
              category <SPAN class="operator token">=</SPAN> attributes<SPAN class="punctuation token">.</SPAN>CAT<SPAN class="punctuation token">;</SPAN>
              wind <SPAN class="operator token">=</SPAN> attributes<SPAN class="punctuation token">.</SPAN>WIND_KTS<SPAN class="punctuation token">;</SPAN>
              tname <SPAN class="operator token">=</SPAN> attributes<SPAN class="punctuation token">.</SPAN>NAME<SPAN class="punctuation token">;</SPAN>
              tyear <SPAN class="operator token">=</SPAN> attributes<SPAN class="punctuation token">.</SPAN>YEAR<SPAN class="punctuation token">;</SPAN>
              id <SPAN class="operator token">=</SPAN> attributes<SPAN class="punctuation token">.</SPAN>OBJECTID<SPAN class="punctuation token">;</SPAN>

              <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>highlight <SPAN class="operator token">&&</SPAN> <SPAN class="punctuation token">(</SPAN>currentName <SPAN class="operator token">!==</SPAN> tname <SPAN class="operator token">||</SPAN> currentYear <SPAN class="operator token">!==</SPAN> tyear<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                highlight<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                highlight <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="punctuation token">}</SPAN>

              <SPAN class="comment token">// highlight all features belonging to the same hurricane as the feature</SPAN>
              <SPAN class="comment token">// returned from the hitTest</SPAN>
              <SPAN class="keyword token">const</SPAN> query <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"YEAR = "</SPAN> <SPAN class="operator token">+</SPAN> tyear <SPAN class="operator token">+</SPAN> <SPAN class="string token">" AND NAME = '"</SPAN> <SPAN class="operator token">+</SPAN> tname <SPAN class="operator token">+</SPAN> <SPAN class="string token">"'"</SPAN><SPAN class="punctuation token">;</SPAN>
              layerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryObjectIds</SPAN><SPAN class="punctuation token">(</SPAN>query<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>ids<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                highlight <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">highlight</SPAN><SPAN class="punctuation token">(</SPAN>ids<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                currentYear <SPAN class="operator token">=</SPAN> tyear<SPAN class="punctuation token">;</SPAN>
                currentName <SPAN class="operator token">=</SPAN> tname<SPAN class="punctuation token">;</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><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>
                popup<SPAN class="punctuation token">:</SPAN> ctxMenuForGraphics<SPAN class="punctuation token">,</SPAN>
                x<SPAN class="punctuation token">:</SPAN> mevent<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN>
                y<SPAN class="punctuation token">:</SPAN> mevent<SPAN class="punctuation token">.</SPAN>y
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"info"</SPAN><SPAN class="punctuation token">)</SPAN><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="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
              document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"info"</SPAN><SPAN class="punctuation token">)</SPAN><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>
              popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN>ctxMenuForGraphics<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="comment token">// remove the highlight if no features are</SPAN>
              <SPAN class="comment token">// returned from the hitTest</SPAN>
              highlight<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              highlight <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</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">function</SPAN> <SPAN class="token function">createFeatureMenu</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">// Creates right-click context menu for Features</SPAN>
        ctxMenuForGraphics <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Menu</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>
        ctxMenuForGraphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addChild</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MenuItem</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Track info..."</SPAN><SPAN class="punctuation token">,</SPAN>
          onClick<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>
            document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"info"</SPAN><SPAN class="punctuation token">)</SPAN><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>
            document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> tname<SPAN class="punctuation token">;</SPAN>
            document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"category"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN>
              <SPAN class="string token">"Category "</SPAN> <SPAN class="operator token">+</SPAN> category<SPAN class="punctuation token">;</SPAN>
            document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"wind"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> wind <SPAN class="operator token">+</SPAN> <SPAN class="string token">" kts"</SPAN><SPAN class="punctuation token">;</SPAN>
            popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN>ctxMenuForGraphics<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>
        ctxMenuForGraphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</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="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"claro"</SPAN><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>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"info"</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>span id<SPAN class="operator token">=</SPAN><SPAN class="string token">"name"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>span id<SPAN class="operator token">=</SPAN><SPAN class="string token">"category"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>span id<SPAN class="operator token">=</SPAN><SPAN class="string token">"wind"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>
RitikaManderwal
thank you
RobertScheitlin__GISP
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
MichaelLev
I presented a related question
I thought that this example could help, but I can't make the example work in esri javascript 4.16
Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Links Rápidos

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