Zoom to a feature on mouse click in Web AppBuilder

4704
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
24 Replies
TRDSYSTEMS
New Contributor II

Greetings Robert,

Quick question in regards to doing the same this using Portal. Would there be a change in the code? I decided to do a very similar deployment on portal (rather than using arcgis online) but the code doesnt seem to work. After pasting the code, the map fails to draw. please see below portal 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. LayerInfos.getInstance(map, map.itemInfo).then(lang.hitch(this, function(layerInfosObj) {
65. this.layerInfosObj = layerInfosObj;
66. this._showUnreachableLayersTitleMessage();
67. this._publishMapEvent(map);
68. setTimeout(lang.hitch(this, this._checkAppState), 500);
69. this.loading.hide();
70. this._addDataLoadingOnMapUpdate(map);
71. }));
72. }), lang.hitch(this, function(error) {
73. console.error(error);
74. this._destroyLoadingShelter();
75. this._showError(error);
76. topic.publish('mapCreatedFailed');
77. }));
78. },
79.
80.
81. _showError: function(err){
82. if(err && err.message){
83. html.create('div', {
84. 'class': 'app-error',
85. innerHTML: err.message
86. }, document.body);
87. }
88. },
Please advise
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Portals code base is minified and Portal is normally a couple of versions behind the current release of WAB.

0 Kudos
KrystalPhaneuf3
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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"){
0 Kudos
by Anonymous User
Not applicable

Hi Robert, 

I know this is a pretty old post but I am trying to utilize this solution in WAB 2.19 and it's not doing anything for me. I am using a feature service and I don't have any errors showing in developer tools. Would it make a difference if it's a hosted feature service? Thanks for your help!

Scott

0 Kudos