Change geometry in view.popup.watch()

JaredPilbeam2 · ‎08-17-2018

I'm attempting to create a simple app that has a point featurelayer with some attributes. When selecting a point to view its popup info, how can I also make it become highlighted?

This link to sample code does something similar in that it draws a border on a polygon:

PopupTemplate with promise | ArcGIS API for JavaScript 4.8

This sample code does basically what I want in that when you select a point it becomes highlighted and has a popup:

CSVLayer - Project points on the fly | ArcGIS API for JavaScript 4.8

Here's what I have so far:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to Popups</title>
<style>
  html, body, #viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  }
  #layerToggle {
  top: 20px;
  right: 20px;
  position: absolute;
  z-index: 99;
  background-color: white;
  border-radius: 8px;
  padding: 10px;
  opacity: 0.75;
  }
</style>

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

 <script>
 require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer", //Require the FeatureLayer module
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], 
  function(
    Map, MapView, FeatureLayer, dom, on
  ) {

    var warming = new FeatureLayer({
      url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_...",
      id: "warming",
      minScale: 5000000
    });
   
   var boundary = new FeatureLayer({
     url:
"http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Boundary/FeatureServer/...",
     id: "boundary",
     minScale: 5000000
   });
      var map = new Map({
      basemap: "streets-night-vector",
      layers: [warming, boundary]
    });
    var view = new MapView({
      container: "viewDiv",
      map: map,
      scale: 500000,
      center: [-88, 41.5]
    });
      var template = { // autocasts as new PopupTemplate()
        title: "{FACILITY_NAME}",
        content: [{
          type: "fields",
          fieldInfos: [{
            fieldName: "FACILITY_TYPE",
            label: "Facility Type",
            visible: true,
          }, {
            fieldName: "ADDRESS",
            label: "Address",
            visible: true,
          }, {
            fieldName: "PHONE_NUMBER",
            label: "Phone",
            visible: true,
          }, {
            fieldName: "HOURS",
            label: "Hours",
            visible: true,
          }]
        }]
      };
        var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_...",
        outFields: ["*"],
        popupTemplate: template,
        dockEnabled: true,
      });
      map.add(featureLayer);
    }); 

</script>
</head>
<body>
  <div id="viewDiv"></div>
  </span>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And here is a seemingly relevant snippet from line 137 of the first sample code that I can't properly modify:

        view.popup.watch("selectedFeature", function(e) {
          view.graphics.removeAll();
          if (e && e.geometry) {
            view.graphics.add(new Graphic({
              geometry: e.geometry,
              symbol: {
                type: "simple-fill",
                style: "none",
                outline: {
                  color: "#6600FF",
                  width: 2
                }
              }
            }));
          }
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎08-17-2018

Jared,

Here it is working:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Intro to Popups</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="http://js.arcgis.com/4.8/esri/css/main.css">
  <script src="http://js.arcgis.com/4.8/"></script>

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer", //Require the FeatureLayer module
        "esri/Graphic",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ],
      function(
        Map, MapView, FeatureLayer, Graphic, dom, on
      ) {

        var warming = new FeatureLayer({
          url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_C...",
          id: "warming",
          minScale: 5000000
        });

        var boundary = new FeatureLayer({
          url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Boundary/FeatureServer/...",
          id: "boundary",
          minScale: 5000000
        });
        var map = new Map({
          basemap: "streets-night-vector",
          layers: [warming, boundary]
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 500000,
          center: [-88, 41.5]
        });

        var template = { // autocasts as new PopupTemplate()
          title: "{FACILITY_NAME}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "FACILITY_TYPE",
              label: "Facility Type",
              visible: true,
            }, {
              fieldName: "ADDRESS",
              label: "Address",
              visible: true,
            }, {
              fieldName: "PHONE_NUMBER",
              label: "Phone",
              visible: true,
            }, {
              fieldName: "HOURS",
              label: "Hours",
              visible: true,
            }]
          }]
        };

        var featureLayer = new FeatureLayer({
          url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_C...",
          outFields: ["*"],
          popupTemplate: template,
          dockEnabled: true,
        });
        
        map.add(featureLayer);

        view.popup.watch("selectedFeature", function(e) {
          view.graphics.removeAll();
          if (e && e.geometry) {
            view.graphics.add(new Graphic({
              geometry: e.geometry,
              symbol: {
                type: "simple-marker",
                style: "square",
                size: 12,
                outline: {
                  color: "#6600FF",
                  width: 2
                }
              }
            }));
          }
        });
      });
  </script>
</head>

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

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎08-17-2018

Jared,

Here it is working:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Intro to Popups</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="http://js.arcgis.com/4.8/esri/css/main.css">
  <script src="http://js.arcgis.com/4.8/"></script>

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer", //Require the FeatureLayer module
        "esri/Graphic",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ],
      function(
        Map, MapView, FeatureLayer, Graphic, dom, on
      ) {

        var warming = new FeatureLayer({
          url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_C...",
          id: "warming",
          minScale: 5000000
        });

        var boundary = new FeatureLayer({
          url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Boundary/FeatureServer/...",
          id: "boundary",
          minScale: 5000000
        });
        var map = new Map({
          basemap: "streets-night-vector",
          layers: [warming, boundary]
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 500000,
          center: [-88, 41.5]
        });

        var template = { // autocasts as new PopupTemplate()
          title: "{FACILITY_NAME}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "FACILITY_TYPE",
              label: "Facility Type",
              visible: true,
            }, {
              fieldName: "ADDRESS",
              label: "Address",
              visible: true,
            }, {
              fieldName: "PHONE_NUMBER",
              label: "Phone",
              visible: true,
            }, {
              fieldName: "HOURS",
              label: "Hours",
              visible: true,
            }]
          }]
        };

        var featureLayer = new FeatureLayer({
          url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_C...",
          outFields: ["*"],
          popupTemplate: template,
          dockEnabled: true,
        });
        
        map.add(featureLayer);

        view.popup.watch("selectedFeature", function(e) {
          view.graphics.removeAll();
          if (e && e.geometry) {
            view.graphics.add(new Graphic({
              geometry: e.geometry,
              symbol: {
                type: "simple-marker",
                style: "square",
                size: 12,
                outline: {
                  color: "#6600FF",
                  width: 2
                }
              }
            }));
          }
        });
      });
  </script>
</head>

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

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JaredPilbeam2 · ‎08-17-2018

Thanks Robert!