Re: How to decrease the Icon (Image) marker size.
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>[/CODE]
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;884906]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.
[/QUOTE]
This is called Geocoding, and can be found in the Playground search example: [url]http://api.maps.nokia.com/2.1.1/play...example=search[/url]
[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);
[/CODE]
Re: How to decrease the Icon (Image) marker size.
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 [B]marker pins A and B[/B]. For these points I need [B]infobubble[/B] 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.
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;884934]
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.
[/QUOTE]
The coordinates are instances of nokia.maps.geo.Coordinate [url]http://api.maps.nokia.com/2.1.1/apireference/symbols/nokia.maps.geo.Coordinate.html?s=Coordinate[/url] you will need to use coordinate.longitude and coordinate.latitude.
[QUOTE=Ulala;884934]
2) We are getting [B]marker pins A and B[/B]. For these points I need [B]infobubble[/B] 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.[/QUOTE]
Adding an Infobubble to a [B]click [/B] event can be found here:
[url]http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_How_to_add_an_HTML_InfoBubble_on_the_map[/url]
If you really want to do it [B]on hover[/B], 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();
[/code]
Re: How to decrease the Icon (Image) marker size.
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.
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;884984]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.[/QUOTE]
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);
[/code]
Re: How to decrease the Icon (Image) marker size.
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>[/CODE]
Re: How to decrease the Icon (Image) marker size.
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>[/CODE]
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;885152]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.
[/QUOTE]
Please read up about JavaScript Execution Order : [url]http://javascript.about.com/od/hintsandtips/a/exeorder.htm[/url] .
[QUOTE]
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.
[/QUOTE]
Your current routing code is not held within a function so it will occur [B]first[/B], the lat and long are only calculated once the [I]searchManager [/I]state has returned as [I]finished[/I]
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 [B]passing in the latitude and longitude[/B]
[Code]
var lat = observedManager.locations[0].displayPosition.latitude;
var lon = observedManager.locations[0].displayPosition.longitude;
doRouting(lat, long); // This is a function Call
[/Code]
[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...
};
[/CODE]
Furthermore, you should read up how to use the search manager in the API documentation: [url]http://api.maps.nokia.com/2.1.1/apireference/symbols/nokia.maps.search.Manager.html?s=search#search[/url] . Your current search is looking for streets, towns etc called "BERLIN" within one mile of central Delhi.
Re: How to decrease the Icon (Image) marker size.
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 [B]I need to show this content when we click on Point B and How to display default content for point A.[/B]
[B]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.[/B]
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>[/CODE]
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;885210]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 [B]I need to show this content when we click on Point B and How to display default content for point A.[/B]
[/QUOTE]
Since you have added "click" event listeners to a pair of [B]new [/B]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);
[/CODE]
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...
[/CODE]
Re: How to decrease the Icon (Image) marker size.
Ok. Its working fine. You solved me so many issues. I am very thankful to you.
Re: How to decrease the Icon (Image) marker size.
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.
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;885310]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.[/QUOTE]
You just need to [B]set [/B] the properties on the marker - see this example: [url]http://api.maps.nokia.com/2.1.1/playground/?example=standardmarkerprops[/url]
[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"});
[/code]
A full list of properties can be found in the API reference. [url]http://api.maps.nokia.com/2.1.1/apireference/symbols/nokia.maps.map.StandardMarker.html[/url]
Re: How to decrease the Icon (Image) marker size.
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.
