One of the more frequent requests we get is the request to make the PanZoomControl positionable, or change the style, with only CSS. This is an outline of a plan to implement an improved PanZoom control using the more modern Panel architecture and CSS styling to create the visual appearance.

Recreating the PanZoomBar control requires the following sub-pieces:

• Control.PanMap: Trigger Button Control to pan the map in a specific direction.
  • Will have a direction (left, right, up, or down)
  • Will be of type trigger
  • displayClass will be based on direction: olControlPanMapLeft, etc.

• Control.ZoomButton
  • Will have a direction (in, out)
  • Will be of type trigger
  • displayClass will be based on direction

• Control.ZoomBar
  • Consists of two ZoomButton controls atop a bar with a draggable div. The styling of the div will be entirely with CSS classnames.

The recreated PanZoomBar control (name pending) will use a Control.Panel with the four PanMap conrols (added to a control.panel). It will have options to enable the zoombar control (displaying the two-buttons + draggable slider), to display a smallzoom control (2 buttons + zoom to max extent) or to display nothing in addition to the pan buttons.

Unknowns: how to do background-image on a div and have png transparency work in IE?