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

Feature Layer Hover to open Popup Template - ArcGIS JS 4.16

GeorgeAbraham

Hi Robert Scheitlin, GISP / Ken Buja,

Similar to this ArcGIS API for JavaScript Sandbox how can I achieve the same on the latest JS 4.16.

Basically I am manually adding a FeatureLayer and also set a popupTemplate to it, however, I want the Popup Template to open on mouse hover over the Feature Layer and not on click.

I tried layer.on("mouse-over", function (evt) {}) and also view.on("pointer-move", function (evt) {}), but the code inside is not triggering.

Libraries added - dojo/on, dojo/domReady!

タグ付きの投稿をもっと見る

Accepted answers

kenbuja

This is one way to do it, updating an example Robert Scheitlin, GISP‌ created for another question

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="[Highlight features with hover events - 4.11]">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the view-hittest sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/view-hittest/index.html
  -->
  <title>Highlight features with hover events - 4.11</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/dijit/themes/claro/claro.css">
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    var dialog, dRenderer;
    require([
      "esri/core/watchUtils",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/renderers/UniqueValueRenderer",
      "esri/symbols/SimpleLineSymbol",
      "dojo/dom",
      "dojo/dom-style",
      "dijit/popup",
      "dojo/domReady!"
    ], function (
      watchUtils,
      Map,
      MapView,
      FeatureLayer,
      UniqueValueRenderer,
      SimpleLineSymbol,
      dom,
      domStyle,
      dijitPopup
    ) {

      var layer = new FeatureLayer({
        url: "https://services.arcgis.com/8Pc9XBTAsYuxx9Ny/arcgis/rest/services/BuildingFootprint2D_gdb/FeatureServer/0",
        outFields: ["*"]
      });

      var map = new Map({
        basemap: "dark-gray",
        layers: [layer]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-80.135073, 25.774479],
        zoom: 16
      });

      function changeCursor(response) {
        if (response.results.length > 0) {
          document.getElementById("viewDiv").style.cursor = "pointer";
        } else {
          document.getElementById("viewDiv").style.cursor = "default";
        }
      }

      function getGraphics(response) {
        view.graphics.removeAll();
        if (response.results.length > 0) {
          var graphic = response.results[0].graphic;
          graphic.symbol = {
            type: "simple-fill",
            style: "none",
            outline: { // autocasts as new SimpleLineSymbol()
              color: "orange",
              width: 1
            }
          }
          view.graphics.add(graphic);
        }
      }

      function showPopup(response) {
        view.popup.close();
        if (response.results.length > 0) {
          view.popup.open({
            title: 'Building ID: ' + response.results[0].graphic.attributes.UNIQUEID,
            content: 'Year Updated: ' + response.results[0].graphic.attributes.YEARUPDATE,
            location: response.results[0].graphic.geometry.centroid
          });
        }
      }

      view.when(function () {
        view.whenLayerView(layer).then(function (lview) {
          watchUtils.whenFalseOnce(lview, "updating", function () {
            // Set up a click event handler and retrieve the screen x, y coordinates
            view.on("pointer-move", function (evt) {
              var screenPoint = {
                x: evt.x,
                y: evt.y
              };

              // the hitTest() checks to see if any graphics in the view
              // intersect the given screen x, y coordinates
              view.hitTest(screenPoint)
                .then(function (response) {
                  changeCursor(response);
                  getGraphics(response);
                  showPopup(response);
                });
            });
          });
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

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

All comments

kenbuja

This is one way to do it, updating an example Robert Scheitlin, GISP‌ created for another question

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="[Highlight features with hover events - 4.11]">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the view-hittest sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/view-hittest/index.html
  -->
  <title>Highlight features with hover events - 4.11</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/dijit/themes/claro/claro.css">
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    var dialog, dRenderer;
    require([
      "esri/core/watchUtils",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/renderers/UniqueValueRenderer",
      "esri/symbols/SimpleLineSymbol",
      "dojo/dom",
      "dojo/dom-style",
      "dijit/popup",
      "dojo/domReady!"
    ], function (
      watchUtils,
      Map,
      MapView,
      FeatureLayer,
      UniqueValueRenderer,
      SimpleLineSymbol,
      dom,
      domStyle,
      dijitPopup
    ) {

      var layer = new FeatureLayer({
        url: "https://services.arcgis.com/8Pc9XBTAsYuxx9Ny/arcgis/rest/services/BuildingFootprint2D_gdb/FeatureServer/0",
        outFields: ["*"]
      });

      var map = new Map({
        basemap: "dark-gray",
        layers: [layer]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-80.135073, 25.774479],
        zoom: 16
      });

      function changeCursor(response) {
        if (response.results.length > 0) {
          document.getElementById("viewDiv").style.cursor = "pointer";
        } else {
          document.getElementById("viewDiv").style.cursor = "default";
        }
      }

      function getGraphics(response) {
        view.graphics.removeAll();
        if (response.results.length > 0) {
          var graphic = response.results[0].graphic;
          graphic.symbol = {
            type: "simple-fill",
            style: "none",
            outline: { // autocasts as new SimpleLineSymbol()
              color: "orange",
              width: 1
            }
          }
          view.graphics.add(graphic);
        }
      }

      function showPopup(response) {
        view.popup.close();
        if (response.results.length > 0) {
          view.popup.open({
            title: 'Building ID: ' + response.results[0].graphic.attributes.UNIQUEID,
            content: 'Year Updated: ' + response.results[0].graphic.attributes.YEARUPDATE,
            location: response.results[0].graphic.geometry.centroid
          });
        }
      }

      view.when(function () {
        view.whenLayerView(layer).then(function (lview) {
          watchUtils.whenFalseOnce(lview, "updating", function () {
            // Set up a click event handler and retrieve the screen x, y coordinates
            view.on("pointer-move", function (evt) {
              var screenPoint = {
                x: evt.x,
                y: evt.y
              };

              // the hitTest() checks to see if any graphics in the view
              // intersect the given screen x, y coordinates
              view.hitTest(screenPoint)
                .then(function (response) {
                  changeCursor(response);
                  getGraphics(response);
                  showPopup(response);
                });
            });
          });
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

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

GeorgeAbraham

Hi Ken Buja,

Thanks a lot for this solution - this helps a lot.

I had to make some modifications to suit my code since the pointer-move is at the view level, so filtering out in hitTest if its my layer of interest, also didn't need setCursor and getGraphics method etc.

I had one concern - the way the popup comes and goes, like even if I am on the same layer, every mouse movement its opening the new popup and closing the old even if I am on the same layer.

I tried various approaches like if the OBJECTID of the feature layer is same where I am hovering to, then don't call the popup, etc, but the flicker is there on opening the popup.

RobertScheitlin__GISP

George,

Here is some code for smooth hover popups.

<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>Smooth Hover Popup<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="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> <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>
          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> 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>
                      view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                        features<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        location<SPAN class="punctuation token">:</SPAN> result<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>center
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><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>
                  view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</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="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>

GeorgeAbraham

Thanks a lot Robert Scheitlin, GISP, this looks good, implementing it and checking, but the sample is working smooth.

I think the issue was with how I was calling and the structuring.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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