×
Namespaces

Variants
Actions
Revision as of 11:53, 27 February 2012 by jasfox (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

HERE Maps API - How to create a tabbed Infobubble

From Nokia Developer Wiki
Jump to: navigation, search

Underconstruction.pngUnder Construction: (20120227085323) This article is under construction and it may have outstanding issues. If you have any comments please use the comments tab.

This article explains how to use CSS styling to modify an infobubble. Initially a simple change of colour scheme is discussed, the article then move on to more advanced topics such as how to create a usable tabbed infobubble through combining CSS styling with DOM event handling.

Article Metadata
Code ExampleTested with
Devices(s): Google Chrome 16.0.912, Firefox 10.0.2, Internet Explorer 8
Compatibility
Platform(s): Web Browser
Dependencies: Nokia Maps 2.1.1
Article
Keywords: Nokia Maps, JavaScript, Infobubble, CSS
Created: jasfox (27 Feb 2012)
Last edited: jasfox (27 Feb 2012)
See Also

Introduction

.nm_bubble_content{
color:black;
background:white;
border: 1px solid black;
padding:0px;
}
 
/* begin css tab Headers */
 
ul.nm_tabnav { /* general settings */
position: relative;
top: -39px;
color:black;
text-align: left;
margin: 0px -1em 1em 0px;
list-style-type: none;
padding: 3px 10px 0.1em 10px;
font-size:small;
}
 
ul.nm_tabnav li { /* do not change */
display: inline;
background:white;
border: 0.1em solid black;
position: relative;
top: 1px;
padding: 3px 1em;
/* You can add your own styling here */
color:blue;
}
 
ul.nm_tabnav li.nm_tab_current { /* do not change */
border-bottom: 0.2em solid white; /* set border COLOR as desired */
font-weight:bold;
color:red;
}
 
/* begin css tab Content */
 
.nm_bubble_content > div{
display: block;
}
 
.nm_bubble_content > div + div{
display: none;
}

SaratogaBlack.png

SaratogaWhite.png

SaratogaTab.png

DecisiveBattles.png


	<body>
<div>
<h2>Use of Styled Infobubbles: Battle of Saratoga</h2>
<p style="width:800px;"> Click the buttons to show the location of the Battle of Saratoga, chosen as one of the most of the significant military
engagements in World History, by the historian Sir Edward Shepherd Creasy. For the remaining entries on the list, see the
<a href="./battlesKML.html">decisive battles</a> example.
</p>
<input id="button1" type="button" value="Infobubble" onclick="showInfoBubble();" />
<input id="button2" type="button" value="Tabbed Infobubble" onclick="showTabbedInfoBubble();" />
</div>
<div id="mapcanvas" style="width:800px; height:400px;" >&nbsp;</div>
 
 
<script type="text/javascript">
/*<![CDATA[*/
 
 
// We create a new instance of InfoBubbles bound to a variable so we can call it later on.
// Since infoBubbles is used directly by both of the buttons, we need to give it global scope.
var infoBubbles = new nokia.maps.map.component.InfoBubbles();
infoBubbles.options.defaultWidth = 400;
 
 
//////////////////////////////////////////////////////////////////////////////
//
// Place all the initialisation within an anonymous function, since we don't
// want to pollute the name space with these one-off set up functions.
//
(function () {
 
 
// Don't forget to set your API credentials
nokia.maps.util.ApplicationContext.set({"appId": "YOUR APPID", "authenticationToken": "YOUR TOKEN"});
 
 
//
// Not all browsers support getElementsByClassName as standard, but the only indicator for the tab control
// is its class. Hence it is necessary to repeat this as a standard library function to ensure that all browsers
// can support tabbed Infobubbles
//
//
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(class_name) {
var docList = this.all || this.getElementsByTagName('*');
var matchArray = new Array();
 
/*Create a regular expression object for class*/
var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
for (var i = 0; i < docList.length; i++) {
if (re.test(docList[i].className) ) {
matchArray[matchArray.length] = docList[i];
}
}
return matchArray;
}
}
 
//
// Set up the click event on the infoBubble display. This uses the standard DOM event
// handling technique. The Listener is set up on the containing DIV rather than requiring
// separate handlers for each LI element.
//
function wireUpTabbedInfoBubble(){
var Page = nokia.maps.dom.Page;
var EventTarget = nokia.maps.dom.EventTarget;
// This element will only exist once the map has been displayed.
var infoBubbleDisplay = document.getElementsByClassName("nm_bubble_content")[0];
 
// Query Page support for the node.
Page(infoBubbleDisplay);
 
// Attach EventTarget interface to the document to allow normalized events at the node.
EventTarget(infoBubbleDisplay);
 
// Add a listener for the click event to the node and show an alert if clicked.
infoBubbleDisplay.addListener("click", function (evt) {
if(evt.target.className == "nm_tab"){
var offset = 0;
var tabs = evt.target.parentNode.children;
var tabContent = this.children;
 
while (offset < tabContent.length) {
if (tabContent[offset].nodeName== "DIV" ) {
break;
}
offset++;
}
// Loop through all the LI elements and set the clicked on to current,
// At the same time ensure only the nth DIV associated with the Nth Tab
// is visible - all other are set to display:none.
 
for (var i = 0, len = tabs.length; i < len; i++){
if ( tabs[i] == evt.target){
tabs[i].className = 'nm_tab_current';
tabContent[i+ offset].style.display ='block';
} else {
tabs[i].className = 'nm_tab';
tabContent[i + offset].style.display ='none';
}
}
}
}, false);
}
 
//////////////////////////////////////////////////////////////////////////////
//
// The actual set-up of the map starts here.
//
//////////////////////////////////////////////////////////////////////////////
 
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapcanvas");
 
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
components: [
new nokia.maps.map.component.panning.Drag(),
new nokia.maps.map.component.panning.Kinetic(),
infoBubbles
],
'zoomLevel': 2,
'center': [43.09, -53.674]
});
 
// Only once the map is displayed can we wire up the tabbed infobubble.
wireUpTabbedInfoBubble();
}());
//
// End of anonymous set-up function.
//
//////////////////////////////////////////////////////////////////////////////
 
//////////////////////////////////////////////////////////////////////////////
//
// The functions which are explicitly called by the page start here
//
 
//
//
// A simple function to add text to an infobubble and display it on the map.
// infoBubbles has been given global scope so we can access it directly.
//
//
function showInfoBubble(){
 
var myHTMLcontent =
"<h2>Battle of Saratoga</h2>" +
"<h3>Excerpt</h3>" +
"<div><i><q>" +
"The ancient Roman boasted, with reason, of the growth of Rome from humble beginnings to the greatest magnitude " +
"which the world had then ever witnessed. But the citizen of the United States is still more justly entitled to claim this praise." +
"</q></i></div> " +
"<h3>Combatants</h3> " +
"<div>Great Britain, Brunswick-Wolfenb&uuml;ttel, Hesse Hesse-Hanau vs. United States<br/>" +
"Commanders and leaders: John Burgoyne, Simon Fraser &dagger;, F.A. Riedesel, Johann Specht, Wilhelm R. von Gall, Horatio Gates " +
"</div>";
 
infoBubbles.addBubble(myHTMLcontent, new nokia.maps.geo.Coordinate(43.09, -73.674)) ;
}
//
// A function to add a tabbed infobubble and display it on the map.
// infoBubbles has been given global scope so we can access it directly.
// The text in a tabbed infobubble is initialised in three parts:
// 1) An array of Tab Headers
// 2) An array of Tab Content
// 3) An optional Title to show on all tabs.
//
function showTabbedInfoBubble(){
 
var tabs = new Array();
tabs.push ("Excerpt");
tabs.push ("Combatants");
 
var content = new Array();
content.push ("<i><q>" +
"The ancient Roman boasted, with reason, of the growth of Rome from humble beginnings to the greatest magnitude " +
"which the world had then ever witnessed. But the citizen of the United States is still more justly entitled to claim this praise." +
"</q></i>");
content.push ("Great Britain, Brunswick-Wolfenb&uuml;ttel, Hesse-Hanau vs. United States<br/>" +
"Commanders and leaders: John Burgoyne, Simon Fraser &dagger;, F.A. Riedesel, Johann Specht, Wilhelm R. von Gall, Horatio Gates ");
infoBubbles.addBubble(tabbedContent(tabs, content, "<h2>Battle of Saratoga</h2>"), new nokia.maps.geo.Coordinate(43.09, -73.674)) ;
}
//
// A function transform the array of Tab Headers, array of Tab Content and an optional Title into a single string of HTML Content.
//
function tabbedContent(tabs, content, title){
var myHTMLcontent = "<ul class=\"nm_tabnav\">";
for (var i = 0; i < tabs.length; i++){
if (i==0){
myHTMLcontent = myHTMLcontent + "<li class=\"nm_tab_current\">"+ tabs[i] + "</li>";
} else {
myHTMLcontent = myHTMLcontent + "<li class=\"nm_tab\">"+ tabs[i] + "</li>";
}
}
myHTMLcontent = myHTMLcontent + "</ul>" + title;
for (var i = 0; i < content.length; i++){
if (i==0){
myHTMLcontent = myHTMLcontent + "<div>"+ content[i] + "</div>";
} else {
myHTMLcontent = myHTMLcontent + "<div>"+ content[i] + "</div>";
}
}
return myHTMLcontent;
}

Summary

Add categories below. Remove Category:Draft when the page is complete or near complete

180 page views in the last 30 days.
×