Community
Select to view content in your preferred language

Pop-up selection issue

1368
8
Jump to solution
10-03-2019 01:43 PM
ZacStanley3
by
Occasional Contributor
‎10-03-2019 01:43 PM

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
by MVP Emeritus
MVP Emeritus
‎10-07-2019 08:09 AM

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
by MVP Emeritus
MVP Emeritus
‎10-03-2019 01:47 PM

Zac,

   Little help can be give without seeing the code.

0 Kudos
ZacStanley3
by
Occasional Contributor
‎10-03-2019 01:51 PM

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
by MVP Emeritus
MVP Emeritus
‎10-03-2019 02:30 PM

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
by
Occasional Contributor
‎10-07-2019 07:57 AM

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
by MVP Emeritus
MVP Emeritus
‎10-07-2019 08:09 AM

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
by
Occasional Contributor
‎10-07-2019 08:15 AM

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
by MVP Emeritus
MVP Emeritus
‎10-07-2019 08:29 AM

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
by
Occasional Contributor
‎10-07-2019 08:35 AM

That's clear - thanks again!

0 Kudos