Multimap API v1.1 : Advanced Widgets Example

Before reading this example you should read the Adding Widgets to the Map example first to learn the basic features.

The Multimap API gives developers a large amount of control over their map viewers. So far, you have seen how custom markers can be used and how the info box can be completely re-styled to suit your needs. This example demonstrates the ways in which the widgets can be customized.

There are two ways, by default, that you can customize widgets: you can alter the position that the widget occupies within the map viewer, and you can re-style the widget to have an entirely different appearance.

Re-positioning Widgets

To position a widget you must pass in an MMBox object. This will be the first argument after any widget-specific arguments for the constructor. The Pan/Zoom Widget has no widget-specific arguments. This MMBox object should have values for the top, right, bottom and left CSS properties. Usually you will only want to pass in a right or left and a top or bottom, though you should be able to use any combination that is valid. All parameters are optional, but you must fill any gaps between arguments with the "undefined" keyword. A few examples follow:

var widgetPosition = new MMBox( 10, undefined, undefined, 10 ); // top left
var bottomLeft = new MMBox( undefined, undefined, 10, 10 ); // bottom left
var topRight = new MMBox( 10, 10 ); // top right
var bottomRight = new MMBox( undefined, 10, 10 ); // bottom right
var top = new MMBox( 0, 0, undefined, 0 ); // should stretch across the top of the viewer.

var panZoomWidget = new MMPanZoomWidget( bottomLeft ); // Pan/Zoom Widget positioned in the bottom left

Re-styling Widgets

In the code at the end of this page you will find the HTML for the Pan/Zoom Widget. What follows is a description of that HTML and how to style it.

The Pan/Zoom Widget has two DIVs at its outer level to allow for better re-styling. Within these are contained two more DIVs, one containing pan controls and one containing zoom controls. The CSS selectors for these are as follows:

DIV.MMPanZoomWidget DIV.MMwrapper DIV.MMpan
DIV.MMPanZoomWidget DIV.MMwrapper DIV.MMzoom

Within the DIV.MMpan is a DIV.MMlabel containing the text "Pan" which may be hidden or used to display an image. Along with this is a collection of DIVs, each containing a panning link. These links contain text specifying their functions, e.g., "North", "North-West", "Reset Position". The links are ordered in the best way to display a compass rose with the reset position link in the center. If you need to change this drastically, you will probably need to use absolute positioning.

Each of the DIVs for the pan links has a number of classes to allow different levels of granularity for styling. Every compass direction DIV has the class MMrhumb. All of the cardinal compass points (North, South, East, West) have the class MMcardinal and each also has a class unique to it, e.g., MMNorth and MMSouth-West. The reset position DIV has class MMreset.

Within the DIV.MMzoom is another DIV.MMlabel, this one containing just the word "Zoom". There is also a number of other DIVs which contain links. This time there is one DIV.MMzoomin, containing the "zoom in" link, followed by a number of DIV.onezoomfactor elements. These are followed by a DIV.MMzoomout. Each of these links contains text such as "Zoom In", "Zoom Out" or the zoom factor number.

Each of the DIV.onezoomfactor elements also has another class defined, which allows you to style that zoom factor individually; this is MMzf followed by the number of the zoom factor, e.g., MMzf1, MMzf2, etc. One of these DIVs should also have the MMselected class, indicating that it is the current zoom factor.

As mentioned, all of the links contain a piece of text outlining what the link does. In the vast majority of cases this text is hidden from the user and a background image used instead.

Important Note: If you pass a class into your widget constructor, the Multimap default styles will not be applied. The base DIV will no longer be DIV.MMPanZoomWidget (for instance) and instead will be solely the class that you pass in, e.g., new MMPanZoomWidget( undefined, 'altpanzoom' ) would result in DIV.altpanzoom. The easiest way to restyle is to start from a copy of the Multimap default styles, replacing all instances of .MMPanZoomWidget with .yourclass, depending on which widget you are restyling, and go from there. A link to the default Multimap API style-sheet can be found below.

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Fleet Street, London, Great Britain, at zoom factor 15.

When you click on the first link, the viewer adds a Pan/Zoom Widget in the normal location. The second link gives an example of a re-styled Pan/Zoom Widget. The final link can be used to remove all widgets.

The Map

The Code

The code below lists the HTML for the Pan/Zoom Widget, then the default CSS and supplementary CSS for the re-styled Pan/Zoom Widget shown above.

The Pan/Zoom Widget HTML code


<DIV class="MMPanZoomWidget" style="position: absolute; visibility: visible; top: 10px; right: 10px;">
  <DIV class="MMwrapper">
     <DIV class="MMpan">
        <DIV class="MMlabel">
Pan     </DIV>
        <DIV class="MMrhumb MMNorth-West">
          <A title="Pan North-West" href="javascript:void(undefined)">
North-West        </A>
        </DIV>
        <DIV class="MMrhumb MMcardinal MMNorth">
          <A title="Pan North" href="javascript:void(undefined)">
North         </A>
        </DIV>
        <DIV class="MMrhumb MMNorth-East">
          <A title="Pan North-East" href="javascript:void(undefined)">
North-East        </A>
        </DIV>
        <DIV class="MMrhumb MMcardinal MMWest">
          <A title="Pan West" href="javascript:void(undefined)">
West          </A>
        </DIV>
        <DIV class="MMreset">
          <A title="Reset Position" href="javascript:void(undefined)">
Reset Position        </A>
        </DIV>
        <DIV class="MMrhumb MMcardinal MMEast">
          <A title="Pan East" href="javascript:void(undefined)">
East          </A>
        </DIV>
        <DIV class="MMrhumb MMSouth-West">
          <A title="Pan South-West" href="javascript:void(undefined)">
South-West        </A>
        </DIV>
        <DIV class="MMrhumb MMcardinal MMSouth">
          <A title="Pan South" href="javascript:void(undefined)">
South         </A>
        </DIV>
        <DIV class="MMrhumb MMSouth-East">
          <A title="Pan South-East" href="javascript:void(undefined)">
South-East        </A>
        </DIV>
     </DIV>
     <DIV class="MMzoom">
        <DIV class="MMlabel">
Zoom        </DIV>
        <DIV class="MMzoomin">
          <A title="Zoom In" href="javascript:void(undefined)">
Zoom In       </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf18">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 18">
18        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf17">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 17">
17        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf16">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 16">
16        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf15 MMselected">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 15" class="MMselected">
15        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf14">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 14">
14        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf13">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 13">
13        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf12">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 12">
12        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf11">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 11">
11        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf10">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 10">
10        </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf9">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 9">
9         </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf8">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 8">
8         </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf7">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 7">
7         </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf6">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 6">
6         </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf5">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 5">
5         </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf4">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 4">
4         </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf3">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 3">
3         </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf2">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 2">
2         </A>
        </DIV>
        <DIV class="MMonezoomfactor MMzf1">
          <A href="javascript:void(undefined)" title="Change to Zoom Factor 1">
1         </A>
        </DIV>
        <DIV class="MMzoomout">
          <A title="Zoom Out" href="javascript:void(undefined)">
Zoom Out          </A>
        </DIV>
     </DIV>
  </DIV>
</DIV>

The default Pan/Zoom Widget CSS code

The Alternative Pan/Zoom Widget CSS code


    div.altpanzoom {
      z-index : 1500;
      background : #E4EAF5;
      border : 2px solid #8DA3CD;
      padding : 0px;
      margin : 0px;
    }
    div.altpanzoom div.MMwrapper {
      margin : 0px;
      padding : 0px;
    }
    div.altpanzoom div.MMwrapper div.MMzoom, div.altpanzoom div.MMwrapper div.MMpan {
      background : white;
      border : 1px solid black;
      padding : 2px;
      margin : 10px;
    }

    div.altpanzoom div.MMlabel {
      display : block;
      text-align : center;
      margin-bottom : 5px;
    }
    div.altpanzoom div.MMzoom div.MMlabel {
      margin-top : 10px;
    }
    div.altpanzoom div.MMwrapper div.MMpan {
      margin-top : 8px;
      width : auto;
      height : auto;
    }
    div.altpanzoom div.MMzoom div {
      width : auto;
      height : auto;
      margin : 0px;
      padding : 0px;
    }
    div.altpanzoom div.MMpan div.MMrhumb, div.altpanzoom div.MMpan div.MMreset {
      padding : 0px;
      margin : 0px;
    }
    div.altpanzoom div.MMpan div.MMrhumb a, div.altpanzoom div.MMpan div.MMreset a, div.altpanzoom div.MMzoom div a {
      text-indent : 0;
      line-height : normal;
      display : block;
      padding : 0px;
      margin : 0px;
    }
    div.altpanzoom div.MMwrapper div div a:hover, div.altpanzoom div.MMwrapper div div.MMselected a {
      display : block;
      text-decoration : none;
      background : #E4EAF5;
      margin : 0px;
      padding : 0px;
      border : 0px;
    }

Further Help

Customer Support

For support queries during office hours, please contact your nearest Multimap Customer Support team:

For general account enquiries or further services, please contact your Multimap Sales team:

Australia, Sydney	+ 61 (0) 2 9262 6551
Great Britain, London	+44 (0)20 7632 7777
United States, Boston	+ 1 617 423 4510
email:	info@multimap.com

Australia, Sydney	+ 61 (0) 2 9262 6551
Great Britain, London	+44 (0)20 7632 7800
United States, Boston	+ 1 617 423 4510
email:	sales@multimap.com

Multimap API v1.1 Example

Advanced Widgets Example