AnsweredAssumed Answered

How to add a ZoomTo button in my attributeInspector

Question asked by schlot on Jan 27, 2016
Latest reply on Feb 1, 2016 by schlot

I would like to have a ZoomTo button in my AttributeInspector dialog.  I see it in the actionPane, but hidden, I assume because the tool wouldn't actually work if I displayed that pane.  I'm working at a state-wide perspective and my users are used to being able to zoom in closer to a location from an information tag.

 

The attributeInspector is part of my Editor constructor, and not something I've defined by itself.

 

  initEditor: function (evt, geometryService, map) {
    var layers = [];
       var templatePicker = new TemplatePicker({
            featureLayers: [app.eusLayer],
            columns: 1,
            style: "height: 100%; width: 150px; border: 2px",
            showTooltip: true
          }, "templateDiv");
          templatePicker.startup();

        layers.push({featureLayer: app.eusLayer });
       var settings = {
            map: map,
            templatePicker: templatePicker,
            geometryService: geometryService,
            layerInfos: layers,
            toolbarVisible: false
          };

          var params = { settings: settings };
          app.myEditor = new Editor(params, 'editorDiv');

          app.myEditor.startup();
          var itmLbl = query('.itemLabel');
         itmLbl[0].innerHTML = 'Click to Add New Staff';
         esriBundle.widgets.attributeInspector.NLS_deleteFeature = "Delete Staff Location"; 
         
         on(templatePicker, 'selection-change', function (evt)  {
            app.editEnabled = true;
         });
         
        var attInspector = app.myEditor.attributeInspector;
        on (attInspector, 'attribute-change', function (evt) {
         app.editEnabled = false;

        });
      }  

 

I have a chunk of code I've used in the past to add a ZoomTo button to an infoTemplate, because when using bootstrap style, it doesn't include one for some reason.  This likely needs to be modified for this purpose.  I'm also not sure where this goes.

 

        var link = dom.byId('zoomLink');
           if (!link ) {
            link = domConstruct.create("a", {
             "class": "action zoomTo myZoom",
             "id": "zoomLink",
             "title": "Zoom in",
             "innerHTML": "Zoom To", //text that appears in the popup for the link
             "href": "javascript: void(0);"
             }, query(".sizer", app.map.infoWindow.domNode)[1]);         
           }
          on(link, "click", zoomTo);    

       function zoomTo(){
            var geom = currentGraphic.geometry;
            var lod = app.map.getLevel();
            app.map.centerAndZoom(geom, lod + 4);
            app.map.infoWindow.setFeatures(currentGraphic);
            app.map.infoWindow.show(geom);           
          }

Outcomes