none
WinJS W8.1 App - Icon image width and height RRS feed

  • Question

  • Hello everyone.

    I'm adding custom icon urls to my pushpin locations dinamically parsing a json response.

    In the json I have an image url like "http://xxx.xxx.xx/images/215201422382151.jpg". If I set the icon image url, width and height to 50, I notice that the image isn't resized but cropped from the top left corner. How can I modify this behaviour? (like resize the image and center) Thanks in advance.

    Wednesday, August 27, 2014 6:58 AM

Answers

  • For the first one you could just change the height or width in the css style, but then you wouldn't have the other value which could affect the clipping by the pushpin.

    For the second one, you could get the original width/height using the img.width/img.height properties inside the onload function. You could then easily calculate the scaling value, but would also need to use the scaled width/height values to specify these settings in the pushpin options.

    Also, if you just want to scale a pushpin by a specific amount you can also use the CSS  transform property. For example:

    .myScaledPin img {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
    }


    http://rbrundritt.wordpress.com


    • Proposed as answer by Ricky_Brundritt Wednesday, August 27, 2014 9:56 AM
    • Edited by Ricky_Brundritt Wednesday, August 27, 2014 9:58 AM
    • Marked as answer by RR2001 Wednesday, August 27, 2014 10:19 AM
    Wednesday, August 27, 2014 9:56 AM

All replies

  • The width/height information is used to specify the area the pushpin will consume for positioning purposes. It won't resize your image. If must resize your image there are a couple of options. When a pushpin is created the HTML that is generated consists of an anchor wrapping an image tag. One is to set the typeName property to the value of a CSS class, say "myScaledPin". You can then define the image size like this:

    .myScaledPin img{
        width:50px; 
        height:50px;
    }
    

    Another method is to make use of the Canvas Pushpin module: https://bingmapsv7modules.codeplex.com/wikipage?title=Canvas%20Pushpin%20Module However this might be a bit more work than the first method.

    Another method is to use an HTML canvas to scale the image and then pass the image data to the icon property of the pushpin. Here is a code sample:

    function addPushpin(){
    	var width = 50, height = 50;
    
    	var img = new Image();
    	img.onload = function(){
    		var pin = new Microsoft.Maps.Pushpin(map.getCenter(),{
    			icon: getScaledImage(img, width, height),
    			width: width,
    			height: height
    		});
    		
    		map.entities.push(pin);
    	};
    
    	img.src = "localImageURL";
    }
    	
    function getScaledImage(img, width, height) {
    	// Create an empty canvas element
    	var canvas = document.createElement("canvas");
    	canvas.width = width;
    	canvas.height = height;
    
    	// Copy the image contents to the canvas
    	var ctx = canvas.getContext("2d");
    	ctx.drawImage(img, 0, 0, width, height);
    
    	// Get the data-URL formatted image
    	return canvas.toDataURL("image/png");
    }


    http://rbrundritt.wordpress.com

    Wednesday, August 27, 2014 8:20 AM
  • Thanks Ricky. Awesome!

    By the way, for the first and the last one sample, any tips about maintain images aspect ratio?

    Wednesday, August 27, 2014 8:53 AM
  • For the first one you could just change the height or width in the css style, but then you wouldn't have the other value which could affect the clipping by the pushpin.

    For the second one, you could get the original width/height using the img.width/img.height properties inside the onload function. You could then easily calculate the scaling value, but would also need to use the scaled width/height values to specify these settings in the pushpin options.

    Also, if you just want to scale a pushpin by a specific amount you can also use the CSS  transform property. For example:

    .myScaledPin img {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
    }


    http://rbrundritt.wordpress.com


    • Proposed as answer by Ricky_Brundritt Wednesday, August 27, 2014 9:56 AM
    • Edited by Ricky_Brundritt Wednesday, August 27, 2014 9:58 AM
    • Marked as answer by RR2001 Wednesday, August 27, 2014 10:19 AM
    Wednesday, August 27, 2014 9:56 AM
  • I got the original width/height inside the onload function. Then I got the new image properties scaled to my max width/height and sent them to the canvas function. Finally i set the icon in the Pushpin with the canvas data url.

    var myImage = new Image();
    myImage.src = iconUrl;
    myImage.onload = function () {
                    var newSize = calculateAspectRatioFit(myImage.width, myImage.height, 50, 50);
                    var tempDataUrl = getScaledImage(myImage, newSize.width, newSize.height);
                    var pin = new Microsoft.Maps.Pushpin(location, { draggable: false, icon: tempDataUrl, width: newSize.width, height: newSize.height });
                    pin.title = title;
                    pin.description = text;
                    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
                    pinLayer.push(pin);
    };

    It works like a charm!

    Many thanks Ricky.

    Riccardo.

    Edit

    Found this function on the web for resizing.

    function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
    
            var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ];
            ratio = Math.min(ratio[0], ratio[1]);
    
            return { width:srcWidth*ratio, height:srcHeight*ratio };
        }



    • Edited by RR2001 Wednesday, August 27, 2014 10:23 AM
    Wednesday, August 27, 2014 10:19 AM