How to decrease the Icon (Image) marker size.

**Ulala** · 2012-02-28, 09:33

I cant see the Maps section in Discussion form page. So I am posting my query here. Please reply for this post.

From this below code I got the custom image marker. How to decrease the Icon (Image) size on this code.

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);

**jasfox** · 2012-02-28, 10:29

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:

http://api.maps.nokia.com/2.1.1/play...spritedmarkers

The resizing of images is the responsibility of the nokia.maps.gfx.BitmapImage class.

**Ulala** · 2012-02-28, 10:50

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);

**jasfox** · 2012-02-28, 11:23

Since Ovi Maps has been replaced with Nokia Maps, two changes are required in the code:
1) Replace http://api.maps.ovi.com/jsl.js with http://api.maps.nokia.com/2.1.1/jsl.js 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:
http://api.maps.nokia.com/2.1.1/play...es/markers.png - 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)
});

**Ulala** · 2012-02-28, 11:59

Hi, Thanks for sending replying early. I did everything as you said in the early reply, I have two problems in this below code.

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 http://api.maps.nokia.com/2.1.0/apir...tmapImage.html

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>

**jasfox** · 2012-02-28, 13:50

Originally Posted by Ulala

1) After clicking the image, popup is coming with Black color background.. How to change that color?

If you want to Style the Infobubble look at the example here:
http://www.developer.nokia.com/Commu...bed_Infobubble

Originally Posted by Ulala

2) Image size is not reducing with new Bitmap code from http://api.maps.nokia.com/2.1.0/apir...tmapImage.html

If you look at the example http://api.maps.nokia.com/2.1.1/play...spritedmarkers you will see that both the Images are within the same 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);

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: http://api.maps.nokia.com/2.1.1/play...ustomsvgmarker 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 Infobubble 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.

**Ulala** · 2012-02-29, 05:36

Hi,

Using this below code, 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);

**jasfox** · 2012-02-29, 08:24

Could I point you to my previous post:

Originally Posted by jasfox

IYou wouldn't usually modify a bitmap on the fly using JavaScript on the client side. Do it once and store it on the server.
.

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:

http://greatwebguy.com/programming/j...sizer-servlet/

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.

**Ulala** · 2012-02-29, 09:24

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 how to change the arrow color?.

I have one more issue. Please show me solution.

I have multiple latitudes and longitudes generated dynamically. Now, I need multiple markers for various latitude and longitudes. Also I required click event which is showing infobubble with the related message. I written the code in php and using for loop. Please go through the below code and give me solution.

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>

**jasfox** · 2012-02-29, 10:23

Originally Posted by Ulala

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 how to change the arrow color?.

The tail of the Infobubble is directly rendered by the Canvas component, you cannot change the colour.

Originally Posted by Ulala

I have multiple latitudes and longitudes generated dynamically. Now, I need multiple markers for various latitude and longitudes. Also I required click event which is showing infobubble with the related message.

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);
}

**Ulala** · 2012-02-29, 12:07

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>

**jasfox** · 2012-02-29, 14:11

Originally Posted by Ulala

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.

Your code contains:

Code:

startMarker.addListener("click", function() { 
infoBubble = infoBubbles.addBubble(startMarker.html, startMarker.coordinate);

It should read:

Code:

startMarker.addListener("click", function(evt) {
infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);

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 which was clicked. Your original code will associate the click with the text from the last marker

Originally Posted by Ulala

2) Also, I need dynamic images have to display for markers. How it will be done?

An example of animating markers can be found at: http://api.maps.nokia.com/2.1.1/play...ample=tracking
You should look up information about how to use JavaScript's setTimeout() 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 : http://api.maps.nokia.com/2.1.1/play...spritedmarkers - 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);

**Ulala** · 2012-03-01, 10:26

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.

**Ulala** · 2012-03-01, 14:23

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.
My requirement is as follows:
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 http://api.maps.nokia.com/2.1.1/devg...g_started.html heading with named routing. 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...

**jasfox** · 2012-03-01, 15:51

Originally Posted by Ulala

Hi,
I need Route map i.e., Getting the direction from point A to point B.
My requirement is as follows:
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...

I think you will find that this question has already been answered here:
http://www.developer.nokia.com/Commu...ead.php?232036

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.

http://api.maps.nokia.com/2.1.1/play...example=search
http://www.developer.nokia.com/Commu...seach_requests

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:
http://www.developer.nokia.com/Commu...vanced_Routing

The simplest way would be to use the deep link if you can.

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