×

Discussion Board

Results 1 to 8 of 8
  1. #1
    Registered User
    Join Date
    Mar 2009
    Location
    Italy
    Posts
    153

    Marker with icon and image backgroud

    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?
    Merry Christmas Tombola! available on OVI Store!
    SuperDaddy available on OVI Store!

    QT VirtualKeyboard: http://qt-apps.org/content/show.php/VirtualKeyboard?content=107388
    Crack Generator: http://qt-apps.org/content/show.php/MosaicCrack?content=121832

  2. #2
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: Marker with icon and image backgroud

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

  3. #3
    Registered User
    Join Date
    Mar 2009
    Location
    Italy
    Posts
    153

    Re: Marker with icon and image backgroud

    Quote Originally Posted by izinin View Post
    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
    Code:
    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!
    Merry Christmas Tombola! available on OVI Store!
    SuperDaddy available on OVI Store!

    QT VirtualKeyboard: http://qt-apps.org/content/show.php/VirtualKeyboard?content=107388
    Crack Generator: http://qt-apps.org/content/show.php/MosaicCrack?content=121832

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

    Re: Marker with icon and image backgroud

    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.

  5. #5
    Registered User
    Join Date
    Mar 2009
    Location
    Italy
    Posts
    153

    Re: Marker with icon and image backgroud

    Quote Originally Posted by jasfox View Post
    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!
    Last edited by AlterX; 2012-08-14 at 11:51. Reason: related to answer
    Merry Christmas Tombola! available on OVI Store!
    SuperDaddy available on OVI Store!

    QT VirtualKeyboard: http://qt-apps.org/content/show.php/VirtualKeyboard?content=107388
    Crack Generator: http://qt-apps.org/content/show.php/MosaicCrack?content=121832

  6. #6
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: Marker with icon and image backgroud

    Hi

    Code:
    <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.

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

    Re: Marker with icon and image backgroud

    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.



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

  8. #8
    Registered User
    Join Date
    Mar 2009
    Location
    Italy
    Posts
    153

    Re: Marker with icon and image backgroud

    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!
    Merry Christmas Tombola! available on OVI Store!
    SuperDaddy available on OVI Store!

    QT VirtualKeyboard: http://qt-apps.org/content/show.php/VirtualKeyboard?content=107388
    Crack Generator: http://qt-apps.org/content/show.php/MosaicCrack?content=121832

Similar Threads

  1. How to decrease the Icon (Image) marker size.
    By Ulala in forum [Archived] Maps API for Javascript
    Replies: 42
    Last Post: 2012-03-07, 12:25
  2. Replies: 0
    Last Post: 2010-01-22, 13:40
  3. set an image as a backgroud?
    By dakoz in forum Symbian User Interface
    Replies: 1
    Last Post: 2006-04-21, 18:21
  4. How run exe backgroud ?
    By debasish1234 in forum Symbian
    Replies: 2
    Last Post: 2005-01-20, 04: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
  •  
×