Marker with icon and image backgroud

[AlterX]

Hi,
is it possible?
I need a Marker as it is, but I want to add a background image, like the pin...I've tried to use BitmapImage and Container, but the guide is not so clear...

Someone?

[izinin]

Hi

The simpliest solution is just to provide marker image with background as you want -- I don't see anything wrong in having a broad collection of the same image with different backgrounds

var marker = new nokia.maps.map.Marker(
    new nokia.maps.geo.Coordinate(52.51, 13.4),{
    title: "marker",
    visibility: true,
    icon: "color3.png",                                        // whatever you want image is here  ;)  
    anchor: new nokia.maps.util.Point(32, 32) 
});
map.objects.add(marker);

[AlterX]

Hi

The simpliest solution is just to provide marker image with background as you want -- I don't see anything wrong in having a broad collection of the same image with different backgrounds

var marker = new nokia.maps.map.Marker(
    new nokia.maps.geo.Coordinate(52.51, 13.4),{
    title: "marker",
    visibility: true,
    icon: "color3.png",                                        // whatever you want image is here  ;)  
    anchor: new nokia.maps.util.Point(32, 32) 
});
map.objects.add(marker);

Sorry, I wasn't very clear...I meant, I need a Marker with an image on foreground and an image (pin) as background!

[jasfox]

izinin is correct, the simplest solution would be to create your own markers with images embedded. If however you prefer to load the foreground image as a sprite say, you may want to place two images into the same location.
i.e a map marker pin behind the image - a similar idea was proposed here to get Text over a sprite:- http://www.developer.nokia.com/Commu...Text-on-Marker

In your case you would add the plain markers, and then add a second series of PNG images (from sprites) over the plain Map marker Pins..

Creating your own images would still be simpler.

[AlterX]

izinin is correct, the simplest solution would be to create your own markers with images embedded. If however you prefer to load the foreground image as a sprite say, you may want to place two images into the same location.
i.e a map marker pin behind the image - a similar idea was proposed here to get Text over a sprite:- http://www.developer.nokia.com/Commu...Text-on-Marker

In your case you would add the plain markers, and then add a second series of PNG images (from sprites) over the plain Map marker Pins..

Creating your own images would still be simpler.

Hi thank you for your answer...yes, I need a dynamic merge of two images because of a big number of my thumbs.
so...I need to use a Marker'icon property for the foreground image; then I need to create an svg image and put that in the marker?
I've read the example you posted, but how I can create tag for an image and put that in the marker object?

EDIT:
I've tried this:
var iconSVG = '<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="19px" height="19px" xlink:href="images/Objects/__IMAGE__" /></svg>',
svgParser = new nokia.maps.gfx.SvgParser(),
createIcon = function (imageName) { return new nokia.maps.gfx.GraphicsImage(svgParser.parseSvg(iconSVG.replace(/__IMAGE__/g, imageName))); };

var marker = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(latitude, longitude, altitude, true), { text: name, title: name, draggable:true, visibility: true, icon: createIcon(imageName), anchor: new nokia.maps.util.Point(19, 19) });
map.objects.add(marker);

No error, but nothing is shown...if I use a <circle> tag, the render shows me the circle!

[izinin]

Hi

<image width="19px" height="19px" xlink:href="images/Objects/__IMAGE__" /></svg>

looks incorrect : no filetype is specified , check example from W3 spec

Another approach is to have two markers that designate a place ---- nothing wrong in use marker array of two elements throughout you app. Think about your application design -- i bet in you app a certain background is assigned to a certain place data condition -- i.e. it is not arbitrary and thus is limited amount of states. It is important to develop appropriate application data structure on very first development stage for software maintainability and flexibility reason. Marker array is simple but consumes more memory -- i don't know what is the trade-off between such double memory consumption and SVG parsing delay -- the both impact the app performance , but marker array use seems more robust solution.

[jasfox]

This is what I meant about combining Sprites and markers. The StandardMarker is deliberately given a negative zIndex so the sprite ( which is an image Marker ) is shown above it. This approach would mean you just download your images once and then clip the appropriate bitmap.

<!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>
       <title>Sprite Images</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <script type="text/javascript"
            src="http://api.maps.nokia.com/2.2.1/jsl.js" charset="utf-8">
        </script>
    </head>
    <body>
 
        <div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></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 APP ID GOES HERE"); 
			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
 
//			
/////////////////////////////////////////////////////////////////////////////////////
function addSpriteAndMarker (icon, coord){
	
		// Create marker no 1
				sprite = new nokia.maps.map.Marker(coord, {
					icon: icon,
					anchor : new nokia.maps.util.Point(7, 33)
				}),
			backgroundmarker = new nokia.maps.map.StandardMarker(coord,
			{
				zIndex: -999
			}
			);
	markerContainer.objects.add(sprite);
			markerContainer.objects.add(backgroundmarker);

}

 
var iconPackUrl = "http://static2.maps.nokia.com/37115/core/img/icons_vert_sprite.png",
				map = new nokia.maps.map.Display(document.getElementById("mapContainer"), {
					center: new nokia.maps.geo.Coordinate(1.381667, 173.146944),
					zoomLevel: 3,
					components: [ new nokia.maps.map.component.Behavior() ]
				}),		
					markerContainer = new nokia.maps.map.Container(),  		
 
				// create tow sprited an icons - at 0, 0 and 0, 40
				upArrow = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 30, 30, 0, 0),
				downArrow = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 30, 30, 0, 40);				
				
			  addSpriteAndMarker (upArrow, new nokia.maps.geo.Coordinate(1.381667, 173.166944));
			  addSpriteAndMarker (downArrow, new nokia.maps.geo.Coordinate(1.371667, 173.146944));
			  
			  
			// Add the container to the map
			map.objects.add(markerContainer);		
			// Zoom the map to cover the markers of the container
			map.zoomTo(markerContainer.getBoundingBox(),false,true);
 
</script>
</body>
</html>

[AlterX]

That's wonderful....I've done it with jasfox's suggestion...I already tried that solution, but without using zIndex on the StandardMark...thanks to all for the great support!