How to change the color of just one information Bubble?

**mirzar** · 2013-02-05, 23:20

So I have a map set up with a bunch of different colored markers. I am trying to set it it up so that the marker for the first Bubble is in Red and the rest are a default color. Here's what my code looks like so far - http://pastie.org/private/r12qnlustqttapstze2eq. Any idea on how to change the marker for just the first bubble?

**jasfox** · 2013-02-06, 16:41

If you create a function searchResponse which takes a parameter i, this can be used as a reference within the function. searchResponse in turn has a method processResults which is passed to the geocoder.
The processResults function decrements the address count and zoomsTo the collection when all items are found.

Here is the call to the geocoder:

Code:

for (; i < len; i++) {
	searchManager.geoCode({
		searchTerm: addresses[i],
		onComplete: new searchResponse(i).processResults
	});
	}

Here is the signature of the searchResponse function

Code:

function searchResponse(i) {
		
		var that = this;
		that.$index = i;
		that.processResults = function (data, requestStatus, requestId) {

                if (that.$index == 0){	
                      //RED MARKER													
		} else {
			// BLUE MARKER
		}
                 ...etc.

                }
};

The full code can be seen below. Ideally there should be a further clause added to processResults to account for failure, but I'd left it out for clarity.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
		<title>Nokia Maps API Example: Concurrent Search</title>
		
		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js"></script>
		

</head>
		
		
		
			<style type="text/css">
			html {
				overflow:hidden;
			}
			
			body {
				margin: 0;
				padding: 0;
				overflow: hidden;
				width: 100%;
				height: 100%;
				position: absolute;
			}
			
			#mapContainer {
				width: 100%;
				height: 90%;
			}
		</style>
	</head>
	<body>		
		<div id="mapContainer"></div>
		<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
//
			nokia.Settings.set( "appId", "YOUR APPID"); 
			nokia.Settings.set( "authenticationToken", "YOUR TOKEN");
//			
/////////////////////////////////////////////////////////////////////////////////////	
		</script>
		<div id="uiContainer"></div>
		<script>
var mapContainer = document.getElementById("mapContainer");
	var infoBubbles = new nokia.maps.map.component.InfoBubbles();
	var map = new nokia.maps.map.Display(mapContainer, {
	center: [34.101482, -118.33664],
	zoomLevel: 4,
	components:[
		new nokia.maps.map.component.Behavior(),
		infoBubbles
	]
	});
	
	var TOUCH = nokia.maps.dom.Page.browser.touch,
	CLICK = TOUCH ? "tap" : "click";
	
	
	
	var addresses = ["Berlin", "Paris", "London"," Los Angeles"	],
	// We will put our address markers into this container zo we can zoom in to the markers
	addressesContainer = new nokia.maps.map.Container(),
	searchCenter = new nokia.maps.geo.Coordinate(52.51, 13.4),
	searchManager = nokia.places.search.manager,
	i = 0 , 
	len = addresses.length,
	requests = addresses.length;
	
	map.objects.add(addressesContainer);

function searchResponse(i) {
		
		var that = this;
		that.$index = i;
		that.processResults = function (data, requestStatus, requestId) {
			var location = data.location;
			
			if (requestStatus == "OK") {
			    var marker;					
				if (that.$index == 0){						
					marker = new nokia.maps.map.StandardMarker(location.position,
							{brush: {
						color: "#FF0000"
					}});															
				} else {
					marker = new nokia.maps.map.StandardMarker(location.position,
							{brush: {
						color: "#0000FF"
					}});	
					
				}
			    marker.$address = location.address;
				marker.$label = data.name;
				marker.addListener(
					CLICK, 
					function (evt) { 
						// Set the tail of the bubble to the coordinate of the marker
						infoBubbles.addBubble(evt.target.$label, evt.target.coordinate);
					});
				addressesContainer.objects.add(marker);
				
				// Keep a global count of addresses and decrement	
				requests--;
				if (requests == 0) {
					map.zoomTo(addressesContainer.getBoundingBox());
				}
			}		
	};
};
	
	
	for (; i < len; i++) {
	searchManager.geoCode({
		searchTerm: addresses[i],
		onComplete: new searchResponse(i).processResults
	});
	}
	

 </script>
	</body>
</html>

Discussion Board

Thread: How to change the color of just one information Bubble?

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

how to change the listbox item text color on change of theme?

Color change depending of the theme color

Tab color change

color information from png image header

how to change the color??

Posting Permissions