Multimap API V1.2 JavaScript Example
Multimap API V1.2 JavaScript Example
Before reading this example you should read the Adding Widgets to the Map example 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 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 (or in relation to) the map viewer, and you can restyle the widget to have an entirely different appearance.
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, but the Map Type Widget has just one.)
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,
although 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 mapTypeWidget = new MMMapTypeWidget( undefined, bottomLeft ); // Map Type Widget with settings, positioned in the bottom left
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
In the code at the end of this page you will find the HTML for the Map Type Widget and the Pan/Zoom Widget. What follows is a description of that HTML and how to style it.
When using a custom class name to restyle the Map Type Widget, a simpler form of HTML is used by default without the map data selector. This simpler form is discussed here. Passing true as the fourth argument to the constructor will force the map data selector to show up. This widget contains two links on which the user can click. The links contain text detailing what they show, for example, "Maps" or "Aerial". To allow greater scope for styling, these links are placed within a SPAN element. The SPAN has a class name which defines the type of map that the link inside will display, and which of the map types is currently displayed. These SPAN elements are then placed within a DIV, which is nested within another DIV, again to allow greater scope for restyling. For example:
DIV.MMMapTypeWidget DIV.MMinner span.MM_WORLD_MAP.MMselected a
DIV.MMMapTypeWidget DIV.MMinner span.MM_WORLD_AERIAL a
The first SPAN containing a map type always has the class MMfirst, regardless of the map types shown. There are also two SPAN elements positioned before and after the map type SPAN elements. These have class names MMpre and MMpost respectively.
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 DIV that resets the map's position 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 or .MMMapTypeWidget with .yourclass, depending on which widget you are restyling, and continue from there. A link to the default Multimap API style sheet can be found below.
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 code below lists the HTML for the widgets, then the default CSS and supplementary CSS for the restyled widgets shown above.
<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.2/demo"></script>
Sorry, JavaScript required...
Sorry, JavaScript required...
Sorry, JavaScript required...
<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>
Alternative styles for widgets
For more information on the subject of Multimap API JavaScript code, please read the API documentation at: http://clients.multimap.com/share/documentation/api/1.2/classes/.
If you have purchased the Multimap API's optional Weather module, you can also customize the appearance and behavior of the Weather Widget.
If you require further help with your map API implementation, please contact the Multimap Customer Support team:
| London, Great Britain | +44 (0)20 7632 7777 |
| email: | info@multimap.com |
For general account enquiries or further services, please contact the Multimap Sales team:
| London, Great Britain | +44 (0)20 7632 7800 |
| email: | sales@multimap.com |