Multimap Open API V1.2 Example

Advanced Widgets Example

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

The Multimap Open 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 info boxes can be completely restyled 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 restyle the widget to have an entirely different appearance.

Repositioning 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

  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

Restyling 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 restyling. 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, for example, "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, for example, 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, for example, 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, for example, "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 continue from there. A link to the default Multimap Open 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 each link, the viewer adds a widget of that type.

If you right-click anywhere on the map a restyled version of the Context Menu appears, allowing you to zoom in, zoom out or re-center the map.

The Map

The Code

The code below lists the HTML for the widgets, then the default CSS and supplementary CSS for the restyled widgets shown above.

The header code

<script type="text/javascript" src="http://developer.multimap.com/API/maps/1.2/OA08061815803962482"></script>

The body code

Sorry, JavaScript required...

Sorry, JavaScript required...

The JavaScript code

Sorry, JavaScript required...

The widget code

<div class="MMwrapper">
 <div class="MMpan">
  <div class="MMlabel">Pan</div>
  <div class="MMrhumb MMNorth-West">
  <a href="javascript:void(0)" title="Pan North-West">North-West</a></div>
  <div class="MMrhumb MMcardinal MMNorth">
  <a href="javascript:void(0)" title="Pan North">North</a></div>
  <div class="MMrhumb MMNorth-East">
  <a href="javascript:void(0)" title="Pan North-East">North-East</a></div>
  <div class="MMrhumb MMcardinal MMWest">
  <a href="javascript:void(0)" title="Pan West">West</a></div>

  <div class="MMreset"><a href="javascript:void(0)" 
  title="Reset Position">Reset Position</a></div>

  <div class="MMrhumb MMcardinal MMEast">
  <a href="javascript:void(0)" title="Pan East">East</a></div>
  <div class="MMrhumb MMSouth-West">
  <a href="javascript:void(0)" title="Pan South-West">South-West</a></div>
  <div class="MMrhumb MMcardinal MMSouth">
  <a href="javascript:void(0)" title="Pan South">South</a></div>
  <div class="MMrhumb MMSouth-East">
  <a href="javascript:void(0)" title="Pan South-East">South-East</a></div>
 </div>

 <div class="MMzoom">
  <div class="MMlabel">Zoom</div>
  <div class="MMzoomin"><a href="javascript:void(0)" title="Zoom In">Zoom In</a>
  </div>
  <div class="MMzoomfactors">
   <div class="MMonezoomfactor MMzf18">
   <a class="" title="Change to Zoom Factor 18" href="javascript:void(0)">18</a></div>
   <div class="MMonezoomfactor MMzf17">
   <a class="" title="Change to Zoom Factor 17" href="javascript:void(0)">17</a></div>
   <div class="MMonezoomfactor MMzf16">
   <a class="" title="Change to Zoom Factor 16" href="javascript:void(0)">16</a></div>

   <div class="MMonezoomfactor MMselected MMzf15">
   <a class="MMselected" title="Change to Zoom Factor 15" href="javascript:void(0)">15</a></div>

   <div class="MMonezoomfactor MMzf14">
   <a class="" title="Change to Zoom Factor 14" href="javascript:void(0)">14</a></div>
   ...
   <div class="MMonezoomfactor MMzf1">
   <a class="" title="Change to Zoom Factor 1" href="javascript:void(0)">1</a></div>
  </div>
  <div class="MMzoomout"><a href="javascript:void(0)" title="Zoom Out">Zoom Out</a>
  </div>
 </div>
</div>
<div class="MMpost"></div>

The CSS code

Alternative styles for widgets

For more information on the subject of Multimap Open API JavaScript code, please read the Multimap Open API documentation at: http://www.multimap.com/share/documentation/openapi/1.2/classes/.

Back to examples.

Further Help

If you require further help with your Multimap Open API implementation, please visit the Multimap Developer Forums.

For Open API news, announcements and other information, please see our blog.

For enquiries about further Multimap services, please contact the Multimap Sales team: