Zoom In/Out/Pan Widget v1.1.0

2 Kudos

5/5/2015: Pan widget added

3/16/2015: Files uploaded

Here is a widget that you can add to you maps that lets you zoom in or out by using a tool and draw a box on the map.

Update: I added a new widget in the download to make a the map pan.

Based off of work from Brian O'keefe and Robert Scheitlin, GISP here My First Custom Widget (WIP) : Rubber Band Zoom /thread/117057http:

There are two main parts to this widget. It is a little different then the normal widget deployment. In this deployment you can not add the widgets through the normal GUI interface of WAB. These widgets will show up on the map like the Home button.

If for just one specific app then there two steps:

Copy the widgets folder to the apps widgets folder i.e. \server\apps\xx\widgets
Add the widget manually to the \server\apps\xx\config.json

Example:

{

"position": {

"left": 55,

"top": 95

},

"id": "widgets/ZoomIn/Widget_10_11",

"positionRelativeTo": "map",

"name": "ZoomIn",

"label": "Zoom In",

"uri": "widgets/ZoomIn/Widget"

},

{

"position": {

"left": 105,

"top": 95

},

"id": "widgets/ZoomOut/Widget_10_12",

"positionRelativeTo": "map",

"name": "ZoomOut",

"label": "Zoom Out",

"uri": "widgets/ZoomOut/Widget"

},

{

"position": {

"left": 155,

"top": 95

},

"id": "widgets/Pan/Widget_10_13",

"positionRelativeTo": "map",

"name": "Pan",

"label": "Pan",

"uri": "widgets/Pan/Widget"

},

If you want to adjust where the widget is on the screen then change the values in the config.json file under the widget position. (left or top)

If adding it to the default for all future apps (the user can still make it not visible like the others) then there is just one step:

Add the above sample json code to the \client\builder\predefined-apps\default2DApp\config.json

(Thanks Robert for the instructions)

BUG:

I am not sure how to turn off one zoom when the other is clicked. For now the work around it to re-click the zoom to un-select it.
The other down side is that when the app gets saved in WAB it over writes the pasted code and removes the Zoom In/Out widget files. so those need to be added again.

RebeccaStrauch__GISP · ‎03-16-2015

Stan, I added your widget to the resource list. (I can't seem to add @ mentions today. Hmmm)

TomSellsted · ‎03-16-2015

Stan,

The link to your demo is broken. It looks like the http:// is at the end instead of the beginning of the link. I was able to view your demo and it worked as described.

Best Regards,

Tom

RebeccaStrauch__GISP · ‎03-16-2015

Tom is correct on the broken link on this page. I fixed it in the resource list.

I noticed the the demo doesn't work on the iPad ....at least on my initial test.

StanMcShinsky · ‎03-16-2015

Thanks. Link fixed.

Agreed it does not work on iPad.

Anonymous User · ‎09-22-2015

Stan McShinsky .. I re-added the Zoom in and Out to my WAB 1.2. ArcGIS Web Application

It seems like it doesn't work partially. The background of them does not highlight grey, so they are really hard to see. Here is an example. They are in the upper left slots right below Search. You click and they pop down. They are hard to see because they're white, so change the basemap to imagery. They both work, they just don't show UI feedback of highlighting grey/darker grey when activated/disabled. Did I do something wrong or are they not working in 1.2 yet?

I copied Zoom in and Zoom out into the Widgets folder and added their JSON to the config file as included above.

Update: I "hacked" this to "fix" it myself with CSS:

I set the opacity and rounded the corners. Note that this is where I have placed them manually a la the config.json above, I put them below the Locator widget in the upper left, using the default theme and layout.

I had to use inline DOM styling because when I added custom classes ('kevin') to jimu.css they didn't work for some reason. Inline style did. I also tried adding the mouse hover but that didn't work. it is not that important and I have a huge deadline on a project so I may come back to this and try to clean it up, and get it working with classes and hovering or even just figure out why this widget doesn't seem to like WAB 1.2.

/*global define, dojo, dijit, require, esri, console, setTimeout*/
define(['dojo/_base/declare',
'jimu/BaseWidget',
'dojo/_base/html',
'dojo/on',
'dojo/mouse',
'dojo/dom-style',
'dojo/dom-construct',
'dojo/dom-class',
'esri/toolbars/navigation'
],
function(declare, BaseWidget, html, on, mouse, domStyle, domConstruct, domClass, Navigation) {
var clazz = declare([BaseWidget], {
    name: 'ZoomIn',
    label: 'Zoom In',
    baseClass: 'jimu-widget-ZoomIn',

    startup: function() {
      this.inherited(arguments);
      var pnode = domConstruct.toDom("<div title='Zoom In' class='jimu-preload-widget-icon kevin-unselected' style='border-radius: 5px;'></div>");
      var node = domConstruct.toDom("<img src='widgets/ZoomIn/images/icon.png' style='width: 20px; height: 20px; margin: 5px;'></img>");
      html.place(node, pnode);
      html.place(pnode, this.domNode);
      var navToolbar = new Navigation(this.map);
      on(pnode, 'click', function(evt){
        if (domClass.contains(pnode, 'kevin-selected')){
          domClass.remove(pnode, "kevin-selected");
domStyle.set(pnode, "background-color", "rgba(0,0,0,0.2)");
          navToolbar.deactivate()
        }else{
          domClass.add(pnode, "kevin-selected");
domStyle.set(pnode, "background-color", "rgba(0,0,0,0.9)");
          navToolbar.activate(Navigation.ZOOM_IN);
        }
        console.info('button clicked');
      });
    }
});
clazz.hasStyle = false;
clazz.hasUIFile = false;
clazz.hasLocale = false;
clazz.hasConfig = false;
clazz.inPanel = false;
return clazz;
});

AdamGebhart · ‎12-07-2015

Stan:

Have you been able to debug the issue with each widget remaining active until clicking on it to unselect or deactivate it?

AdamGebhart · ‎12-21-2015

Kevin MacLeod

I have in my WAB 1.2 setup notes that div.jimu-preload-widget.icon changed to PreloadWidgetIcon dijit (or something along these lines) between WAB 1.1 and 1.2. I was able to get CSS in 1.2 and now 1.3 to work with the following changes:

arcgis-web-appbuilder-1.2\server\apps\#\jimu.js\css\jimu.css

arcgis-web-appbuilder-1.3\server\apps\#\jimu.js\css\jimu.css

(line 702).jimu-widget-onscreen-icon{

position: absolute;

cursor: pointer;

border-radius: 4px;

background-color: rgba(0,0,0,0.5); I added this line and 0.5 is what I want for the default widget background color

}

What now appears at lines 714-726 is what I added to match the code for this widget:

.jimu-preload-widget-icon {

position: absolute

cursor: pointer

border-radius: 4px;

background-color: rgba(0,0,0,0.5);

}

.jimu-preload-widget-icon:hover{

background-color: rgba(0,0,0,1.0);

}

.jimu-preload-widget-icon.jimu-state-selected{

background-color: rgba(0,0,0,0.9);

}

I don't know if this is the best or most efficient way of getting this to work, but it works for me. Please let me know if you have any suggestions or tips to make it an easier fix.

Anonymous User · ‎01-05-2016

Hey Adam Gebhartyep, that works perfectly on 1.3. Sweet. I used rgba(0,0,0,0.2) as 0.5 transparency was a bit darker than the default widget button background. I'm using the default Foldable theme.

AdamGebhart · ‎03-09-2017

I'm trying to add the ZoomIn and ZoomOut widgets to WAB 2.3 but something isn't working.

I've added the folders to WebAppBuilderForArcGIS-2.3\client\stemapp\widgets\ but when I go into WAB to add those widgets to the application they're not shown in the Choose Widget folder. Is there something else I need to do with 2.3? I have a note from 1.1 or 1.2 that says to add the widget name to client\stemapp\widgets\list.json but I don't see that file in 2.3.

Did something change with 2.3 or am I missing a step? I don't think I had to do anything extra with Robert Scheitlin, GISP Enhanced Search and kmsagis‌ Pictometry widget, but I could be wrong. Are they compatible with 2.3?

RobertScheitlin__GISP · ‎03-09-2017

Adam that widget has not been updated for some time so I will have to test if it is compatible with WAB 2.3

AdamGebhart · ‎03-09-2017

Thanks. I have them in a 2.0 or 2.1 app but this is the first time I've tried with 2.3. I should also add that this particular app was imported from AGO and not something I've built purely in Developer.

RobertScheitlin__GISP · ‎03-09-2017

Adam,

What I am noticing is that the widget uses an old class name (css rule) that does not apply a background to the button, so it looked like it was not added but it actually was but just using the white icon for the zoom or pan and it was hard to see. The widget.js file need to be updated using this line:

      var pnode = domConstruct.toDom("<div title='Pan' class='jimu-widget-onscreen-icon'></div>");‍

this is the main change:

class='jimu-widget-onscreen-icon'‍

VS. the old:

class='jimu-preload-widget-icon'‍

AdamGebhart · ‎03-09-2017

Thanks. What's odd is I don't even see these widgets as options to add to my app in the Choose Widget screen. Is there something else I need to besides add the folders to WebAppBuilderForArcGIS-2.3\client\stemapp\widgets\, then update their widget.js files like you mentioned?

I've even tried adding the folders directly to apps\#\widgets\, then configure config.json to include the widgets and update CSS, but that didn't work. I have to be skipping a step.

RobertScheitlin__GISP · ‎03-09-2017

Adam,

These are not widgets that will appear in the choose widget dialog. They are like the scalebar widget they are onScreen UI type widget that have to be manually added to the main config.json as detailed in the instructions.

I've even tried adding the folders directly to apps\#\widgets\, then configure config.json to include the widgets and update CSS, but that didn't work. I have to be skipping a step.

Not sure what step you are missing then.

You are adding the widgets to the on screen widgets array right:

  "widgetOnScreen": {
    "widgets": [‍‍

AdamGebhart · ‎03-09-2017

Thank you. I was on the right path there but I wasn't saving things properly between working in Developer and in config.json. I have them in my app now.

YuandaZhu · ‎03-29-2017

Hi, Seems I did everything you mentioned but was not successful. I am using 2.4 right now. Is there any other trick for 2.4? Thanks.

RobertScheitlin__GISP · ‎03-29-2017

Yuanda,

Not nothing else is different. I have them working in 2.4.

YuandaZhu · ‎03-31-2017

Thanks, it works now.

JacquesBrodard · ‎04-07-2017

Hi,

How we can deactivate the widget without having to click on.

It is possible to configure a onclick event in the other widgets to do this ?

We can close the widget from another widget :

WidgetManager.getInstance().closeWidget('widgets_ZoomIn_Widget_10_11');

is it also possible to program a onclick on this one ?

Thanks Jacques

RobertScheitlin__GISP · ‎04-07-2017

Jacques,

Not without a bit of re-writing of the widgets. Here would be the changes to make. (Lines 15, 23, 27 and 30) Now the navToolbar is public in the widget and then you can get a reference to the widget and call:

var widget = WidgetManager.getInstance().getWidgetById('widgets_ZoomIn_Widget_10_11');
widget.navToolbar.deactivate();‍‍‍‍‍

/*global define, dojo, dijit, require, esri, console, setTimeout*/
define(['dojo/_base/declare',
  'jimu/BaseWidget',
  'dojo/_base/html',
  'dojo/on',
  'dojo/_base/lang',
  'dojo/dom-construct',
  'dojo/dom-class',
  'esri/toolbars/navigation'
],
function(declare, BaseWidget, html, on, lang, domConstruct, domClass, Navigation) {
  var clazz = declare([BaseWidget], {
    name: 'Pan',
    label: 'Pan',
    baseClass: 'jimu-widget-Pan',
    navToolbar: null,

    startup: function() {
      this.inherited(arguments);
      var pnode = domConstruct.toDom("<div title='Pan' class='jimu-widget-onscreen-icon'></div>");
      var node = domConstruct.toDom("<img src='widgets/Pan/images/icon.png' style='width: 20px; height: 20px; margin: 10px;'></img>");
      html.place(node, pnode);
      html.place(pnode, this.domNode);
      this.navToolbar = new Navigation(this.map);
      on(pnode, 'click', lang.hitch(this, function(evt){
        if (domClass.contains(pnode, 'jimu-state-selected')){
          domClass.remove(pnode, "jimu-state-selected");
          this.navToolbar.deactivate();
        }else{
          domClass.add(pnode, "jimu-state-selected");
          this.navToolbar.activate(Navigation.PAN);
        }
        console.info('button clicked');
      }));
    }
  });

  clazz.hasStyle = false;
  clazz.hasUIFile = false;
  clazz.hasLocale = false;
  clazz.hasConfig = false;
  clazz.inPanel = false;
  return clazz;
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JacquesBrodard · ‎04-07-2017

Robert,

I make this changes, but I have the error

Uncaught TypeError: Cannot read property 'activate' of undefined
at HTMLDivElement.<anonymous> (Widget.js?wab_dv=2.4:34)
(anonymous) @ Widget.js?wab_dv=2.4:29

my widget.js now looks like this

/*global define, dojo, dijit, require, esri, console, setTimeout*/
define(['dojo/_base/declare',
'jimu/BaseWidget',
'dojo/_base/html',
'dojo/on',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/dom-style',
'esri/toolbars/navigation'
],
function(declare, BaseWidget, html, on, domConstruct, domClass, domStyle, Navigation) {
var clazz = declare([BaseWidget], {
    name: 'ZoomIn',
    label: 'Zoom In',
    baseClass: 'jimu-widget-ZoomIn',
    navToolbar: null,

    startup: function() {
      this.inherited(arguments);
      var pnode = domConstruct.toDom("<div title='Zoom In' class='jimu-preload-widget-icon' style='border-radius: 5px; background-color: rgba(0,0,0,0.2)'></div>");
      var node = domConstruct.toDom("<img src='widgets/ZoomIn/images/icon.png' style='width: 20px; height: 20px; margin: 5px;'></img>");
      html.place(node, pnode);
      html.place(pnode, this.domNode);
      this.navToolbar = new Navigation(this.map);
      on(pnode, 'click', function(evt){
        if (domClass.contains(pnode, 'jimu-state-selected')){
          domClass.remove(pnode, "jimu-state-selected");
          //domStyle.set(pnode, "background-color", "rgba(0,0,0,0.2)");
          this.navToolbar.deactivate();
        }else{
          domClass.add(pnode, "jimu-state-selected");
          //domStyle.set(pnode, "background-color", "rgba(0,0,0,0.6)");
          this.navToolbar.activate(Navigation.ZOOM_IN);
        }
        console.info('button clicked');
      });
    }
});

clazz.hasStyle = false;
clazz.hasUIFile = false;
clazz.hasLocale = false;
clazz.hasConfig = false;
clazz.inPanel = false;
return clazz;
});

RobertScheitlin__GISP · ‎04-07-2017

Jacques,

I have updated my code to use lang.hitch to maintain the scope. Try that now.

JacquesBrodard · ‎04-07-2017

yes, I dont know lang.hitch. Have you joined a code to try ?

RobertScheitlin__GISP · ‎04-07-2017

I updated my code in my previous post to reflect that change.

JacquesBrodard · ‎04-07-2017

I do not see any change ?

RobertScheitlin__GISP · ‎04-07-2017

Strange My edit did not save before. I did the edit again.

DanielOchoa · ‎04-07-2017

Hey Rob,

What file is this bit of code going into?

var widget = WidgetManager.getInstance().getWidgetById('widgets_ZoomIn_Widget_10_11');
widget.navToolbar.deactivate();

Thanks

RobertScheitlin__GISP · ‎04-07-2017

What ever file you want to turn off the nav tool from.

JacquesBrodard · ‎04-10-2017

Robert,

Thanks for the help, it is just what I need.

I have made the same adjustments for the style properties.

have a nice day

GobernanzaIndustrial · ‎11-12-2017

Hello I don´t know how to turn off one zoom when the other is clicked without re-click the zoom to un-select it. Can anyone help me? Sorry for my English!

Thank You!!

Zoom In/Out/Pan Widget v1.1.0

Zoom In/Out/Pan Widget v1.1.0

Widget Downloads