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 

[TRDSYSTEMS]

Robert,

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

[RobertScheitlin__GISP]

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

[TRDSYSTEMS]

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.

[RobertScheitlin__GISP]

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.

[TRDSYSTEMS]

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? 

[RobertScheitlin__GISP]

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

[TRDSYSTEMS]

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? 

[RobertScheitlin__GISP]

Troy,

Css rules go in css files. So you need to add this in your apps themes\FoldableTheme\common.css file.

[TRDSYSTEMS]

Bingo!... that works! This is exactly what I was trying to achieve. Excellent work Robert,Thanks a million!

[TroyDawson]

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:

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. 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