topic Re: Center Map After Jewelry Box Theme Has Loaded in ArcGIS Web AppBuilder Questions

Center Map After Jewelry Box Theme Has Loaded

NathanHeickLACSD — Sat, 02 Feb 2019 03:38:14 GMT

I was wondering if someone had tried modifying an app built off of the Jewelry Box Theme so that the map is centered properly. It centers at the web map extent as configured, but it does it before the dockable panel has loaded and opened up. Afterwards, it pushes the map to the right and it's not centered properly. I am thinking I need to recenter the map again after the dockable panel or theme finishes loading.

Re: Center Map After Jewelry Box Theme Has Loaded

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:33:31 GMT

Nathan,

I think this is what you are wanting.

server\apps\[app#]\themes\JewelryBoxTheme\panels\LDockablePanel\Panel.js

Lines 2, 3, 14 - 18, 30

      startup: function(){
        this.vmap = this.panelManager.map;
        this.mapExt = this.vmap.extent;
        var configs = this.getAllWidgetConfigs();
        if(Array.isArray(this.config.widgets)){
          configs = this.config.widgets;
        }else{
          configs = [this.config];
        }
        if(configs.length > 0){
          html.empty(this.containerNode);
        }

        topic.subscribe('changeMapPosition', lang.hitch(this, function(){
          setTimeout(lang.hitch(this, function(){
            this.vmap.centerAt(this.mapExt.getCenter());
          }), 500);
        }));
        this.inherited(arguments);
      },

      onOpen: function(){
        this._setPostionWidthAndLeft();
        html.setStyle(this.domNode, {
          width: this.position.width + 'px'
        });
        if(this.position.width === 0){
          this.panelManager.minimizePanel(this);
        }else{
          this.mapExt = this.vmap.extent;
          this.panelManager.maximizePanel(this);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Center Map After Jewelry Box Theme Has Loaded

NathanHeickLACSD — Sun, 12 Dec 2021 03:33:34 GMT

Thanks, Robert. My final code is below. I decided to only modify the map extent the first time the panel was opened. I wish I could find more documentation on the topics that you can subscribe to. The JavaScript API has so many events you can register event handlers for. The WAB Developer Edition help seems kind of high level.

      startup: function(){
        var configs = this.getAllWidgetConfigs();
        var initialMapExtent = this.map.extent;
        var firstOpened = false;

        if(Array.isArray(this.config.widgets)){
          configs = this.config.widgets;
        }else{
          configs = [this.config];
        }
        if(configs.length > 0){
          html.empty(this.containerNode);
        }

        this.inherited(arguments);

        topic.subscribe('changeMapPosition', lang.hitch(this, function () {
          if (!firstOpened) {
            setTimeout(lang.hitch(this, function () {
              this.map.setExtent(initialMapExtent);
            }), 500);
            firstOpened = true;
          }
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Center Map After Jewelry Box Theme Has Loaded

RobertScheitlin__GISP — Tue, 05 Feb 2019 13:46:53 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Center Map After Jewelry Box Theme Has Loaded

NathanHeickLACSD — Tue, 05 Feb 2019 19:40:53 GMT

Thanks Robert. I marked my answer as correct because it was the final product I was looking for, but obviously you deserve the credit for me getting there.