Center Map After Jewelry Box Theme Has Loaded

271
4
Jump to solution
02-01-2019 07:38 PM
NathanHeickLACSD
Occasional Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
NathanHeickLACSD
Occasional Contributor III

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;
          }
        }));
      },

View solution in original post

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
        }
      },
NathanHeickLACSD
Occasional Contributor III

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;
          }
        }));
      },
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
NathanHeickLACSD
Occasional Contributor III

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.

0 Kudos