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

Smooth hover/mouseover tooltips in JSAPI v4

ChrisSmith7

Hey guys,

We've used the JSAPI since the early days of v3, and while we have workable mouseover tooltips (opening the pop-up), one aspect we wish we could change is the smoothness of the hover/tooltip. I do not have a link to our application directly, but to give you an idea, please see the following sample:

Feature widget in a side panel | ArcGIS API for JavaScript 4.15

You'll notice that every time the pointer moves, the graphic is removed and re-added to the map (causing flickering), and then the panel is subsequently refreshed. This is what we experience with our pop-up tooltip... flickering tooltips and constant symbol "redraws." It makes sense based on how it's coded, but I haven't found a better way to do this. It distracts somewhat from the user experience - we've always hoped for something more graceful, e.g.:

https://www.highcharts.com/maps/demo/color-axis

Has anyone had similar experiences and found success in developing smoother tooltips?

Finde mehr Beiträge mit dem Tag

Accepted answers

RobertScheitlin__GISP

Chris,

Here is a smooth mouse over example. The big takeaway is to check if you are still over the same graphic in the pointer-move event and if you are then do nothing.

<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 http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=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>PopupTemplate <SPAN class="operator token">-</SPAN> use functions to <SPAN class="keyword token">set</SPAN> content <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>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>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>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> populationChange<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/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/Layer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/widgets/Feature"</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> Layer<SPAN class="punctuation token">,</SPAN> Feature<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">"dark-gray"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="comment token">// Create the MapView</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>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN><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">87</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">34</SPAN><SPAN class="punctuation token">]</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      Layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">fromPortalItem</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
          id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"e8f85b4982a24210b9c8aa20ba4e1bf7"</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="comment token">// add the layer to the map</SPAN>
        layer<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string 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="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</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> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">const</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            geometry<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">,</SPAN>
            popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Mouse over features to show details..."</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">const</SPAN> feature <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Feature</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            graphic<SPAN class="punctuation token">,</SPAN>
            view
          <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>feature<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">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">let</SPAN> highlight<SPAN class="punctuation token">,</SPAN> lResult <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>attributes<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">{</SPAN>NAME<SPAN class="punctuation token">:</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">}</SPAN><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> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator 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="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                results
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">const</SPAN> result <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>lResult<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>NAME <SPAN class="operator token">!==</SPAN> result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>NAME<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                      highlight <SPAN class="operator 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> layerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">highlight</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                      feature<SPAN class="punctuation token">.</SPAN>graphic <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">;</SPAN>
                      lResult <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>graphic<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>
                  highlight <SPAN class="operator 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>
                  feature<SPAN class="punctuation token">.</SPAN>graphic <SPAN class="operator token">=</SPAN> graphic
                <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="punctuation token">;</SPAN>

        <SPAN class="comment token">// Create a new popupTemplate for the layer and</SPAN>
        <SPAN class="comment token">// format the numeric field values using the FieldInfoFormat properties. Call the custom populationChange()</SPAN>
        <SPAN class="comment token">// function to calculate percent change for the county.</SPAN>
        <SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
          title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Population in {NAME}"</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>
          content<SPAN class="punctuation token">:</SPAN> populationChange<SPAN class="punctuation token">,</SPAN>
          fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
              fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP2010"</SPAN><SPAN class="punctuation token">,</SPAN>
              format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP10_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN>
              format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP2013"</SPAN><SPAN class="punctuation token">,</SPAN>
              format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP13_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN>
              format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</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>

        layer<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> popupTemplate<SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">populationChange</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> div <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> upArrow <SPAN class="operator token">=</SPAN>
            <SPAN class="string token">'<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>'</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> downArrow <SPAN class="operator token">=</SPAN>
            <SPAN class="string token">'<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>'</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// Calculate the population percent change from 2010 to 2013.</SPAN>
          <SPAN class="keyword token">var</SPAN> diff <SPAN class="operator token">=</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2013 <SPAN class="operator token">-</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2010<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> pctChange <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>diff <SPAN class="operator token">*</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2010<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> arrow <SPAN class="operator token">=</SPAN> diff <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">?</SPAN> upArrow <SPAN class="punctuation token">:</SPAN> downArrow<SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// Add green arrow if the percent change is positive and a red arrow for negative percent change.</SPAN>
          div<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN>
            <SPAN class="string token">"As of 2010, the total population in this area was <b>"</SPAN> <SPAN class="operator token">+</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2010 <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"</b> and the density was <b>"</SPAN> <SPAN class="operator token">+</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP10_SQMI <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"</b> sq mi. As of 2013, the total population was <b>"</SPAN> <SPAN class="operator token">+</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2013 <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"</b> and the density was <b>"</SPAN> <SPAN class="operator token">+</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP13_SQMI <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"</b> sq mi. <br/> <br/>"</SPAN> <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"Percent change is "</SPAN> <SPAN class="operator token">+</SPAN>
            arrow <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"<span style='color: "</SPAN> <SPAN class="operator token">+</SPAN>
            <SPAN class="punctuation token">(</SPAN>pctChange <SPAN class="operator token"><</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">?</SPAN> <SPAN class="string token">"red"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"green"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">";'>"</SPAN> <SPAN class="operator token">+</SPAN>
            pctChange<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"%</span>"</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">return</SPAN> div<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</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

quooston

I do think that the ArcGIS API for JS is super powerful, and the devs have done a great job to make it possible to do almost anything. However, what we need next are a set of abstractions that wrap up some of the inherrent complexity that comes with all that power, that enable us to do some of these simple things easily. Then we will have the best of both worlds.

Leaflet is a great example of such an API, but some of the more complex tasks it falls short on. The evolution of an API should eventually result in easier ways to do things, not just more and more complexity as more power is added. This is one of the hardest things to get right... but we can hope!

Egge-Jan_Pollé

Hi Chris Smith‌,

Yeah, I know what you mean. And I would, like you and probably many others, be very interested in a simple, elegant and smooth solution for hover/tooltips in the ArcGIS API for JavaScript. It does not exist, though, I am afraid.

Via the link below you will find an application which I did build some time ago, just a simple map showing railway stations as blue dots. And when you hover over them their name pops up! Brilliant! That's what I want!

I don't want to click ten times before identifying the correct railway station. I just want to see their name right away when I hover over them. TWIAV - Tips & trucs - Luchtfoto's ProRail (in EPSG:28992)

But yeah, that's not ArcGIS API for JavaScript, it is Leaflet.

And you know, as they state on their website:

Leaflet is designed with simplicity, performance and usability in mind.

BR,

Egge-Jan

ChrisSmith7

Appreciate it Robert, I'll give this a go.

RobertScheitlin__GISP

Chris,

Here is a smooth mouse over example. The big takeaway is to check if you are still over the same graphic in the pointer-move event and if you are then do nothing.

<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 http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=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>PopupTemplate <SPAN class="operator token">-</SPAN> use functions to <SPAN class="keyword token">set</SPAN> content <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>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>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>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> populationChange<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/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/Layer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/widgets/Feature"</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> Layer<SPAN class="punctuation token">,</SPAN> Feature<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">"dark-gray"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="comment token">// Create the MapView</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>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN><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">87</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">34</SPAN><SPAN class="punctuation token">]</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      Layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">fromPortalItem</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
          id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"e8f85b4982a24210b9c8aa20ba4e1bf7"</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="comment token">// add the layer to the map</SPAN>
        layer<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string 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="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</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> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">const</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            geometry<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">,</SPAN>
            popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Mouse over features to show details..."</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">const</SPAN> feature <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Feature</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            graphic<SPAN class="punctuation token">,</SPAN>
            view
          <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>feature<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">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">let</SPAN> highlight<SPAN class="punctuation token">,</SPAN> lResult <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>attributes<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">{</SPAN>NAME<SPAN class="punctuation token">:</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">}</SPAN><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> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator 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="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                results
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">const</SPAN> result <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>lResult<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>NAME <SPAN class="operator token">!==</SPAN> result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>NAME<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                      highlight <SPAN class="operator 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> layerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">highlight</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                      feature<SPAN class="punctuation token">.</SPAN>graphic <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">;</SPAN>
                      lResult <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>graphic<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>
                  highlight <SPAN class="operator 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>
                  feature<SPAN class="punctuation token">.</SPAN>graphic <SPAN class="operator token">=</SPAN> graphic
                <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="punctuation token">;</SPAN>

        <SPAN class="comment token">// Create a new popupTemplate for the layer and</SPAN>
        <SPAN class="comment token">// format the numeric field values using the FieldInfoFormat properties. Call the custom populationChange()</SPAN>
        <SPAN class="comment token">// function to calculate percent change for the county.</SPAN>
        <SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
          title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Population in {NAME}"</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>
          content<SPAN class="punctuation token">:</SPAN> populationChange<SPAN class="punctuation token">,</SPAN>
          fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
              fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP2010"</SPAN><SPAN class="punctuation token">,</SPAN>
              format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP10_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN>
              format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP2013"</SPAN><SPAN class="punctuation token">,</SPAN>
              format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POP13_SQMI"</SPAN><SPAN class="punctuation token">,</SPAN>
              format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</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>

        layer<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> popupTemplate<SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">populationChange</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> div <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> upArrow <SPAN class="operator token">=</SPAN>
            <SPAN class="string token">'<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>'</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> downArrow <SPAN class="operator token">=</SPAN>
            <SPAN class="string token">'<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>'</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// Calculate the population percent change from 2010 to 2013.</SPAN>
          <SPAN class="keyword token">var</SPAN> diff <SPAN class="operator token">=</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2013 <SPAN class="operator token">-</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2010<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> pctChange <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>diff <SPAN class="operator token">*</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2010<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> arrow <SPAN class="operator token">=</SPAN> diff <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">?</SPAN> upArrow <SPAN class="punctuation token">:</SPAN> downArrow<SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// Add green arrow if the percent change is positive and a red arrow for negative percent change.</SPAN>
          div<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN>
            <SPAN class="string token">"As of 2010, the total population in this area was <b>"</SPAN> <SPAN class="operator token">+</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2010 <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"</b> and the density was <b>"</SPAN> <SPAN class="operator token">+</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP10_SQMI <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"</b> sq mi. As of 2013, the total population was <b>"</SPAN> <SPAN class="operator token">+</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP2013 <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"</b> and the density was <b>"</SPAN> <SPAN class="operator token">+</SPAN>
            feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>POP13_SQMI <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"</b> sq mi. <br/> <br/>"</SPAN> <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"Percent change is "</SPAN> <SPAN class="operator token">+</SPAN>
            arrow <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"<span style='color: "</SPAN> <SPAN class="operator token">+</SPAN>
            <SPAN class="punctuation token">(</SPAN>pctChange <SPAN class="operator token"><</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">?</SPAN> <SPAN class="string token">"red"</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"green"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">";'>"</SPAN> <SPAN class="operator token">+</SPAN>
            pctChange<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
            <SPAN class="string token">"%</span>"</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">return</SPAN> div<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

ChrisSmith7

Just from thinking about this logically, I believe we could work-out something where we are testing pre and post move to see if our target changed. If it didn't, keep the graphic. That should help with the symbol flickering, but not the pop-up. I've thought about some ways I'd handle that, in just moving the pop-up instead of closing/re-opening.

But, before reinventing the wheel, I'm hoping someone in the community has some pointers - maybe there is something baked-in I am overlooking! If there isn't, I'd say this would be a good enhancement to add in the future!

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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