topic Re: Zoom to selected feature using JavaScript in ArcGIS JavaScript Maps SDK Questions

Zoom to selected feature using JavaScript

ZacStanley3 — Tue, 27 Aug 2019 22:31:31 GMT

Hello-

I'm working on a fairly basic web map with points and lines. I would like be able to click on a point and zoom directly to it in one step while leaving the popup open. It seems this is possible but I haven't seen a full code sample that I have been able to incorporate into mine. Any and all help appreciated. Thanks! Codepen link: https://codepen.io/zstanley/pen/vYBKXQb and full code below.

<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, Click) {

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

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/OneTamTrails/FeatureServer/0",
renderer: bikehikeTrailsRenderer,
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Bicycle'"
});

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/OneTamTrails/FeatureServer/0",
renderer: horsehikeTrailsRenderer,
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle'"
});

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/OneTamTrails/FeatureServer/0",
renderer: muTrailsRenderer,
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle | Bicycle'"
});

map.add(muTrails, 0);

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

var onetamLayer = new FeatureLayer ({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/One_Tam_Area_of_Interest/FeatureServer/15",
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> {TheLatest}"
}

// 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", "TheLatest"],
renderer: trailheadsRenderer,
labelingInfo: [trailheadsLabels],
popupTemplate: popupTrailheads
});

// Add the layer
map.add(trailheads);
// 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");

});

Re: Zoom to selected feature using JavaScript

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:21:08 GMT

Zac,

In the 4.x API there is no on click events fired for a feature layer the view is the object that has a click event. But this is actually the code you need to add to have the map zoom to the trail head immediately on click.

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

Re: Zoom to selected feature using JavaScript

ZacStanley3 — Wed, 28 Aug 2019 13:58:27 GMT

Thanks Robert, very helpful.

Do I need to add a function or require statement to get this work? Can you help me put it in context with the rest of my code?

Re: Zoom to selected feature using JavaScript

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:21:11 GMT

Zac,

Here it is added to your code.

<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, Click) {

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

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-122.6226858, 37.9449276],
        zoom: 12
      });

      // 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: "normal",
            weight: "bold"
          }
        },
        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.NAME"
        }
      };

      // 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/OneTamTrails/FeatureServer/0",
        renderer: hikeTrailsRenderer,
        definitionExpression: "TRLUSE = 'Hiker/Pedestrian'"
      });

      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/OneTamTrails/FeatureServer/0",
        renderer: bikehikeTrailsRenderer,
        definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Bicycle'"
      });

      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/OneTamTrails/FeatureServer/0",
        renderer: horsehikeTrailsRenderer,
        definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle'"
      });

      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/OneTamTrails/FeatureServer/0",
        renderer: muTrailsRenderer,
        definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle | Bicycle'"
      });

      map.add(muTrails, 0);

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

      var onetamLayer = new FeatureLayer({
        url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/One_Tam_Area_of_Interest/FeatureServer/15",
        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);

      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");
    });
  </script>
</head>

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

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

Re: Zoom to selected feature using JavaScript

ZacStanley3 — Wed, 28 Aug 2019 14:42:29 GMT

You've made my day, sir. Thank you!

Re: Zoom to selected feature using JavaScript

RobertScheitlin__GISP — Wed, 28 Aug 2019 14:53:31 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Zoom to selected feature using JavaScript

SoujanyaPisipati — Mon, 19 Jun 2023 09:34:40 GMT

Thank you, This was super helpful!