[Chameleon] Resizing MapDHTML widget without submitting page...possible?

Mike Leahy mgleahy at alumni.uwaterloo.ca
Thu Nov 3 18:03:19 EST 2005


Hello list,

I've been working on a Chameleon application that uses an AJAX-like
approach to submit the main form, and updates the current page by
parsing the responseText that is recieved and applying properties to
most of the form inputs and some JavaScript variables, as well as
substituting innerHTML for appropriate div tags.  I have posted a sample
at http://gaia.uwaterloo.ca/mgl/ if anybody wants to take a look at it
(feedback is welcome).  I know what I've done here is somewhat
reinventing what the JSAPI mode does in Chameleon, but it fits with the
context of our project, and works reasonably well (so far).

Essentially, we're trying to make an application that never reloads the
page like in JSAPI, so that we can seamlessly include other tools we are
developing that are also based on AJAX in the same page as the Chameleon
map.  We essentially have acheived this goal...but various widgets will
not work in this environment, like the MapSize widget, which would
re-submit the page even when JSAPI mode is enabled.

This brings me to the problem we are currently facing, and for which I'm
hoping to get some advice.  I'm trying to change the size of the map
widget during a window.onresize event without actually reloading the
page.  I have some sample JavaScript code below where I am attempting to
do this based on the (hypothetical) presence/existence of a panel at the
bottom of the web page (indicated by a boolean variable).  While I can
resize the layers associated with the map widget, the actual visible map
image continues to be clipped to its original height (even though the
image itself is visibly stretched to the extents, and the clip extents
appear to be correct while panning).  I haven't yet started reloading
the image to properly fill the map layer after being resized, but that's
sort-of moot at this point (I think), since the bottom part of the image
continues to be cut-off.

You can view a live-demo of this (both the AJAX reloading method, and
our resizing problem) at http://gaia.uwaterloo.ca/mgl/resizetest/ so
that you can get a visual of what I'm describing.  You should find that
on the initial load, you can zoom/pan/etc, but if you resize the browser
window, the map image is not visible beyond it's original height of 300
pixels (even though you can see that the image object has been resized).

So...I'm hoping somebody might have some suggestions or can point me in
the right direction to move ahead with this.  I imagine this has
something to do with some parameters or functions that are set during
the usual onLoad sequence of the Chameleon application, but I'm at a bit
of a loss as to where I should look in the Chameleon code.  Maybe
there's a much simpler way to do this, or an existing function that I've
overlooked...?  I looked through the Chameleon list, and didn't find

Thanks in advance for any help,
Mike


~~~~~~ snippet of LayerSetSizeInit() called during onresize event ~~~~~~

var oMainMapImage = CWCDHTML_GetImage( 'mapimage' );
var oMainMapLayer = CWCDHTML_GetLayer( 'MainMapLayer' );
var oMainMapDivImg = CWCDHTML_GetImage( 'MapLayerDivImg' );

if (bShowBottom)
{
 //bottom panel has contents...stretch other panels
 //to the top of the bottom panel

  gMapWiHeight = (aWH[1] - 57) - parseInt(oBottomPanel.style.height);
  oMainMapLayer.height = gMapWiHeight;
  oMainMapImage.height = gMapWiHeight;
  oMainMapDivImg.height = gMapWiHeight;
  gRulercMapHeight = gMapWiHeight;
  document.forms[0].MAP_HEIGHT.value = gMapWiHeight;

  //my current hack/best-guess at resizing the map image...need help...
  maplayer = new DynLayer("MapLayerDiv");
  drag.remove(maplayer);
  maplayer.clipTo(0,400,gMapWiHeight,0);
  drag.add(maplayer);
		
}
else
{
	
  //bottom panel has no contents...stretch other
  //panels to fill in the screen

  gMapWiHeight = (aWH[1] - 57);
  oMainMapLayer.height = gMapWiHeight;
  oMainMapImage.height = gMapWiHeight;
  oMainMapDivImg.height = gMapWiHeight;
  gRulercMapHeight = gMapWiHeight;
  document.forms[0].MAP_HEIGHT.value = gMapWiHeight;

  //my current hack/best-guess at resizing the map image...need help...
  maplayer = new DynLayer("MapLayerDiv");
  drag.remove(maplayer);
  maplayer.clipTo(0,400,gMapWiHeight,0);
  drag.add(maplayer);
}




More information about the Chameleon mailing list