off panel widget icon

[mileshitchen1]

Hi,

I'm trying to create an off panel widget that when clicked will zoom to a predefined level. I'd like to use an existing widget icon. My problem is that I'm using the following html in the Widget.html file and the border around the icon is being displayed slightly larger than a standard in-panel widget icon, ie 42x45 pixels, rather than 40x40 pixels, and I have no idea why. Any help would be much appreciated.

<div title="Zoom To" data-dojo-attach-event="onclick:_onButtonClicked" class="jimu-widget-onscreen-icon">

    <img src="widgets/About/images/icon.png" />

</div>

Thanks in advance,

Miles.

[RobertScheitlin__GISP · Accepted solution]

Mile you should look at my Layer Toggle Button widget.

It is a on screen widget that does not open a UI but executes code when clicked.

https://community.esri.com/docs/DOC-8592-layer-toggle-button-widget-version-22-01132017 

[mileshitchen1]

Hi Robert,

Doh! Why didn't I think of using the onOpen() method?! The code you have looks perfect for what I want to do, thanks for your help. I assume you're setting the widget's closeable property true in the app config.js, so that the icon is displayed?

Thanks,

Miles.

[mileshitchen1]

Hi Robert,

I'm having difficulty using your approach. Basically I have an off panel widget with no UI and closeable property true. My code is listening to the onOpen event of the widget and in there I set the maps zoom level and then close the widget. This all works, but on the first click of the widget icon, the onOpen event is fired 3 times, and then leaves the widget and icon in an open state. Any idea what's going on and how to fix this? It seems like it should be a simple task, but I've been banging my head against the desk for hours now!!

Thanks, Miles.

Here's my Widget code:

define(['dojo/_base/declare',

    'dojo/on',

    'dijit/_WidgetsInTemplateMixin',

    'jimu/BaseWidget',

      'jimu/WidgetManager'

  ],

  function (declare, on, _WidgetsInTemplateMixin, BaseWidget, WidgetManager) {

    var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {

      baseClass: 'jimu-widget-about',

      // clasName: 'esri.widgets.About',

      onOpen: function () {

          if (this.map.getLevel() !== 13) {

              this.map.setLevel(13);

          }

          WidgetManager.getInstance().closeWidget(this);

      }

    });

    return clazz;

  });

[RobertScheitlin__GISP]

Miles,

  I dealt with all those issues in my widget code.