Text on Marker

**amnesia7** · 2012-07-02, 22:47

I had text displayed on the StandardMarker using text: "foo" but I'm trying to change to using Marker instead so I can use a sprite (like here http://api.maps.nokia.com/en/playgro...edmarkers_desc).

Can text be applied to a sprite Marker as it can for a StandardMarker because it doesn't seem to be?

**jasfox** · 2012-07-04, 15:16

The simple answer is no you can't. StandardMarkers can have an associated text, but Image Markers are simple bitmaps. Bitmaps don't have texts.

There is a workaround though. Use a SVG marker with a <text> element and no background and place it over the sprited marker. http://api.maps.nokia.com/en/playgro...svgmarker.html

This can be done using the zIndex property.

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" />
		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
		<title>SVG and Sprite</title>
		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js"></script>
		</head>
	<body>
		<div id="mapcanvas"  style="width:800px; height:400px;" >&nbsp;</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");
//			
/////////////////////////////////////////////////////////////////////////////////////

	// Get the DOM node to which we will append the map
		var mapContainer = document.getElementById("mapcanvas");
		
		
		// Create a map inside the map container DOM node
		var map = new nokia.maps.map.Display(mapContainer, {
			components: [
				new nokia.maps.map.component.panning.Drag(),
				new nokia.maps.map.component.panning.Kinetic()
			],
			 'zoomLevel': 2,
			  'center': [43.09, -53.674] 
		});
		


var iconSVG = 
	'<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">' +

	'<text x="16" y="20" font-size="10pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="white" textContent="__TEXTCONTENT__">__TEXT__</text>' +
	'</svg>',
	svgParser = new nokia.maps.gfx.SvgParser(),
	// Helper function that allows us to easily set the text and color of our SVG marker.
	createIcon = function (text) {
		var svg = iconSVG
			.replace(/__TEXT__/g, text)
		return new nokia.maps.gfx.GraphicsImage(svgParser.parseSvg(svg));
	};
	
/* On mouse over we want to change the marker's color and text 
 * hence we create two svg icons which we flip on mouse over.
 */
var markerText = "1";
var markerTextOnhover = "2";
var markerIcon = createIcon(markerText);
var markerIconOnHover = createIcon(markerTextOnhover);
var marker = new nokia.maps.map.Marker(
	// Geo coordinate of Brandenburger tor in Berlin, Germany
	[52.51652540955727, 13.380154923889933], 
	{
		icon: markerIcon
	}
);

var markersIconsUrl = "http://api.maps.nokia.com/en/playground/examples/maps/res/markers.png";
var startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 34, 0, 0);
var startIconOnHover = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 46, 0, 34);
var marker2 = new nokia.maps.map.Marker(
	// Geo coordinate of Brandenburger tor in Berlin, Germany
	[52.51652540955727, 13.380154923889933], 
	{
		icon: startIcon,
		zIndex: -999
	}
);



marker.addListener("mouseover", function (evt) {
	marker.set("icon", markerIconOnHover);
		marker2.set("icon", startIconOnHover);
	/* Display's update() can be used to force an immediate re-render of the current view 
	 * instead of the default delayed one, we do this to make the icons switch instantly on mouse over.
	 */
	
	map.update(-1, 0);
});
marker.addListener("mouseout", function (evt) {
	marker.set("icon", markerIcon);
		marker2.set("icon", startIcon);
	map.update(-1, 0);
});

// We add the marker to the map's object collection so it will be rendered onto the map.
map.objects.add(marker2);
map.objects.add(marker);

		
	
	</script>
		</body>
</html>

**amnesia7** · 2012-07-05, 12:06

Thanks Jason.

I tweaked what you provided slightly to give me the following as a starting point.

HTML 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" />
		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
		<title>SVG and Sprite</title>
		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js"></script>
		</head>
	<body>
		<div id="mapcanvas"  style="width:800px; height:400px;" >&nbsp;</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");
//			
/////////////////////////////////////////////////////////////////////////////////////

	// Get the DOM node to which we will append the map
		var mapContainer = document.getElementById("mapcanvas");
		
		
		// Create a map inside the map container DOM node
		var map = new nokia.maps.map.Display(mapContainer, {
			components: [
				new nokia.maps.map.component.Behavior()
			],
			 'zoomLevel': 2,
			  'center': [43.09, -53.674] 
		});
		


var iconSVG = 
	'<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">' +

	'<text x="16" y="20" font-size="10pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="white" 
textContent="__TEXTCONTENT__">__TEXT__</text>' +
	'</svg>',
	svgParser = new nokia.maps.gfx.SvgParser(),
	// Helper function that allows us to easily set the text and color of our SVG marker.
	createIcon = function (text) {
		var svg = iconSVG
			.replace(/__TEXT__/g, text)
		return new nokia.maps.gfx.GraphicsImage(svgParser.parseSvg(svg));
	};
	
/* On mouse over we want to change the marker's color and text 
 * hence we create two svg icons which we flip on mouse over.
 */
var markerText = "1";
var markerTextOnHover = "2";
var markerImageAnchor = new nokia.maps.util.Point(0, 0);
var markerLabelAnchor = new nokia.maps.util.Point(0, 2);
var markerImageAnchorOnHover = new nokia.maps.util.Point(0, 10);
var markerLabelAnchorOnHover = new nokia.maps.util.Point(0, 5);
var markerLabelIcon = createIcon(markerText);
var markerLabelIconOnHover = createIcon(markerTextOnHover);
var markerLabel = new nokia.maps.map.Marker(
	// Geo coordinate of Brandenburger tor in Berlin, Germany
	[52.51652540955727, 13.380154923889933], 
	{
		icon: markerLabelIcon,
		anchor: markerLabelAnchor
	}
);

var markersIconsUrl = "http://api.maps.nokia.com/en/playground/examples/maps/res/markers.png";

var markerImageIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 34, 0, 0);
var markerImageIconOnHover = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 46, 0, 34);
var markerImage = new nokia.maps.map.Marker(
	// Geo coordinate of Brandenburger tor in Berlin, Germany
	[52.51652540955727, 13.380154923889933], 
	{
		icon: markerImageIcon,
		zIndex: -999,
		anchor: markerImageAnchor
	}
);



markerLabel.addListener("mouseover", function (evt) {
	markerLabel.set("icon", markerLabelIconOnHover);
	markerImage.set("icon", markerImageIconOnHover);
	markerLabel.set("anchor", markerLabelAnchorOnHover);
	markerImage.set("anchor", markerImageAnchorOnHover);
	
	map.update(-1, 0);
});
markerLabel.addListener("mouseout", function (evt) {
	markerLabel.set("icon", markerLabelIcon);
	markerImage.set("icon", markerImageIcon);
	markerLabel.set("anchor", markerLabelAnchor);
	markerImage.set("anchor", markerImageAnchor);

	map.update(-1, 0);
});

// We add the marker to the map's object collection so it will be rendered onto the map.
map.objects.add(markerImage);
map.objects.add(markerLabel);

	</script>
		</body>
</html>

Discussion Board

Thread: Text on Marker

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

how to get coordinate with marker?

Click on Marker of Ovi map........

Lightmaps + marker

post a marker

Smooth movment of a marker

Posting Permissions