How to decrease the Icon (Image) marker size.

**Ulala** · 2012-03-02, 06:55

Hi,

I am confusing on this route map issue, which links should I have to use for my requirement.

Present, we have the code with Coordinate Points as below and the FULL CODE is also shown below. I need only one thing i.e., converting the string (1.e., Address or city name) to coordinate points (i.e., Ex. 50.1120423728813, 8.68340740740811). Please provide me that code.

waypoints.addCoordinate(
new nokia.maps.geo.Coordinate(50.1120423728813, 8.68340740740811));
waypoints.addCoordinate(
new nokia.maps.geo.Coordinate(50.140411376953125, 8.572110176086426));

FULL CODE
========

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" />
	<title>Route - Nokia Maps API Example</title>
	<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
	<div id="map" style="width:600px; height:400px;"></div>
	<script type="text/javascript">
var map = new nokia.maps.map.Display(
	document.getElementById("map"), {
		components: [new nokia.maps.map.component.Behavior()],
		zoomLevel: 11,
		center: [50.12, 8.62]
	}
);

map.removeComponent(map.getComponentById("zoom.MouseWheel"));
// Create a route controller
var router = new nokia.maps.routing.Manager() 
// Create waypoints
var waypoints = new nokia.maps.routing.WaypointParameterList();
waypoints.addCoordinate(
	new nokia.maps.geo.Coordinate(50.1120423728813, 8.68340740740811)
);
waypoints.addCoordinate(
	new nokia.maps.geo.Coordinate(50.140411376953125, 8.572110176086426)
);
var modes = [{
	type: "shortest",
	transportModes: ["car"],
	options: "avoidTollroad",
	trafficMode: "default"
}];

var onRouteCalculated = function (observedRouter, key, value) {
	if (value == "finished") {
		var routes = observedRouter.getRoutes();
		// Create the default map representation of a route
		var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
		map.objects.add(mapRoute);
		// Zoom to the bounding box of the route
		map.zoomTo(mapRoute.getBoundingBox(), false, "default");
	} else if (value == "failed") { 
		alert("The routing request failed.");
	}
};

// Add the observer function to the router's "state" property
router.addObserver("state", onRouteCalculated);

// Calculate the route (and call onRouteCalculated afterwards)
router.calculateRoute(waypoints, modes);
	</script>
  </body>
</html>

**jasfox** · 2012-03-02, 08:03

Originally Posted by Ulala

Hi,
I need only one thing i.e., converting the string (1.e., Address or city name) to coordinate points (i.e., Ex. 50.1120423728813, 8.68340740740811). Please provide me that code.

This is called Geocoding, and can be found in the Playground search example: http://api.maps.nokia.com/2.1.1/play...example=search

Code:

var searchManager = new nokia.maps.search.Manager();
searchManager.addObserver("state", function (observedManager, key, value) {
	// If the search  has finished we can process the results
	if (value == "finished") {
		// We check that at least one location has been found
		if (observedManager.locations.length == 1) {
			alert (observedManager.locations[0].displayPosition);
		} else {
		   alert ("" + observedManager.locations.length + " addresses found.");
		}
	} else if (value == "failed") {
		alert("The search request failed.");
	}
});

var proximity = {
		center: new nokia.maps.geo.Coordinate(52.51, 13.4),
		radius: 1500 // search radius defined in meters
	};

var searchTerm = "invalidenstrasse berlin";
searchManager.geocode(searchTerm, proximity);

**Ulala** · 2012-03-02, 09:25

Ok. It is fine. I need solution for other two problems.

1) The coordinate points are showing like this "28° 36' 52" N, 77° 12' 44" E". How to convert it into 28.6142389,77.2122212.

2) We are getting marker pins A and B. For these points I need infobubble on mouseover with dispalying content. I'll customize the content. Just I need how the infobubble will display on mouseovering the points A and B. Please give me the solution.

**jasfox** · 2012-03-02, 10:35

Originally Posted by Ulala

1) The coordinate points are showing like this "28° 36' 52" N, 77° 12' 44" E". How to convert it into 28.6142389,77.2122212.

The coordinates are instances of nokia.maps.geo.Coordinate http://api.maps.nokia.com/2.1.1/apir...l?s=Coordinate you will need to use coordinate.longitude and coordinate.latitude.

Originally Posted by Ulala

2) We are getting marker pins A and B. For these points I need infobubble on mouseover with dispalying content. I'll customize the content. Just I need how the infobubble will display on mouseovering the points A and B. Please give me the solution.

Adding an Infobubble to a click event can be found here:
http://www.developer.nokia.com/Commu...ble_on_the_map

If you really want to do it on hover, you'd want the following, but I wouldn't recommend it as you can't interact with the Infobubble.

Code:

marker = new nokia.maps.map.StandardMarker();
marker.html = "\"The time has come,\" the Walrus said";
    marker.addListener("mouseover" ,  function(evt) {
                                    infoBubbles.addBubble(evt.target.html, evt.target.coordinate);   
                                        }, false);
    marker.addListener("mouseout" ,  function(evt) {
                                     infoBubbles.removeBubble();

**Ulala** · 2012-03-02, 11:43

Hi,
I tried a lot. I am not getting the conversion for this "28° 36' 52" N, 77° 12' 44" E" into 28.6142389,77.2122212. Please help.

**jasfox** · 2012-03-02, 12:01

Originally Posted by Ulala

Hi,
I tried a lot. I am not getting the conversion for this "28° 36' 52" N, 77° 12' 44" E" into 28.6142389,77.2122212. Please help.

This is what I meant, the observedManager.locations[0].displayPosition is a nokia.maps.geo.Coordinate, extending the previous example

Code:

alert (observedManager.locations[0].displayPosition);
alert ("Latitude is:" + observedManager.locations[0].displayPosition.latitude);
alert ("Longitude is:" + observedManager.locations[0].displayPosition.longitude);

**Ulala** · 2012-03-02, 15:52

Hi,

Please see the below code. The coordinate point values are not coming to this line "waypoints.addCoordinate(... so on..." . How those values will come?. I tried with cookies and lot of other aspects. If that values are came, then I'll replace 41.56366,28.28349 with lat,lon. Please rectify this problem.

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" />
	<title>Route - Nokia Maps API Example</title>
	<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
	<div id="map" style="width:600px; height:400px;"></div>
	<script type="text/javascript">            

            var searchManager = new nokia.maps.search.Manager();
            searchManager.addObserver("state", function (observedManager, key, value) {
                    // If the search  has finished we can process the results
                    if (value == "finished") {
                            // We check that at least one location has been found
                            if (observedManager.locations.length == 1) {
                                   // alert (observedManager.locations[0].displayPosition); 
                                var lat = observedManager.locations[0].displayPosition.latitude;
                                var lon = observedManager.locations[0].displayPosition.longitude;
                            } else {
                                var lat = observedManager.locations[0].displayPosition.latitude;
                                var lon = observedManager.locations[0].displayPosition.longitude;
                            }
                    } else if (value == "failed") {
                            alert("The search request failed.");
                    }
            });

            var proximity = {
                            center: new nokia.maps.geo.Coordinate(28.51434, 77.01219),
                            radius: 1500 // search radius defined in meters
                    };

            var searchTerm = "berlin";
            searchManager.geocode(searchTerm, proximity);
            
     
var map = new nokia.maps.map.Display(
	document.getElementById("map"), {
		components: [new nokia.maps.map.component.Behavior()],
		zoomLevel: 11,
		center: [28.51434, 77.01219]
	}
);

map.removeComponent(map.getComponentById("zoom.MouseWheel"));
// Create a route controller
var router = new nokia.maps.routing.Manager() 
// Create waypoints
alert("Plz check from here. Below I kept Alert message for Lat/Lon value. Those values are not coming here.");
//alert(lat);
//alert(lon);
var waypoints = new nokia.maps.routing.WaypointParameterList();
waypoints.addCoordinate(
	new nokia.maps.geo.Coordinate(41.56366,28.28349)
);
waypoints.addCoordinate(
	new nokia.maps.geo.Coordinate(41.46366,28.08349)
);
var modes = [{
	type: "shortest",
	transportModes: ["car"],
	options: "avoidTollroad",
	trafficMode: "default"
}];

var onRouteCalculated = function (observedRouter, key, value) {
	if (value == "finished") {
		var routes = observedRouter.getRoutes();
		// Create the default map representation of a route
		var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
		map.objects.add(mapRoute);
		// Zoom to the bounding box of the route
		map.zoomTo(mapRoute.getBoundingBox(), false, "default");
	} else if (value == "failed") { 
		alert("The routing request failed.");
	}
};

// Add the observer function to the router's "state" property
router.addObserver("state", onRouteCalculated);

// Calculate the route (and call onRouteCalculated afterwards)
router.calculateRoute(waypoints, modes);
	</script>
        
  </body>
</html>

**Ulala** · 2012-03-05, 04:57

Hi,

Please see the below code. The coordinate point values are not coming to this line "waypoints.addCoordinate(... so on..." . How those values will come?. I tried with cookies and lot of other aspects. If that values are came, then I'll replace 41.56366,28.28349 with lat,lon. Please rectify this problem.

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" />
<title>Route - Nokia Maps API Example</title>
<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:600px; height:400px;"></div>
<script type="text/javascript">

var searchManager = new nokia.maps.search.Manager();
searchManager.addObserver("state", function (observedManager, key, value) {
// If the search has finished we can process the results
if (value == "finished") {
// We check that at least one location has been found
if (observedManager.locations.length == 1) {
// alert (observedManager.locations[0].displayPosition);
var lat = observedManager.locations[0].displayPosition.latitude;
var lon = observedManager.locations[0].displayPosition.longitude;
} else {
var lat = observedManager.locations[0].displayPosition.latitude;
var lon = observedManager.locations[0].displayPosition.longitude;
}
} else if (value == "failed") {
alert("The search request failed.");
}
});

var proximity = {
center: new nokia.maps.geo.Coordinate(28.51434, 77.01219),
radius: 1500 // search radius defined in meters
};

var searchTerm = "berlin";
searchManager.geocode(searchTerm, proximity);


var map = new nokia.maps.map.Display(
document.getElementById("map"), {
components: [new nokia.maps.map.component.Behavior()],
zoomLevel: 11,
center: [28.51434, 77.01219]
}
);

map.removeComponent(map.getComponentById("zoom.MouseWheel"));
// Create a route controller
var router = new nokia.maps.routing.Manager()
// Create waypoints
alert("Plz check from here. Below I kept Alert message for Lat/Lon value. Those values are not coming here.");
//alert(lat);
//alert(lon);
var waypoints = new nokia.maps.routing.WaypointParameterList();
waypoints.addCoordinate(
new nokia.maps.geo.Coordinate(41.56366,28.28349)
);
waypoints.addCoordinate(
new nokia.maps.geo.Coordinate(41.46366,28.08349)
);
var modes = [{
type: "shortest",
transportModes: ["car"],
options: "avoidTollroad",
trafficMode: "default"
}];

var onRouteCalculated = function (observedRouter, key, value) {
if (value == "finished") {
var routes = observedRouter.getRoutes();
// Create the default map representation of a route
var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
map.objects.add(mapRoute);
// Zoom to the bounding box of the route
map.zoomTo(mapRoute.getBoundingBox(), false, "default");
} else if (value == "failed") {
alert("The routing request failed.");
}
};

// Add the observer function to the router's "state" property
router.addObserver("state", onRouteCalculated);

// Calculate the route (and call onRouteCalculated afterwards)
router.calculateRoute(waypoints, modes);
</script>

</body>
</html>

**jasfox** · 2012-03-05, 08:38

Originally Posted by Ulala

Hi,

Please see the below code. The coordinate point values are not coming to this line "waypoints.addCoordinate(... so on..." . How those values will come?. I tried with cookies and lot of other aspects. If that values are came, then I'll replace 41.56366,28.28349 with lat,lon. Please rectify this problem.

Please read up about JavaScript Execution Order : http://javascript.about.com/od/hints...a/exeorder.htm .

Code that is directly in the head and body of the web page and not enclosed in functions or objects will run sequentially as soon as the file containing the code has loaded sufficiently for that code to be accessed. Code that is within functions and objects will be run whenever that function or object is called.

Your current routing code is not held within a function so it will occur first, the lat and long are only calculated once the searchManager state has returned as finished

I guess you want the GeoCoding to complete first and the routing to occur second. Therefore you need to wrap the routing call into a function and call it on the completion of the search completed event passing in the latitude and longitude

Code:

var lat = observedManager.locations[0].displayPosition.latitude;
var lon = observedManager.locations[0].displayPosition.longitude;
doRouting(lat, long);  // This is a function Call

Code:

// This is now held in a function. it is called from the search manager.
function doRouting(lat, long) {
// Create waypoints
alert("Plz check from here. Below I kept Alert message for Lat/Lon value. Those values are not coming here.");
alert(lat);
alert(lon);
... etc...
};

Furthermore, you should read up how to use the search manager in the API documentation: http://api.maps.nokia.com/2.1.1/apir...=search#search . Your current search is looking for streets, towns etc called "BERLIN" within one mile of central Delhi.

**Ulala** · 2012-03-05, 10:27

Thank you for resolving the previous issue.

I kept code for infobubbles click functionality , It is creating new infobubble other than replacing the Points A and B. For your reference I changed the latitude and longitude for point B. when you click on blank infobubble, then it will show content, but I need to show this content when we click on Point B and How to display default content for point A.
Otherwise is there any default content for both Point A and B, after showing the route? If default content is available by nokia maps api, how it should be integrated in my code.

If you don't mind, Please see the below code and tell me the changes to do.

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" />
	<title>Route - Nokia Maps API Example</title>	
  </head>
  <body>
	<div id="map" style="width:800px; height:600px;"></div>
<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">   
            var searchManager = new nokia.maps.search.Manager();
            searchManager.addObserver("state", function (observedManager, key, value) {
                    // If the search  has finished we can process the results
                    if (value == "finished") {
                            // We check that at least one location has been found
                            if (observedManager.locations.length == 1) {
                                   // alert (observedManager.locations[0].displayPosition); 
                                var lat = observedManager.locations[0].displayPosition.latitude;
                                var lon = observedManager.locations[0].displayPosition.longitude;
                                doRouting(lat, lon);  // This is a function Call
                            } else {
                                var lat = observedManager.locations[0].displayPosition.latitude;
                                var lon = observedManager.locations[0].displayPosition.longitude; 
                               // mylat = lat;
                               doRouting(lat, lon);  // This is a function Call
                            }
                    } else if (value == "failed") {
                            alert("The search request failed.");
                    }
            });
            var proximity = {
                           // center: new nokia.maps.geo.Coordinate(28.51434, 77.01219),
                            radius: 1500 // search radius defined in meters
                    };

            var searchTerm = "Akdeniz";
            searchManager.geocode(searchTerm, proximity);            
     
var map = new nokia.maps.map.Display(
	document.getElementById("map"), {
		components: [new nokia.maps.map.component.Behavior()],
		zoomLevel: 11,
		center: [38.4188500, 27.1287200]
	}
);

function doRouting(lat, lon) {
        // Create waypoints
        var infoBubbles = new nokia.maps.map.component.InfoBubbles();
        map.addComponent( infoBubbles);
        //map.removeComponent(map.getComponentById("zoom.MouseWheel"));
        // Create a route controller
        var router = new nokia.maps.routing.Manager() 
        // Create waypoints
        alert(lat);
        alert(lon);
        var waypoints = new nokia.maps.routing.WaypointParameterList();
        waypoints.addCoordinate(
                new nokia.maps.geo.Coordinate(lat,lon)
        );
        waypoints.addCoordinate(
                new nokia.maps.geo.Coordinate(38.4188500, 27.1287200)
        );
        var modes = [{
                type: "shortest",
                transportModes: ["car"],
                options: "avoidTollroad",
                trafficMode: "default"
        }];

        var onRouteCalculated = function (observedRouter, key, value) {
                if (value == "finished") {
                        var routes = observedRouter.getRoutes();
                        // Create the default map representation of a route
                        var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
                        map.objects.add(mapRoute);
                        // Zoom to the bounding box of the route
                        map.zoomTo(mapRoute.getBoundingBox(), false, "default");
                } else if (value == "failed") { 
                        alert("The routing request failed.");
                }
        };
        // Add the observer function to the router's "state" property
        router.addObserver("state", onRouteCalculated);
        // Calculate the route (and call onRouteCalculated afterwards)
        router.calculateRoute(waypoints, modes);
        
        function addInfoBubble(infoBubbles, marker, html) {
               marker.html = html;
            marker.addListener("click" ,  function(evt) {
                                            infoBubbles.addBubble(evt.target.html, evt.target.coordinate);   
                                                }, false);
        }
        var marker;
        var markers = new Array();
        marker =  new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(lat,lon));//lat,lon
        addInfoBubble( infoBubbles, marker, "<div><a href='http://www.mcfc.co.uk' >Manchester City</a></div><div >City of Manchester Stadium<br>Capacity: 48,000</div>");
        markers.push(marker);
        marker = new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(38.5188500, 27.1287200));
        addInfoBubble( infoBubbles, marker, "<div ><a href='http://www.liverpoolfc.tv' >Liverpool</a></div><div >Anfield<br>Capacity: 45,362</div>");
        markers.push(marker);
        map.objects.addAll(markers);
}
</script>
        
  </body>
</html>

**jasfox** · 2012-03-05, 12:03

Originally Posted by Ulala

Thank you for resolving the previous issue.

I kept code for infobubbles click functionality , It is creating new infobubble other than replacing the Points A and B. For your reference I changed the latitude and longitude for point B. when you click on blank infobubble, then it will show content, but I need to show this content when we click on Point B and How to display default content for point A.

Since you have added "click" event listeners to a pair of new markers, it is not surprising the previously created markers aren't responding to the "click" event.
Do you see these lines

Code:

var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
map.objects.add(mapRoute);

This is where the A marker, the B marker and the polyline are created. You will need to wire up the "click" events here, not on separate new markers.

Code:

var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;

mapRoute.objects.get(1).html = "\"The time has come\", the walrus said";
mapRoute.objects.get(1).addListener("click" , function(evt) {
infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
}, false);

mapRoute.objects.get(2).html = "\"To talk of many things:";
mapRoute.objects.get(2).addListener("click" , function(evt) {
infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
}, false);

map.objects.add(mapRoute);

...etc...

**Ulala** · 2012-03-05, 12:54

Ok. Its working fine. You solved me so many issues. I am very thankful to you.

**Ulala** · 2012-03-06, 04:51

Hi,

1) How to change the color of Route map Points A and B. Now the pins are displaying with Blue background, White border and white color text. I need to change these colors. Please tell me.

**jasfox** · 2012-03-06, 09:31

Originally Posted by Ulala

Hi,

1) How to change the color of Route map Points A and B. Now the pins are displaying with Blue background, White border and white color text. I need to change these colors. Please tell me.

You just need to set the properties on the marker - see this example: http://api.maps.nokia.com/2.1.1/play...ardmarkerprops

Code:

var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
mapRoute.objects.get(1).set("text","Hi");
mapRoute.objects.get(1).set("textPen",{strokeColor: "#333"});
mapRoute.objects.get(1).set("brush",{color: "#FFF"});

A full list of properties can be found in the API reference. http://api.maps.nokia.com/2.1.1/apir...ardMarker.html

**Ulala** · 2012-03-06, 10:11

Hi,

I changed two colors. I need another one also. Border(Stroke) of that pin is appearing in white. I need to change that color also.

Discussion Board

Thread: How to decrease the Icon (Image) marker size.

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

icon image size for nokia 6670

How to decrease the size of animations by changing the source images?

How can I decrease and optimize the size of my animated wallpaper?

What can be done to decrease JAR size?

Posting Permissions