Multimap API v1.1 Example

Restyled Info Box Example

Before reading this example you should read the Opening an Info Box example to learn the basic features.

The Multimap API gives developers a large amount of control over their map viewers. Not only can custom markers be used, but info boxes can also be re-styled. This page gives an example of a restyled info box and also describes the methods required to restyle an info box.

In the code at the end of this page you will find the HTML for an entire info box. What follows is a description of that HTML and how to style it.

The Multimap info box is made up of a DIV.MMInfoBox which is styled to be one pixel wide and one pixel high. This is then placed on the map at the correct location.

Inside this DIV is a second DIV with class MMplacer. This is absolutely positioned by default and should be styled so that is in the correct place relative to the DIV.MMInfoBox element. DIV.MMplacer exists only to place correctly the HTML that it contains.

For instance, to place DIV.MMplacer (and the HTML it contains) so that its bottom left touches the spot on the map to which it has been connected, you should give it the style:

.MMplacer { left : 0px; bottom : 0px; }

Inside the DIV.MMplacer is a table and another DIV. The DIV is a spare that can be used for whatever purpose you like, most likely to draw the connector between the main body of the info box and the point on the map to which it relates. Alternatively, you could use this technique:

.MMInfoBox .MMconnector { display : none; }

The table within DIV.MMplacer can be used to style the box surrounding your content. Every cell in the table can be accessed by using the row and cell class. For instance, the top left cell is TR.MMtop TD.MMleft and the bottom right cell is TR.MMbottom TD.MMright

Please note that you cannot force TD cells to have specific dimensions; they try to shrink to fit the minimum size possible. Every TD has a DIV.MMspacer within it, which can be used to force the width and height.

The map viewer moves, by default, to place an info box correctly within its map. To do this, it needs to know the size of the info box. It calculates this from the size of the DIV.MMplacer, so please ensure that whatever you place within that element actually takes up space (rather than, for instance, floating, or being absolutely positioned).

Important Note: Due to the fact that most browsers do not print background colors or images by default, a style-sheet rule has been used to hide info boxes from print-outs. You should not copy this rule unless you know that your users will be able to print out the info boxes correctly.

Important Note: If you pass a class into your info box constructor, the Multimap default styles will not be applied. The base DIV will no longer be DIV.MMInfoBox and instead will be solely the class that you pass in, e.g., mapviewer.createInfoBox( html, 'altinfobox' ); would result in DIV.altinfobox. The easiest way to restyle is to start from a copy of the Multimap default styles, replacing all instances of .MMInfoBox with .altinfobox and go from there. A link to the default Multimap API style-sheet can be found below.

If you wish to learn about connecting info boxes to markers, you will find an example of this on the Info boxes above markers page.

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 opens a default info box at the center of the map. When you click on the second link the viewer opens a re-styled info box on Fleet Street, it moves the map so that the info box fits if necessary.

The Map

Open Default Info Box

Open Restyled Info Box

Remove All Info Boxes

The Code

There are four parts to the code below. The first is an example of the JavaScript code you must place in the HEAD section of your web page in order to create the info boxes used in this example. The second gives the HTML code that makes up an info box (and which is usually hidden). The third is the default CSS that is applied to an info box. Finally, the fourth is the CSS code that you should add to the HEAD section of your web page to display the re-styled info box shown above.

The JavaScript code

function firstInfoBox()
{
var html = "<h2>Default&nbsp;Info&nbsp;Box</h2><p>This is an info box with the default styling.</p>";
mapviewer.createInfoBox( mapviewer.getCurrentPosition(), html );  }

function secondInfoBox()
{
var html = "<h2>Restyled&nbsp;Infobox</h2><p>This infobox has been restyled to look different.</p>";
mapviewer.createInfoBox( new MMLatLon( 51.5145, -0.1085 ), html, 'altinfobox' );
}

The Info Box HTML code

     <DIV class="MMInfoBox" style="position: relative; left : 200px; top : 200px;">
        <DIV class="MMplacer">
          <TABLE class="MMInfoBoxTable">          
             <TBODY>
                <TR class="MMtop">
                  <TD class="MMleft">
                     <DIV class="MMspacer"></DIV>
                  </TD>
                  <TD class="MMcenter">
                     <DIV class="MMspacer"></DIV>
                  </TD>
                  <TD class="MMright">
                     <DIV class="MMspacer"></DIV>
                  </TD>
                </TR>
                <TR class="MMmiddle">
                  <TD class="MMleft">              
                     <DIV class="MMspacer"></DIV>
                  </TD>
                  <TD class="MMcenter">
                  <A class="MMclose" href="javascript:void(undefined);">Close Window</A>
                     <DIV class="MMspacer">
                        <!-- All of the code within this DIV is passed into createInfoBox() -->
                        <H2>Hello World!</H2>
                        <P>Welcome to Multimap draggable maps</P>
                     </DIV>
                  </TD>
                  <TD class="MMright">
                  <DIV class="MMspacer"></DIV>
                  </TD>
                </TR>
                <TR class="MMbottom">
                  <TD class="MMleft" > 
                  <DIV class="MMspacer"></DIV>
                  </TD>
                  <TD class="MMcenter">
                     <DIV class="MMspacer"></DIV>
                  </TD>
                  <TD class="MMright">
                  <DIV 
                     class="MMspacer"></DIV>
                  </TD>
                </TR>
             </TBODY>
          </TABLE>
          <DIV class="MMconnector"></DIV>
        </DIV>
     </DIV>

The default Info Box CSS code

The default Info Box CSS code can be found in the Multimap API stylesheet

The Alternative Info Box CSS code


      @media print { div.altinfobox { display : none; } }
      div.altinfobox .MMInfoBoxTable, 
      div.altinfobox .MMtop,
      div.altinfobox .MMmiddle,
      div.altinfobox .MMbottom,
      div.altinfobox .MMleft,
      div.altinfobox .MMcenter,
      div.altinfobox .MMright {
        border : 0px;
        padding : 0px;
        margin : 0px;
      }
      div.altinfobox { width : 1px;
        height : 1px;
        overflow : visible;
      }
      div.altinfobox table { border-collapse : collapse;
        padding : 0px;
        margin : 0px;
        border : 0px;
      }
      div.altinfobox tr.MMtop td.MMleft, div.altinfobox tr.MMtop td.MMright,
      div.altinfobox tr.MMmiddle td.MMleft, div.altinfobox tr.MMmiddle td.MMright,
      div.altinfobox tr.MMbottom td.MMleft, div.altinfobox tr.MMbottom td.MMright {
        background : transparent ;
        border : 0;
        filter : none;
        width : 0px;
        height : 0px;
      }
      div.altinfobox tr.MMtop td.MMleft .MMspacer, div.altinfobox tr.MMtop td.MMright .MMspacer,
      div.altinfobox tr.MMmiddle td.MMleft .MMspacer, div.altinfobox tr.MMmiddle td.MMright .MMspacer,
      div.altinfobox tr.MMbottom td.MMleft .MMspacer, div.altinfobox tr.MMbottom td.MMright .MMspacer {
        background : transparent;
        border : 0;
        filter : none;
        width : 1px;
        height : 1px;
      }
      div.altinfobox div.MMplacer {
        position : absolute;
        bottom : 0px;
        left : -6px;
      }
      div.altinfobox .MMclose {
        overflow : hidden;
        text-indent : -9999px;
        position : absolute;
        left : 157px;
        top : 3px;
        right : 0px;
        margin-right : 5px;
        background : transparent url(http://www.multimap.com/yell/yell_mandd/img/map_bubble_close.gif) top left no-repeat;
        width : 11px;
        height : 11px;
        filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src:"http://www.multimap.com/yell/yell_mandd/img/map_bubble_close.gif");
      }
       div.altinfobox tr.MMtop td.MMcenter {
        background : transparent url(http://www.multimap.com/yell/yell_mandd/img/map_bubble_top.gif) left top no-repeat;
      }
      div.altinfobox tr.MMtop td.MMcenter div.MMspacer {
        width : 172px;
       height : 5px;
      }
      div.altinfobox tr.MMmiddle td.MMcenter {
        background : transparent url(http://www.multimap.com/yell/yell_mandd/img/map_bubble_mid.gif) left top repeat-y;
      }
      div.altinfobox tr.MMmiddle td.MMcenter .MMspacer {
        padding : 2px;
      }
      div.altinfobox tr.MMmiddle td.MMcenter p {
        margin:0px 5px 0px 5px;
      }
      div.altinfobox tr.MMbottom td.MMcenter {
        background : transparent url(http://www.multimap.com/yell/yell_mandd/img/map_bubble_base.gif) left top no-repeat;
        border : 0;
        filter : none;
      }
      div.altinfobox tr.MMbottom td.MMcenter div.MMspacer {
        width : 172px;
        height : 13px;
        background : transparent;
        filter : none;
      }
      div.altinfobox .MMconnector {
        display : none;
      }

For more information on the subject of Multimap API JavaScript code, please read the API documentation at: http://www.multimap.com/share/mapviewerapidocs/1.1/index.html.

Further Help

If you require further help with your map API implementation, please contact our Customer Support 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

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 7800
United States, Boston + 1 617 423 4510
email: sales@multimap.com