Zoom In/Out/Pan Widget v1.1.0

File uploaded by smcshinsky Champion on Mar 16, 2015Last modified by smcshinsky Champion on Nov 15, 2017
Version 6Show Document
  • View in full screen mode

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:

  1. Copy the widgets folder to the apps widgets folder i.e. \server\apps\xx\widgets
  2. 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:

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

(Thanks Robert for the instructions)

 

BUG:

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

Attachments

Outcomes