Zoom to a feature on mouse click in Web AppBuilder

[KrystalPhaneuf3]

I'm trying to figure out how to alter the javascript code in a web appbuilder app to make is so when the user clicks on a feature it zooms to that feature immediately without the popup.  I found this article but I'm not sure where or how I would add the code to the web app scripts.  Any ideas?

https://community.esri.com/thread/177400#comments 

[RobertScheitlin__GISP · Accepted solution]

Krystal,

  It would go in the jimu/MapManager.js in the _show2DWebMap function (lines 78 - 89 added):

      _show2DWebMap: function(appConfig) {
        //should use appConfig instead of this.appConfig, because appConfig is new.
        // if (appConfig.portalUrl) {
        //   var url = portalUrlUtils.getStandardPortalUrl(appConfig.portalUrl);
        //   agolUtils.arcgisUrl = url + "/sharing/content/items/";
        // }
        if(!appConfig.map.mapOptions){
          appConfig.map.mapOptions = {};
        }
        var mapOptions = this._processMapOptions(appConfig.map.mapOptions) || {};
        mapOptions.isZoomSlider = false;

        var webMapPortalUrl = appConfig.map.portalUrl;
        var webMapItemId = appConfig.map.itemId;
        var webMapOptions = {
          mapOptions: mapOptions,
          bingMapsKey: appConfig.bingMapsKey,
          usePopupManager: true
        };

        if(!window.isBuilder && !appConfig.mode && appConfig.map.appProxy &&
            appConfig.map.appProxy.mapItemId === appConfig.map.itemId) {
          var layerMixins = [];
          array.forEach(appConfig.map.appProxy.proxyItems, function(proxyItem){
            if (proxyItem.useProxy && proxyItem.proxyUrl) {
              layerMixins.push({
                url: proxyItem.sourceUrl,
                mixin: {
                  url: proxyItem.proxyUrl
                }
              });
            }
          });

          if(layerMixins.length > 0) {
            webMapOptions.layerMixins = layerMixins;
          }
        }

        var mapDeferred = this._createWebMapRaw(webMapPortalUrl, webMapItemId, this.mapDivId, webMapOptions);

        mapDeferred.then(lang.hitch(this, function(response) {
          var map = response.map;

          //hide the default zoom slider
          map.hideZoomSlider();

          // set default size of infoWindow.
          map.infoWindow.resize(270, 316);
          //var extent;
          map.itemId = appConfig.map.itemId;
          map.itemInfo = response.itemInfo;
          map.webMapResponse = response;
          // enable snapping
          var options = {
            snapKey: keys.copyKey
          };
          map.enableSnapping(options);

          html.setStyle(map.root, 'zIndex', 0);

          map._initialExtent = map.extent;

          this.layerInfosObj = LayerInfos.getInstanceSyncForInit(map, map.itemInfo);
          if(appConfig.map.mapRefreshInterval && !appConfig.map.mapRefreshInterval.useWebMapRefreshInterval){
            this._updateRefreshInterval(map.itemInfo.itemData, this.layerInfosObj, appConfig.map.mapRefreshInterval);
          }
          // this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
          //   layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
          //     if(layerObject.url && layerObject.declaredClass === "esri.layers.FeatureLayer"){
          //       this._handleRefreshLayer(layerObject);
          //     }
          //   }), lang.hitch(this, function(err){
          //     console.error("can't get layerObject", err);
          //   }));
          // }));

          this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
            layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
              console.info(layerObject);
              if(layerObject.name === "Highway - Road Signs"){
                layerObject.on("click", lang.hitch(this, function(evt){
                  map.centerAndZoom(evt.mapPoint, 4);
                }));
              }
            }), lang.hitch(this, function(err){
              console.error("can't get layerObject", err);
            }));
          }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
.....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[KrystalPhaneuf3]

Hi Robert,

I had to migrate this over to 10.6 and the .js files seem to be different.  Any idea where I would add this code into the 10.6 web app files?

Thanks!

Krystal

[RobertScheitlin__GISP]

Krystal,

   The function is still basically the same and though line numbers have moved just look of the similar block of code and paste those new lines in. It just has to be after this line:

this.layerInfosObj = LayerInfos.getInstanceSyncForInit(map, map.itemInfo);

[AnudeepGorantla]

Instead of setting it to the some fixed value van we set the zoom level  to  tile extent

[AnudeepGorantla]

This One is only working when there is only one layer. If I have multiple layers its not working. can you provide a solution to this problem.

[AnudeepGorantla]

This One is only working when there is only one layer. If I have multiple layers its not working. can you provide a solution to this problem.

[RobertScheitlin__GISP]

If you need multiple layers then you just need to adjust the if statement.

if(layerObject.name === "Highway - Road Signs"){

[TRDSYSTEMS]

Robert,

I made the change to no avail. Could there be something else that was overlooked? Here is the updated code:

1. _show2DWebMap: function(appConfig) {
2. //should use appConfig instead of this.appConfig, because appConfig is new.
3. // if (appConfig.portalUrl) {
4. // var url = portalUrlUtils.getStandardPortalUrl(appConfig.portalUrl);
5. // agolUtils.arcgisUrl = url + "/sharing/content/items/";
6. // }
7. if(!appConfig.map.mapOptions){
8. appConfig.map.mapOptions = {};
9. }
10. var mapOptions = this._processMapOptions(appConfig.map.mapOptions) || {};
11. mapOptions.isZoomSlider = false;
12.
13. var webMapPortalUrl = appConfig.map.portalUrl;
14. var webMapItemId = appConfig.map.itemId;
15. var webMapOptions = {
16. mapOptions: mapOptions,
17. bingMapsKey: appConfig.bingMapsKey,
18. usePopupManager: true
19. };
20.
21. if(!window.isBuilder && !appConfig.mode && appConfig.map.appProxy &&
22. appConfig.map.appProxy.mapItemId === appConfig.map.itemId) {
23. var layerMixins = [];
24. array.forEach(appConfig.map.appProxy.proxyItems, function(proxyItem){
25. if (proxyItem.useProxy && proxyItem.proxyUrl) {
26. layerMixins.push({
27. url: proxyItem.sourceUrl,
28. mixin: {
29. url: proxyItem.proxyUrl
30. }
31. });
32. }
33. });
34.
35. if(layerMixins.length > 0) {
36. webMapOptions.layerMixins = layerMixins;
37. }
38. }
39.
40. var mapDeferred = this._createWebMapRaw(webMapPortalUrl, webMapItemId, this.mapDivId, webMapOptions);
41.
42. mapDeferred.then(lang.hitch(this, function(response) {
43. var map = response.map;
44.
45. //hide the default zoom slider
46. map.hideZoomSlider();
47.
48. // set default size of infoWindow.
49. map.infoWindow.resize(270, 316);
50. //var extent;
51. map.itemId = appConfig.map.itemId;
52. map.itemInfo = response.itemInfo;
53. map.webMapResponse = response;
54. // enable snapping
55. var options = {
56. snapKey: keys.copyKey
57. };
58. map.enableSnapping(options);
59.
60. html.setStyle(map.root, 'zIndex', 0);
61.
62. map._initialExtent = map.extent;
63.
64. this.layerInfosObj = LayerInfos.getInstanceSyncForInit(map, map.itemInfo);
65. if(appConfig.map.mapRefreshInterval && !appConfig.map.mapRefreshInterval.useWebMapRefreshInterval){
66. this._updateRefreshInterval(map.itemInfo.itemData, this.layerInfosObj, appConfig.map.mapRefreshInterval);
67. }
68. // this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
69. // layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
70. // if(layerObject.url && layerObject.declaredClass === "esri.layers.FeatureLayer"){
71. // this._handleRefreshLayer(layerObject);
72. // }
73. // }), lang.hitch(this, function(err){
74. // console.error("can't get layerObject", err);
75. // }));
76. // }));
77.
78. this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
79. layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
80. console.info(layerObject);
81. if(layerObject.name === "Plants - Test"){
82. layerObject.on("click", lang.hitch(this, function(evt){
83. map.centerAndZoom(evt.mapPoint, 4);
84. }));
85. }
86. }), lang.hitch(this, function(err){
87. console.error("can't get layerObject", err);
88. }));
89. }));

[RobertScheitlin__GISP]

Troy,

   Look in your browsers web console and see if there is any errors shown.