Zoom to a feature on mouse click in Web AppBuilder

4602
24
Jump to solution
10-10-2017 01:04 PM
KrystalPhaneuf3
New Contributor III

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 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

24 Replies
RobertScheitlin__GISP
MVP Emeritus

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

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

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

0 Kudos
AnudeepGorantla
New Contributor

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.

0 Kudos
AnudeepGorantla
New Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

if(layerObject.name === "Highway - Road Signs"){
0 Kudos
TRDSYSTEMS
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Troy,

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

0 Kudos