×

Discussion Board

Results 1 to 2 of 2
  1. #1
    Registered User
    Join Date
    Feb 2013
    Posts
    1

    How to change the color of just one information Bubble?

    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?

  2. #2
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

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

    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>

Similar Threads

  1. Replies: 4
    Last Post: 2013-01-29, 06:31
  2. Color change depending of the theme color
    By digitalsol in forum Symbian User Interface
    Replies: 2
    Last Post: 2010-06-28, 16:24
  3. Tab color change
    By LAS_VEGAS in forum Symbian User Interface
    Replies: 2
    Last Post: 2008-10-27, 12:30
  4. color information from png image header
    By neha_rashi in forum Mobile Java General
    Replies: 0
    Last Post: 2008-02-17, 11:53
  5. how to change the color??
    By chandrasekharan in forum Symbian
    Replies: 10
    Last Post: 2007-07-31, 10:21

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •