How to decrease the Icon (Image) marker size.
I cant see the Maps section in Discussion form page. So I am posting my query here. Please reply for this post.
[B]
From this below code I got the custom image marker. How to decrease the Icon (Image) size on this code.[/B]
[CODE]
var marker = new ovi.mapsapi.map.Marker(
new ovi.mapsapi.geo.Coordinate(52.51, 13.4),{
title: "marker",
visibility: true,
icon: "images/custom_image.png",
//offset the top left icon corner so that it's
//centered above the coordinate
anchor: new ovi.mapsapi.util.Point(32, 32)
});
map.objects.add(marker);[/CODE]
Re: How to decrease the Icon (Image) marker size.
From your code snippet, it appears that you are still using the old OVI maps API, ideally you should use the latest Nokia Maps API 2.1.1 as it has many more features.
You will find an example of resizing image markers in the latest Developer's Playground here:
[url]http://api.maps.nokia.com/2.1.1/playground/?example=spritedmarkers[/url]
The resizing of images is the responsibility of the nokia.maps.gfx.BitmapImage class.
Re: How to decrease the Icon (Image) marker size.
The below code, I am using for displaying map and pop up by clicking on the marker pin. Now we just need decreasing the image size.
But if you change the version for image size, the overall code is need to change ? If yes, please mention how the code I need to change.
[CODE]
<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></div>
<script type="text/javascript">
var bubbleContainer = new ovi.mapsapi.map.component.InfoBubbles();
var coords = new ovi.mapsapi.geo.Coordinate(52.530390, 13.385190);
var marker = new ovi.mapsapi.map.StandardMarker(coords);
var infoBubble;
var restore_bubble = false;
var bubbleText = "Ovi Maps; Made Here"
map = new ovi.mapsapi.map.Display(
document.getElementById("map"),
{
'zoomLevel': 12,
'center': [52.530390, 13.385190],
components: [
new ovi.mapsapi.map.component.Behavior(),
bubbleContainer
]
});
marker.addListener("click", function() {
infoBubble = bubbleContainer.addBubble(bubbleText, coords);
restore_bubble = true;
});
// marker.enableDrag();
map.objects.add(marker);[/CODE]
Re: How to decrease the Icon (Image) marker size.
Since Ovi Maps has been replaced with Nokia Maps, two changes are required in the code:
1) Replace [url]http://api.maps.ovi.com/jsl.js[/url] with [url]http://api.maps.nokia.com/2.1.1/jsl.js[/url] because the API is hosted in a different domain.
2) Replace all instances of ovi.mapsapi with nokia.maps since the objects are created in a different namespace.
The Standard Marker cannot be resized because it is, well, standard. You will need to replace it with a custom Marker such as an image marker. If you have a look at the Playground example, the two images are loaded from a single PNG graphic here:
[url]http://api.maps.nokia.com/2.1.1/playground/examples/res/markers.png[/url] - If you want an image and a reduced image you will need to a pair of image markers and clip out the size you want.
If all you want is a small marker, just pick a small image like this circle:
var coords = new nokia.maps.geo.Coordinate(52.530390, 13.385190);
var marker = new nokia.maps.map.Marker(
coords,{
icon: "http://api.maps.nokia.com/2.1.0/playground/examples/res/kml/usgs/images/circle-blue.png",
anchor: new nokia.maps.util.Point(5, 5)
});
Re: How to decrease the Icon (Image) marker size.
Hi, Thanks for sending replying early. I did everything as you said in the early reply, I have two problems in this [B]below code[/B].
1) After clicking the image, popup is coming with Black color background.. How to change that color?
2) Image size is not reducing with new Bitmap code from [url]http://api.maps.nokia.com/2.1.0/apireference/symbols/nokia.maps.gfx.BitmapImage.html[/url]
Please rectify these two issues.
[CODE]
<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var alat = 52.530390;
var along= 13.385190;
var bubbleContainer = new nokia.maps.map.component.InfoBubbles();
var coords = new nokia.maps.geo.Coordinate(alat, along);
var marker = new nokia.maps.map.StandardMarker(coords);
var infoBubble;
var restore_bubble = false;
var bubbleText = "Test"
map = new nokia.maps.map.Display(
document.getElementById("map"),
{
'zoomLevel': 12,
'center': [alat, along],
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector(),
bubbleContainer
]
});
image ='http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg';
var marker = new nokia.maps.map.Marker(
new nokia.maps.geo.Coordinate(alat, along),{
title: "marker",
visibility: true,
icon: image,
//offset the top left icon corner so that it's
//centered above the coordinate
anchor: new nokia.maps.util.Point(12, 12)
});
marker.addListener("click", function() {
infoBubble = bubbleContainer.addBubble(bubbleText, coords);
restore_bubble = true;
});
// marker.enableDrag();
map.objects.add(marker);
</script>[/CODE]
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;884427]
1) After clicking the image, popup is coming with Black color background.. How to change that color?
[/QUOTE]
If you want to Style the Infobubble look at the example here:
[url]http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_How_to_create_a_tabbed_Infobubble[/url]
[QUOTE=Ulala;884427]
2) Image size is not reducing with new Bitmap code from [url]http://api.maps.nokia.com/2.1.0/apireference/symbols/nokia.maps.gfx.BitmapImage.html[/url]
[/QUOTE]
If you look at the example [url]http://api.maps.nokia.com/2.1.1/playground/?example=spritedmarkers[/url] you will see that both the Images are within the [B]same [/B] graphic. Your Yahoo Image is only one image and a large size. If this is a image on your server you can easily host a smaller version of the graphic on your server yourself. You can then either:
a) Save both graphics in one file and dynamically clip the appropriate part of the image, as is done on the Playground Example.
b) Save both graphics in separate files and set the icon image to the smaller one.
[CODE]var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 50, 50, 30, 90);
startMarker = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(52.516372, 13.380001), {
icon: startIcon,
anchor: new nokia.maps.util.Point(16, 30)
});
map.objects.add(startMarker);[/CODE]
You wouldn't usually modify a bitmap on the fly using JavaScript on the client side. Do it once and store it on the server.
If you want a client side resizable marker, your probably going to be looking at SVG graphics like this: [url]http://api.maps.nokia.com/2.1.1/playground/?example=customsvgmarker[/url] you can play around with the code to change the size of the graphic.
Since an Infobubble takes HTML, you could place an <img> tag into an [B]Infobubble[/B] and display an image there, you can resize this image using the height and width attributes in the usual way since it is standard HTML, but you would still be downloading the full size images.
Re: How to decrease the Icon (Image) marker size.
Hi,
Using this [B]below code[/B], the image is cropping. I need resizing the image without cutting the edges. Please send me the solution for this.
[CODE]
var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 100, 100, 100, 100);
startMarker = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(52.516372, 13.380001), {
icon: startIcon,
anchor: new nokia.maps.util.Point(16, 30)
});
map.objects.add(startMarker);[/CODE]
Re: How to decrease the Icon (Image) marker size.
Could I point you to my previous post:
[QUOTE=jasfox;884456]IYou wouldn't usually modify a bitmap on the fly using JavaScript on the client side. Do it once and store it on the [B]server[/B].
.[/QUOTE]
There is a reason why you won't find dynamic client-side resizing of images in JavaScript, and why the API doesn't have the functionality to do this. The smaller an image is the quicker it is to load. Downloading a large Image of a picture will slow down your page dramatically. There is no point downloading a slow, large image and then squeezing it to display a smaller one, just download the small one.
If you have control of the images on your server, just open up an image editor such as GIMP or Photoshop and resize to a smaller size and save a copy on your web server. Create the marker with the smaller one.
If you don't have control of your images and you really want to resize on the fly, you'll need to write a servlet on the server side to obtain the image from elsewhere, resize it and then pass the resized 'thumbnail' image to the client. A quick web search came up with a simple Java Solution for this:
[url]http://greatwebguy.com/programming/java/java-image-resizer-servlet/[/url]
There are other alternatives out there for other programming languages such as PHP.
Cropping Images can make sense in some cases as downloading a single image and reusing parts of it can reduce the number round trips to be made to the server.
Re: How to decrease the Icon (Image) marker size.
Thank you very much for your kind reply. ok. I'll re-size Image on server side. Yesterday you sent css code for changing the color of infobubble. It is working fine, but [B]how to change the arrow color?[/B].
I have one more issue. Please show me solution.
I have multiple latitudes and longitudes generated dynamically. Now, [B]I need multiple markers for various latitude and longitudes[/B]. Also I required click event which is showing infobubble with the related message. I written the code in php and using for loop. [B]Please go through the below code and give me solution[/B].
[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>Ovi 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="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></div>
<style type="text/css">
.nm_bubble_content{
color:black;
background:white;
border: 1px solid black;
padding:0px;
}
</style>
<?
$alat = Array('38.385668','39.908105','41.03816','36.788164','39.916388','37.002343','39.86799','37.081958','37.004293');
$along = Array('27.05791','32.860727','28.98478','34.6057','32.862725','35.331382','32.82192','27.456939','35.311241');
?>
<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//var alat = 52.530390;
//var along= 13.385190;
var bubbleContainer = new nokia.maps.map.component.InfoBubbles();
//bubbleContainer.options.defaultWidth = 50;
<?
for ($i=0;$i<=8;$i++)
{
?>
var coords_array_lat = new Array();
coords_array_lat[<?=$i?>] = "<?=$alat[$i]?>";
alert(coords_array_lat[<?=$i?>]);
var coords_array_lon = new Array();
coords_array_lon[<?=$i?>] = "<?=$along[$i]?>";
alert(coords_array_lon[<?=$i?>]);
// var coords = new Array();
// coords[<?=$i?>] = nokia.maps.geo.Coordinate(coords_array_lat[<?=$i?>], coords_array_lon[<?=$i?>]);
// alert(coords[<?=$i?>]);
<? } ?>
var marker = new nokia.maps.map.StandardMarker(coords);
var infoBubble;
var restore_bubble = false;
var bubbleText = "Test message here"
map = new nokia.maps.map.Display(
document.getElementById("map"),
{
'zoomLevel': 12,
'center': [alat, along],
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector(),
bubbleContainer
]
});
var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 32, 10, 10);
startMarker = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(alat, along), {
icon: startIcon,
anchor: new nokia.maps.util.Point(12, 12)
});
startMarker.addListener("click", function() {
infoBubble = bubbleContainer.addBubble(bubbleText, coords);
restore_bubble = true;
});
map.objects.add(startMarker);
</script>
</body>
</html>[/CODE]
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;884574]Thank you very much for your kind reply. ok. I'll re-size Image on server side. Yesterday you sent css code for changing the color of infobubble. It is working fine, but [B]how to change the arrow color?[/B].
[/QUOTE]
The tail of the Infobubble is directly rendered by the Canvas component, you cannot change the colour.
[QUOTE=Ulala;884574]
I have multiple latitudes and longitudes generated dynamically. Now, [B]I need multiple markers for various latitude and longitudes[/B]. Also I required click event which is showing infobubble with the related message.
[/QUOTE]
You just need to loop through an array as yucca pointed out
[CODE]
var infoBubbles = new nokia.maps.map.component.InfoBubbles();
map.components.add(infoBubbles);
var arr = new Array();
arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
arr.push(new nokia.maps.geo.Coordinate(52.5162, 13.32341));
arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));
var info = new Array();
info.push("\"The time has come,\" the Walrus said");
info.push("\"To talk of many things:");
info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");
for (var i = 0; i < arr.length; i++){
marker = new nokia.maps.map.StandardMarker(arr[i]);
marker.html = info[i];
marker.addListener("click" , function(evt) {
infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
}, false);
map.objects.add(marker);
}
[/CODE]
Re: How to decrease the Icon (Image) marker size.
Hi,
Ok. At present, changing of Arrow color is not required.
1) I integrated your code, multiple markers are displaying, but infobubble is not dispalying for that particular marker, Only one message is displaying for all markers. How to display the specific content for that specific marker?. Please make changes for this below code and solve the problem.
2) Also, I need dynamic images have to display for markers. How it will be done?
Please give me the solution for above two issues.
[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>Ovi Maps API Example</title>
<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.nm_bubble_content{
color:black;
background:white;
border: 1px solid white;
padding:0px;
}
</style>
</head>
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></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 infoBubbles = new nokia.maps.map.component.InfoBubbles();
var infoBubble;
var restore_bubble = false;
var arr = new Array();
arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
arr.push(new nokia.maps.geo.Coordinate(52.5162, 13.32341));
arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));
var info = new Array();
info.push("\"The time has come,\" the Walrus said");
info.push("\"To talk of many things:");
info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");
map = new nokia.maps.map.Display(
document.getElementById("map"),
{
'zoomLevel': 12,
'center': [52.5152, 13.380001],
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector(),
infoBubbles
]
});
//map.components.add(infoBubbles);
for (var i = 0; i < arr.length; i++){
var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
startMarker = new nokia.maps.map.Marker(arr[i], {
icon: startIcon,
anchor: new nokia.maps.util.Point(12, 12)
});
startMarker.html = info[i];
startMarker.coordinate = arr[i];
startMarker.addListener("click", function() {
infoBubble = infoBubbles.addBubble(startMarker.html, startMarker.coordinate);
restore_bubble = true;
});
map.objects.add(startMarker);
}
</script>
</body>
</html>[/CODE]
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;884607]Hi,
Ok. At present, changing of Arrow color is not required.
1) I integrated your code, multiple markers are displaying, but infobubble is not dispalying for that particular marker, Only one message is displaying for all markers. How to display the specific content for that specific marker?. Please make changes for this below code and solve the problem.
[/QUOTE]
Your code contains:
[CODE]
startMarker.addListener("click", function() {
infoBubble = infoBubbles.addBubble(startMarker.html, startMarker.coordinate);
[/CODE]
It should read:
[CODE]
startMarker.addListener("click", function(evt) {
infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
[/CODE]
The difference is that in the latter case the event object is passed into the function and therefore the text that the InfoBubble displays is associated with the marker[B] which was clicked[/B]. Your original code will associate the click with the text from the [B]last [/B]marker
[QUOTE=Ulala;884607]
2) Also, I need dynamic images have to display for markers. How it will be done?
[/QUOTE]
An example of animating markers can be found at: [url]http://api.maps.nokia.com/2.1.1/playground/?example=tracking[/url]
You should look up information about how to use JavaScript's [I]setTimeout()[/I] method. The example alters the GeoCoordinate of the marker, but you could just as easily alter the image associated with a marker. I would recommend you animate using a sprite as in the Sprited Marker Example : [url]http://api.maps.nokia.com/2.1.1/playground/?example=spritedmarkers[/url] - This way the client will download the images once and clip out the part you want.
The simplest animation would be something like:
[Code]
function setMarkers(){
map.objects.clear();
marker = new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(52.5152, 13.380001),
{text: count});
map.objects.add(marker);
}
var count = 0;
setInterval("setMarkers();count++; if (count > 10){count = 0;}", 2000);
[/Code]
Re: How to decrease the Icon (Image) marker size.
Hi,
Ok. Working fine. I appreciate your replies and I am very thankful to you. I am implementing in my original website. If I have any doubts, I'll ask you again.
Re: How to decrease the Icon (Image) marker size.
Hi,
Multiple markers issue is solved. Thank you very much.
I have one last issue.
I need Route map i.e., Getting the direction from point A to point B.
[B]My requirement is as follows:[/B]
By typing the city name in the text box (point A) and the point B is already fixed with specific latitude and longitude, then the route direction should show on map. I looked into the code, that is available in this link [url]http://api.maps.nokia.com/2.1.1/devguide/getting_started.html[/url] [B] heading with named routing[/B]. There coordinates are given as below
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));
I need to search with city name/country name in the text-box for point A.
How to proceed and show me the reference codes.
Please get it me soon...
Re: How to decrease the Icon (Image) marker size.
[QUOTE=Ulala;884840]Hi,
I need Route map i.e., Getting the direction from point A to point B.
[B]My requirement is as follows:[/B]
By typing the city name in the text box (point A) and the point B is already fixed with specific latitude and longitude, then the route direction should show on map.
...
I need to search with city name/country name in the text-box for point A.
How to proceed and show me the reference codes.
Please get it me soon...[/QUOTE]
I think you will find that this question has already been answered here:
[url]http://www.developer.nokia.com/Community/Discussion/showthread.php?232036[/url]
You have two choices, either deep link directly to maps.nokia.com or "roll-your-own" routing solution. If you are doing the latter, your first step will be to geoCode the addresses, before extracting the route.
[url]http://api.maps.nokia.com/2.1.1/playground/?example=search[/url]
[url]http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_Performing_multiple_concurrent_seach_requests[/url]
Note that geocoding requests can frequently return multiple results (Hamilton, Bermuda or Hamilton, New Zealand for example), so you'll either have to go with the first one or let the user select from a list.
A fully working routing example with geocoding and routing intructions can be found here:
[url]http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_Advanced_Routing[/url]
The simplest way would be to use the deep link if you can.
