×

Discussion Board

Results 1 to 3 of 3

Thread: Text on Marker

  1. #1
    Registered User
    Join Date
    Dec 2011
    Posts
    13

    Text on Marker

    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?

  2. #2
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: Text on Marker

    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>

  3. #3
    Registered User
    Join Date
    Dec 2011
    Posts
    13

    Re: Text on Marker

    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>

Similar Threads

  1. Click on Marker of Ovi map........
    By amitsharma_ujj in forum Qt
    Replies: 5
    Last Post: 2011-09-28, 09:30
  2. Lightmaps + marker
    By mch0lic in forum [Archived] Qt Mobility Project
    Replies: 2
    Last Post: 2011-06-19, 23:53
  3. post a marker
    By zzizz in forum Symbian
    Replies: 6
    Last Post: 2010-07-05, 22:33
  4. Smooth movment of a marker
    By David_Kihlstrom in forum Mobile Java General
    Replies: 1
    Last Post: 2003-09-21, 11:34

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×