Pop-up selection issue

498
8
Jump to solution
10-03-2019 01:43 PM
ZacStanley3
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Zac,

   Little help can be give without seeing the code.

0 Kudos
ZacStanley3
New Contributor III

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 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.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");
});


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>

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
        }
      });
ZacStanley3
New Contributor III

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
ZacStanley3
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
ZacStanley3
New Contributor III

That's clear - thanks again!

0 Kudos