Discussion Board

Results 1 to 4 of 4
  1. #1
    Registered User
    Join Date
    Sep 2013
    Posts
    4

    Combine image markers with text on top

    Hi everyone,

    I have a relatively simple problem which has partially been answered already but i believe there are still some issues with the answer as it lacks the functionality in all browsers.

    How is it possible to combine image markers (nokia.maps.map.Marker) with text. Current solution i have is:
    nokia.maps.map.Marker below another nokia.maps.map.Marker (with SVG graphics - which only has text). So i have two markers.
    First i add the image marker (with my custom image). Second, i add the next image marker which basically contains SVG graphics (svg graphics only with text). This works perfectly in all browsers except IE 8 and less versions. IE8 and less does not support SVG graphics.

    The idea for this kind of solution i got here from this post (big thanks goes to Jason Fox):
    http://developer.nokia.com/Community...rker-with-text

    So i am just wondering if there are some of you out there with similar issues who managed to combine image markers with text (without using svg graphics)?

    My second idea was to use Marker below StandrdMarker. Standard marker does have a Brush property. And Brush has a property of "fill". Fill can take up two String values: "solid" and "none". But for some reason, setting the fill:"none" on the Brush in the StandardMarker has no effect.
    So i would also use this thread to ask any of you if you know why the "empty fill" (brush:{fill:"none"}) can not be applied to the standard marker? It will always have solid color.

    Thank you for your time.

    Cheers,
    Branislav

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

    Re: Combine image markers with text on top

    Hmmm tricky, the problem is the lack of support for certain now-standard features on legacy browsers. According to this graphic, IE8 was around 20% of the market in April and dropping, and IE7 around 1%, so hopefully this is a problem which will solve itself with time.

    The browser support matrix includes IE7 and above, but there is only so much you can do to maintain feature support across all browsers if the browser can't cope.

    If a browser doesn't support SVG, then I would suggest looking at the Graphics class. This will create an Image on a Canvas, and can be used to create a marker as shown:

    Code:
    function createGraphicsMarker(text){
    
    	var graphicsContext = new nokia.maps.gfx.Graphics();
    	// Create a RED circle, BLACK border
    	graphicsContext.beginImage(height, width);
    	graphicsContext.set("fillColor", "#FF0000");
    	graphicsContext.set("strokeColor", "#000");
    	graphicsContext.set("lineWidth", 1);
    	graphicsContext.drawEllipse(0, 0, height, width);
    	graphicsContext.fill();
    	graphicsContext.stroke();
    	// Add some BLACK text
    	graphicsContext.set("fillColor", "#000");
    	graphicsContext.fillText(text, 0, 0);
    	
    	// Use the image to create a marker:
    	return  new nokia.maps.map.Marker( datapoint,
    		{icon: new nokia.maps.gfx.GraphicsImage(graphicsContext.getIDL()),
    			visibility: true,
    			anchor: new nokia.maps.util.Point((height/2),(width/2))}
    	);
    }
    Now this at least degrades gracefully, in that Text is shown in modern browsers, and the circle only is displayed on IE8 for example. I assume this is due to lack of native Canvas support leads to the scripting engine to ignore the fillText() command that it cannot handle.

    I would also check to see if the TextMarker class in this example would fulfill your needs - it works in IE8 for me. I assume this meta tag may help:

    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/>
    Last edited by jasfox; 2013-09-04 at 09:59.

  3. #3
    Registered User
    Join Date
    Sep 2013
    Posts
    4

    Re: Combine image markers with text on top

    Thank you Jason for the advice.
    I've managed to solve the issue using your code snippet.

    The bottom marker i use is normal Marker:
    Code:
    function createImageMarker(branch, index, markerIcon, markerDetails) {
    	return new nokia.maps.map.Marker(([ (branch.latitude / 60), (branch.longitude / 60) ]), {
    		icon: markerIcon,
    		//index is my own custom property
    		text: index,
    		anchor: {x: 11, y: 25},
    		$tooltip : markerDetails
    	});
    }
    Then above this one i place the text marker created by your example:
    Code:
    function createTextMarker(branch, markerText, textColor) {
    	var graphicsContext = new nokia.maps.gfx.Graphics();
    
    	//define image (invisible canvas image of same dimensions like real image marker is easier to center and find anchor point)
    	graphicsContext.beginImage(22, 25);
    	graphicsContext.set("font", "bold 12px verdana");
    	
    	//center the text relatively to anchor point;
    	graphicsContext.set("textAlign", "center");
    	graphicsContext.set("fillColor", textColor);
    	
    	//center the text to be in the center of the canvas
    	graphicsContext.fillText(markerText, 10, 15);
    	
    	return  new nokia.maps.map.Marker(([ (branch.latitude / 60), (branch.longitude / 60) ]), {
    		icon: new nokia.maps.gfx.GraphicsImage(graphicsContext.getIDL()),
    		visibility: true,
    		anchor: new nokia.maps.util.Point(11, 25),
    		//index is my own custom property
    		text: markerText
    	});
    }
    So the markers are placed on the same point of the map. Text marker is added after the image marker so it shows above. Works in IE7 and greater.

  4. #4
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: Combine image markers with text on top

    It would also be possible to subclass the existing nokia.maps.map.Marker class, and render an amalgam of a BitmapImage and a GraphicsImage as a single marker. This would be cleaner in that there would only be one marker for each point.
    I've posted a working example here on GitHub, the source can be found here.
    As usual it needs work on legacy IE, so I've defaulted to using the standard nokia.maps.map.Marker icon rendering for older IE browsers.

Similar Threads

  1. Combine Text Message Thread and Send
    By gikltd in forum News and Announcements
    Replies: 4
    Last Post: 2011-05-12, 14:53
  2. Combine Text Message Thread and Send
    By gikltd in forum Mobile Java General
    Replies: 1
    Last Post: 2011-05-12, 06:14
  3. Combine Text Message Thread and Send
    By gikltd in forum Mobile Java Networking & Messaging & Security
    Replies: 1
    Last Post: 2011-05-12, 06:13
  4. Wrap text around image with proper margin between image and text in QML?
    By pasi.hytonen@starcut.com in forum [Archived] Qt Quick
    Replies: 0
    Last Post: 2011-03-31, 07:58

Posting Permissions

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