FIND OUT MORE

Display your business-critical information with confidence. Vicmap™ API – authoritative, current and clear.

Styling icons

In the Measure example, there is a toolbar in the top right corner with two icons, one for measuring distance and another for area. This customized toolbar is styled by CSS.

The following is the actual CSS code in the Measure.jsp file:

.olControlPanel
{
          margin: 0px;
          padding: 2px 0px 2px 0px;
          background-color: #fff;
          border-right: solid 1px #999;
          border-bottom: solid 1px #999;
          right: 0px;
}
.olControlPanel div
{
         display: block;
         width: 24px;
         height: 24px;
         float: left;    /* remove this if you want a vertical toolbar */
         margin: 0px 2px 0px 2px;
}
.olControlPanel .olControlMeasureDistanceItemActive
{
        background-image: url( "./openlayers/img/distance_on.png" );
}
.olControlPanel .olControlMeasureDistanceItemInactive
{
        background-image: url( "./openlayers/img/distance_off.png" );
}
.olControlPanel .olControlMeasureAreaItemActive
{
        background-image: url( "./openlayers/img/area_on.png" );
}
.olControlPanel .olControlMeasureAreaItemInactive
{
        background-image: url( "./openlayers/img/area_off.png" );
}
 

Below is a desciption of the above CSS code:

The styling for the olControlPanel class indicates

  • the padding around the olControlPanel class should be 2 pixel wide for the top and bottom (based on padding: 2px 0px 2px 0px, top, left, bottom, right)
  • with white as the background colour
  • a 1 pixel wide black colour border at the right and bottom, to create the look and feel of a 3D panel
  • align to the right

The styling for the div element belonging to the olControlPanel class indicates the following

  • <div> element should be displayed as a block with the width and height both set to 24 pixels
  • the <div> element should float to the right, and only 2 pixel wide margin at the left and right

For both measure distance and measure area controls, there are two images associated with each control. The active and inactive images represent the active and inactive state of the control respectively.