topic Re: Pop-up selection issue in ArcGIS JavaScript Maps SDK Questions

Pop-up selection issue

ZacStanley3 — Thu, 03 Oct 2019 20:43:19 GMT

Hi All,

I received some help here a while back on creating up a pop-up and having it zoom to the feature and openwhen clicked on. All of that functionality continues to work. The as a result of this though I can't select that feature again without refreshing the browser window. Is there a JS workaround for this?

Thanks in advance for any help.

-Zac

Re: Pop-up selection issue

RobertScheitlin__GISP — Thu, 03 Oct 2019 20:47:22 GMT

Zac,

Little help can be give without seeing the code.

Re: Pop-up selection issue

ZacStanley3 — Thu, 03 Oct 2019 20:51:05 GMT

apologies!

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

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

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Expand",
"esri/widgets/BasemapGallery",
"esri/widgets/Home",
"esri/widgets/Legend",
], function(Map, MapView, FeatureLayer, Expand, BasemapGallery, Home, Click) {

var map = new Map({
basemap: "topo-vector"
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.6226858,37.9449276],
zoom: 12,
popup: {
dockEnabled: true,
dockOptions: {
// Disables the dock button from the popup
buttonEnabled: false,
// Ignore the default sizes that trigger responsive docking
breakpoint: false,
position: "bottom-right"
}
},
container: "viewDiv"
});

// Define a simple renderer and an image symbol
var trailheadsRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
width: "18px",
height: "18px"
}
}

// Add labels
var trailheadsLabels = {
symbol: {
type: "text",
color: "#000000",
haloColor: "#FFFFFF",
haloSize: "2px",
font: {
size: "10px",
family: "Verlag",
style: "regular",
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.NAME"
}
};

// Add minor trailheads with renderer

// Define a simple renderer and an image symbol
var minortrailheadsRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
width: "9px",
height: "9px"
}
};

var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});

// Create an Expand instance and set the content
// property to the DOM node of the basemap gallery widget
// Use an Esri icon font to represent the content inside
// of the Expand widget

var bgExpand = new Expand({
view: view,
content: basemapGallery
});
// close the expand whenever a basemap is selected
basemapGallery.watch("activeBasemap", function() {
var mobileSize =
view.heightBreakpoint === "xsmall" ||
view.widthBreakpoint === "xsmall";

if (mobileSize) {
bgExpand.collapse();
}
});
// Add the expand instance to the ui

view.ui.add(bgExpand, "top-right");
var homeBtn = new Home({
view: view
});

// Add the home button to the top left corner of the view
view.ui.add(homeBtn, "top-left");
});

view.popup.watch("selectedFeature", function(graphic){
if(graphic.layer === trailheads){
view.popup.triggerAction(0); //This calls the popup Zoom To action
}
});

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

Re: Pop-up selection issue

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:15:41 GMT

Zac,

The issue with selecting a second time is this (line 2 is edited):

      view.popup.watch("selectedFeature", function (graphic) {
        if (graphic && graphic.layer === trailheads) {
          view.popup.triggerAction(0);
        }
      });‍‍‍‍‍

Re: Pop-up selection issue

ZacStanley3 — Mon, 07 Oct 2019 14:57:18 GMT

Thanks Robert -

I modified the code include the 2 ampersand's in the IF statement. The behavior remains unchanged. I still can't select the feature a second time..........any ideas?

Re: Pop-up selection issue

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:15:44 GMT

Zac,

Here is your full code with my changes. I have it working fine on my end.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Expand",
      "esri/widgets/BasemapGallery",
      "esri/widgets/Home"
    ], function (Map, MapView, FeatureLayer, Expand, BasemapGallery, Home) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-122.6226858, 37.9449276],
        zoom: 12,
        popup: {
          dockEnabled: true,
          dockOptions: {
            // Disables the dock button from the popup
            buttonEnabled: false,
            // Ignore the default sizes that trigger responsive docking
            breakpoint: false,
            position: "bottom-right"
          }
        },
        container: "viewDiv"
      });


      // Define a simple renderer and an image symbol
      var trailheadsRenderer = {
        type: "simple",
        symbol: {
          type: "picture-marker",
          url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          width: "18px",
          height: "18px"
        }
      }

      // Add labels
      var trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#000000",
          haloColor: "#FFFFFF",
          haloSize: "2px",
          font: {
            size: "10px",
            family: "Arial",
            style: "normal",
            weight: "bold"
          }
        },
        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.NAME"
        }
      };

      // Add minor trailheads with renderer

      // Define a simple renderer and an image symbol
      var minortrailheadsRenderer = {
        type: "simple",
        symbol: {
          type: "picture-marker",
          url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          width: "9px",
          height: "9px"
        }
      };

      var minortrailheads = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/OneTam_MinorTrailheads_pt/FeatureServer/1",
        renderer: minortrailheadsRenderer
      });
      // Add the layer
      map.add(minortrailheads);


      // Add all trails no use type symbology
      var TrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "solid",
          color: "#2F5279",
          width: "0.7px"
        }
      };

      var Trails = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
        renderer: TrailsRenderer,
      });

      Trails.minScale = 150000;
      Trails.maxScale = 37000;
      map.add(Trails, 0);

      // Add featured hikes with special symbology
      var FeaturedHikesRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "solid",
          color: "#f6c65b",
          width: "6px"
        }
      };

      var FeaturedHikes = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/MtTamFeaturedTrails/FeatureServer/6",
        renderer: FeaturedHikesRenderer,
      });

      FeaturedHikes.minScale = 37000;
      map.add(FeaturedHikes, 0);

      // Add hiking only trails
      var hikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#2F5279",
          width: "1px"
        }
      };

      var hikeTrails = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
        renderer: hikeTrailsRenderer,
        definitionExpression: "TRLUSE = 'Hiker/Pedestrian'"
      });

      hikeTrails.minScale = 37000;
      map.add(hikeTrails, 0);

      // Add hiking/biking trails
      var bikehikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "long-dash",
          color: "#2F5279",
          width: "1px"
        }
      };

      var bikehikeTrails = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
        renderer: bikehikeTrailsRenderer,
        definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Bicycle'"
      });
      bikehikeTrails.minScale = 37000;
      map.add(bikehikeTrails, 0);

      var horsehikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "dash-dot",
          color: "#2F5279",
          width: ".1px"
        }
      };

      var horsehikeTrails = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
        renderer: horsehikeTrailsRenderer,
        definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle'"
      });
      horsehikeTrails.minScale = 37000;
      map.add(horsehikeTrails, 0);

      var muTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dash",
          color: "#2F5279",
          width: "1px"
        }
      };

      var muTrails = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
        renderer: muTrailsRenderer,
        definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle | Bicycle'"
      });
      muTrails.minScale = 37000;
      map.add(muTrails, 0);

      // Define a simple value renderer and symbols
      var onetamareaRenderer = {
        type: "simple",
        symbol: {
          type: "simple-fill",
          color: "#D5E5C8",
          outline: {
            width: 2,
            color: "#4E663A"
          }
        }
      };

      var onetamLayer = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/One_Tam_Area_of_Interest/FeatureServer/0",
        renderer: onetamareaRenderer,
        opacity: 0.5
      });

      map.add(onetamLayer, 0)

      // Define a popup for Trailheads
      var popupTrailheads = {
        "title": "Featured Hike",
        "content": "<b>West Peak Loop</b><br>{HikeDesc}{HikeDesc2}{HikeDesc3}<br><br><b>Difficulty:</b> {Difficulty}<br><b>Length: </b>{Length}<br><br><b>Amenities: </b>{Amenities}<br><br><b>Get the Latest:</b> {TheLatest2}"
      }

      // Create the layer and set the popup
      var trailheads = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/One_Tam_Featured_Hikes_Trailheads/FeatureServer/0",
        outFields: ["HikeDesc", "HikeDesc2", "HikeDesc3", "Difficulty", "Length", "Amenities", "TheLatest2"],
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels],
        popupTemplate: popupTrailheads
      });

      // Add the layer
      map.add(trailheads);

      //Click on feature zooms to it
      view.popup.watch("selectedFeature", function (graphic) {
        if (graphic && graphic.layer === trailheads) {
          view.popup.triggerAction(0);
        }
      });

      // Create a BasemapGallery widget instance and set
      // its container to a div element

      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
      });

      // Create an Expand instance and set the content
      // property to the DOM node of the basemap gallery widget
      // Use an Esri icon font to represent the content inside
      // of the Expand widget

      var bgExpand = new Expand({
        view: view,
        content: basemapGallery
      });
      // close the expand whenever a basemap is selected
      basemapGallery.watch("activeBasemap", function () {
        var mobileSize =
          view.heightBreakpoint === "xsmall" ||
          view.widthBreakpoint === "xsmall";

        if (mobileSize) {
          bgExpand.collapse();
        }
      });
      // Add the expand instance to the ui

      view.ui.add(bgExpand, "top-right");
      var homeBtn = new Home({
        view: view
      });

      // Add the home button to the top left corner of the view
      view.ui.add(homeBtn, "top-left");

    });
  </script>
</head>

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

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

Re: Pop-up selection issue

ZacStanley3 — Mon, 07 Oct 2019 15:15:21 GMT

Thanks Robert - not sure what is different but it now works. Can you tell me why the "&&" makes the behavior change?

Re: Pop-up selection issue

RobertScheitlin__GISP — Mon, 07 Oct 2019 15:29:21 GMT

Zac,

Because the code is check for the existence of graphic before it checks for the graphics layer property. The error you were getting was that it could not find a layer property on a null item, meaning that graphic was null.

Re: Pop-up selection issue

ZacStanley3 — Mon, 07 Oct 2019 15:35:58 GMT

That's clear - thanks again!