topic Re: Customize zoom and home button in WAB in Web AppBuilder Custom Widgets Questions

Customize zoom and home button in WAB

AlexGole — Sun, 12 Dec 2021 09:35:58 GMT

I am pretty new to web app builder. I am trying to customize it the way I want.

I am trying to achieve something similar to that:

In the JS API it would look like that. Not too sure how to recreate such a thing in WAB.

//Create Home button
 initialExtent = map.extent;
 dojo.create("div", {
 className: "esriSimpleSliderHomeButton",
 title: 'Zoom to Full Extent',
 onclick: function () {
 if (initialExtent === undefined) {
 initialExtent = map.extent;
 }
 map.setExtent(initialExtent);
 }
 }, dojo.query(".esriSimpleSliderIncrementButton")[0], "after");‍‍‍‍‍‍‍‍‍‍‍‍

Thanks,

Alex

Re: Customize zoom and home button in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:36:01 GMT

Alex,

In WAB the zoom slider is a widget:

widgets/ZoomSlider

Widget.html:

<div class="jimu-corner-all">
  <div class="zoom zoom-in" data-dojo-attach-point="btnZoomIn"
   data-dojo-attach-event="onclick:_onBtnZoomInClicked">+</div>
  <div class="zoom zoom-full" data-dojo-attach-point="btnZoomFull"
    data-dojo-attach-event="onclick:_onBtnZoomFullClicked"
    title="Zoom to Full Extent"></div>
  <div class="zoom zoom-out" data-dojo-attach-point="btnZoomOut"
   data-dojo-attach-event="onclick:_onBtnZoomOutClicked">–</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Widget.js (add):

      _onBtnZoomFullClicked: function(){
        var initialExtent = null;
        var configExtent = this.appConfig && this.appConfig.map &&
          this.appConfig.map.mapOptions && this.appConfig.map.mapOptions.extent;

        if (configExtent) {
          initialExtent = new Extent(
            configExtent.xmin,
            configExtent.ymin,
            configExtent.xmax,
            configExtent.ymax,
            new SpatialReference(configExtent.spatialReference)
          );
        } else {
          initialExtent = this.map._initialExtent || this.map.extent;
        }
        this.map.setExtent(initialExtent);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

css/style.css (add):

.jimu-widget-zoomslider .zoom-full{
  background-image: url("images/home.png");
  background-repeat: no-repeat;
  background-position: center;
}

.jimu-widget-zoomslider.vertical .zoom-out{
  border-top: 1px solid #57585A;
}

.jimu-widget-zoomslider.horizontal .zoom-out{
  border-left: 1px solid #57585A;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Add images folder to the css folder and then add this image (it is hard to see because it is white with a transparent background but it is just to the right).

Re: Customize zoom and home button in WAB

TownOfGroton — Wed, 21 Feb 2018 13:26:17 GMT

Hi Robert,

I'm trying to get the same look and functionality to work in WAB 2.5. I copied the code above but the home button doesn’t work. It won’t zoom to the extent. Has the coding change?

Re: Customize zoom and home button in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:36:04 GMT

Jenna,

I did not include the require changes that you would need to do in the original post:

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'jimu/BaseWidget',
    'dojo/_base/html',
    'dojo/on',
    'esri/SpatialReference',
    'esri/geometry/Extent'
  ],
  function(declare, lang, BaseWidget, html, on, SpatialReference, Extent) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍