topic Re: Zoom to a feature on mouse click in Web AppBuilder in Web AppBuilder Custom Widgets Questions

Zoom to a feature on mouse click in Web AppBuilder

KrystalPhaneuf3 — Tue, 10 Oct 2017 20:04:12 GMT

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

Re: Zoom to a feature on mouse click in Web AppBuilder

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:43:47 GMT

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

Re: Zoom to a feature on mouse click in Web AppBuilder

KrystalPhaneuf3 — Wed, 11 Oct 2017 17:26:11 GMT

Awesome! Thank you so much Robert. I had to change the zoom level to 16 but that worked perfectly.

Re: Zoom to a feature on mouse click in Web AppBuilder

KrystalPhaneuf3 — Fri, 20 Apr 2018 01:00:44 GMT

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

Re: Zoom to a feature on mouse click in Web AppBuilder

RobertScheitlin__GISP — Fri, 20 Apr 2018 15:42:18 GMT

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

Re: Zoom to a feature on mouse click in Web AppBuilder

AnudeepGorantla — Thu, 04 Oct 2018 20:34:52 GMT

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

Re: Zoom to a feature on mouse click in Web AppBuilder

AnudeepGorantla — Mon, 08 Oct 2018 16:01:49 GMT

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.

Re: Zoom to a feature on mouse click in Web AppBuilder

AnudeepGorantla — Mon, 08 Oct 2018 19:14:27 GMT

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.

Re: Zoom to a feature on mouse click in Web AppBuilder

RobertScheitlin__GISP — Mon, 08 Oct 2018 21:39:13 GMT

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

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

Re: Zoom to a feature on mouse click in Web AppBuilder

TroyDawson — Wed, 03 Apr 2019 14:43:46 GMT

Greetings Robert,

I have copied your code above to no avail. Perhaps I over looked an important step?

I created a sample map (plants) with some sample points: https://www.trdsysmapping.com/Plant/

Here is the code:

12. var webMapPortalUrl = appConfig.map.portalUrl;
13. var webMapItemId = appConfig.map.itemId;
14. var webMapOptions = {
15. mapOptions: mapOptions,
16. bingMapsKey: appConfig.bingMapsKey,
17. usePopupManager: true
18. };

19. if(!window.isBuilder && !appConfig.mode && appConfig.map.appProxy &&
20. appConfig.map.appProxy.mapItemId === appConfig.map.itemId) {
21. var layerMixins = [];
22. array.forEach(appConfig.map.appProxy.proxyItems, function(proxyItem){
23. if (proxyItem.useProxy && proxyItem.proxyUrl) {
24. layerMixins.push({
a. url: proxyItem.sourceUrl,
b. mixin: {
c. url: proxyItem.proxyUrl
d. }
25. });
26. }
27. });

28. if(layerMixins.length > 0) {
29. webMapOptions.layerMixins = layerMixins;
30. }
31. }

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

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

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

37. // set default size of infoWindow.
38. map.infoWindow.resize(270, 316);
39. //var extent;
40. map.itemId = appConfig.map.itemId;
41. map.itemInfo = response.itemInfo;
42. map.webMapResponse = response;
43. // enable snapping
44. var options = {
45. snapKey: keys.copyKey
46. };
47. map.enableSnapping(options);

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

49. map._initialExtent = map.extent;

50. this.layerInfosObj = LayerInfos.getInstanceSyncForInit(map, map.itemInfo);
51. if(appConfig.map.mapRefreshInterval && !appConfig.map.mapRefreshInterval.useWebMapRefreshInterval){
52. this._updateRefreshInterval(map.itemInfo.itemData, this.layerInfosObj, appConfig.map.mapRefreshInterval);
53. }
54. // this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
55. // layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
56. // if(layerObject.url && layerObject.declaredClass === "esri.layers.FeatureLayer"){
57. // this._handleRefreshLayer(layerObject);
58. // }
59. // }), lang.hitch(this, function(err){
60. // console.error("can't get layerObject", err);
61. // }));
62. // }));

63. this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
64. layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
65. console.info(layerObject);
66. if(layerObject.name === "Highway - Road Signs"){
a. layerObject.on("click", lang.hitch(this, function(evt){
b. map.centerAndZoom(evt.mapPoint, 4);
c. }));
67. }
68. }), lang.hitch(this, function(err){
69. console.error("can't get layerObject", err);
70. }));
71. }));

Please advise.

Thanks in advance

Re: Zoom to a feature on mouse click in Web AppBuilder

RobertScheitlin__GISP — Wed, 03 Apr 2019 15:24:26 GMT

Troy,

I do not see where you change the code to look for a layer name in your app...

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

I.e

if(layerObject.name === "Plants - Test"){‍‍

Re: Zoom to a feature on mouse click in Web AppBuilder

TRDSYSTEMS — Sun, 07 Apr 2019 00:24:45 GMT

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

Re: Zoom to a feature on mouse click in Web AppBuilder

RobertScheitlin__GISP — Sun, 07 Apr 2019 21:06:49 GMT

Troy,

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

Re: Zoom to a feature on mouse click in Web AppBuilder

TRDSYSTEMS — Mon, 08 Apr 2019 13:51:09 GMT

Robert,

You were right, there appears to be an error in the console (see attached). Can you please advise on how to fix this.

Re: Zoom to a feature on mouse click in Web AppBuilder

RobertScheitlin__GISP — Mon, 08 Apr 2019 14:11:51 GMT

The layer has to be a FeatureLayer and not a map service that has many layers

Re: Zoom to a feature on mouse click in Web AppBuilder

TRDSYSTEMS — Mon, 08 Apr 2019 14:35:39 GMT

Thanks for your prompt replies Robert. The layer is actually a FeatureLayer (see attached). I did notice that the actual name of the layer does not match that in the code. Would that cause an issue? Please advise.

Re: Zoom to a feature on mouse click in Web AppBuilder

RobertScheitlin__GISP — Mon, 08 Apr 2019 14:48:39 GMT

I went back and tested your link you provided earlier. Your issue now is that the label for the layer is interfeering with the click on the the actual point layer. When you turn the labels off then the zoom works all the time.

Re: Zoom to a feature on mouse click in Web AppBuilder

TRDSYSTEMS — Mon, 08 Apr 2019 16:20:29 GMT

Awesome! It works without the labels as you rightfully said. Now is when it gets tricky as the labels are to show the summary of the amount of points in an area. I guess I'll have to explore downloading a png number graphic and add it as a marker symbol and see how that works. One last question Robert; my goal is the mimic the behavior of this website BoatyBall ... you will notice the pointer turns into a hand to indicate that the points can be clicked, is there a way add this behavior to the code?

Re: Zoom to a feature on mouse click in Web AppBuilder

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:43:50 GMT

Troy,

You can try adding this css rule to your app to see if it help with the label layer click:

#labels_layer {
  pointer-events: none;
}‍‍‍

For the Mouse over and out cursor change you need this update:

          this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
            layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
              console.info(layerObject);
              if(layerObject.name === "Plants - Test"){
                layerObject.on("click", lang.hitch(this, function(evt){
                  map.centerAndZoom(evt.mapPoint, 14);
                }));
                layerObject.on("mouse-over", lang.hitch(this, function(evt){
                  map.setMapCursor("pointer");
                }));
                layerObject.on("mouse-out", lang.hitch(this, function(evt){
                  map.setMapCursor("default");
                }));
              }
            }), lang.hitch(this, function(err){
              console.error("can't get layerObject", err);
            }));
          }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Zoom to a feature on mouse click in Web AppBuilder

TRDSYSTEMS — Mon, 08 Apr 2019 19:11:18 GMT

Hey Robert,

The mouse over and out cursor change code works LOVELY! However, when I add the css rule code, the map hangs and does not load at all. Tell me this, am I adding the css rule to the same jimu/MapManager.js in the _show2DWebMap function? if not, where should it be added?