Answered by:
Creating a pushpin icon using sprite

Question
-
How can I create a pushpin with image icon that is part of a larger image? I can't manage to set the x offset and y offset within the sprite.
- Moved by Ricky_Brundritt Saturday, March 10, 2012 10:43 AM (From:Bing Maps: Map Control and Web services Development)
Wednesday, August 31, 2011 12:45 PM
Answers
-
Hello,
You can do it by using the typeName on the PushpinOption element.
This typeName is used to set a class on the pushpin element added on the map.See: http://msdn.microsoft.com/en-us/library/gg427629.aspx
Also, don't forget that you can set the width and height of the pushpin image.
Hope this will help.
MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/- Proposed as answer by Nicolas Boonaert Thursday, September 1, 2011 9:41 AM
- Marked as answer by Nicolas Boonaert Thursday, April 4, 2013 9:17 PM
Wednesday, August 31, 2011 1:26 PM -
Here is a sample code that works with a basic 25px pushpins.
<!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" /> <title>Bing Maps - Experiments - Animated sprite pushpins</title> <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap"> </script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var map = null; var pos = 0; function getMap() { // Initialize the map map = new Microsoft.Maps.Map($('#map').get(0), { credentials: "YOUR KEY", center: new Microsoft.Maps.Location(47.5, 2.75), zoom: 4, mapTypeId: Microsoft.Maps.MapTypeId.road }); var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { typeName: 'myCustomPin', icon: 'pin.png' }); map.entities.push(pin); $('.myCustomPin').css({ backgroundImage: 'url("pin.png")' }); $('.myCustomPin img').hide(); // Animate // $('.myCustomPin').animate(backgroundPosition, { // step: function (now, fx) { // var data = fx.elem.id + ' ' + fx.prop + ': ' + now; // $('body').append('<div>' + data + '</div>'); // } // }); setInterval(function () { var offset = (-pos * 25) + 'px 0px'; $('.myCustomPin').css({ backgroundPosition: offset}); pos++; if (pos == 3) pos = 0; }, 80); } </script> </head> <body onload='getMap()'> <div id="map" style="position: relative; width: 800px; height: 600px;"> </div> <div> <input type="button" onclick="changeDashed()" value="Change" /> </div> </body> </html>
Here is a link that works for this kind of sample: http://www.boonaert.net/element/bingmaps/samples/Animated/bing-v7_AnimatedPin.html
MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/- Proposed as answer by Nicolas Boonaert Thursday, September 1, 2011 4:15 PM
- Marked as answer by Ricky_Brundritt Tuesday, September 6, 2011 10:47 AM
Thursday, September 1, 2011 4:15 PM
All replies
-
Hello,
You can do it by using the typeName on the PushpinOption element.
This typeName is used to set a class on the pushpin element added on the map.See: http://msdn.microsoft.com/en-us/library/gg427629.aspx
Also, don't forget that you can set the width and height of the pushpin image.
Hope this will help.
MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/- Proposed as answer by Nicolas Boonaert Thursday, September 1, 2011 9:41 AM
- Marked as answer by Nicolas Boonaert Thursday, April 4, 2013 9:17 PM
Wednesday, August 31, 2011 1:26 PM -
Hello,
thanks so much for your help! I tried that, but I seem to have problems with the selector I'm using in order to change the background image and the rest of the attributes of the div tag.
This is what I do:
function CreateMarker(point, icon, id, mHeight, mWidth, xOffset, yOffset) {
var pClass = id.toString();
var marker = new Microsoft.Maps.Pushpin(point, {
width: mWidth,
height: mHeight,
typeName: pClass
});//here's where i think i'm doing something wrong
$('.' + pClass).css('background-image', 'url(' + icon1 + ')');
$('.' + pClass).css('background-position', xOffset + "px" + " " + yOffset + "px");Thanks!
Thursday, September 1, 2011 3:12 PM -
Here is a sample code that works with a basic 25px pushpins.
<!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" /> <title>Bing Maps - Experiments - Animated sprite pushpins</title> <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap"> </script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var map = null; var pos = 0; function getMap() { // Initialize the map map = new Microsoft.Maps.Map($('#map').get(0), { credentials: "YOUR KEY", center: new Microsoft.Maps.Location(47.5, 2.75), zoom: 4, mapTypeId: Microsoft.Maps.MapTypeId.road }); var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { typeName: 'myCustomPin', icon: 'pin.png' }); map.entities.push(pin); $('.myCustomPin').css({ backgroundImage: 'url("pin.png")' }); $('.myCustomPin img').hide(); // Animate // $('.myCustomPin').animate(backgroundPosition, { // step: function (now, fx) { // var data = fx.elem.id + ' ' + fx.prop + ': ' + now; // $('body').append('<div>' + data + '</div>'); // } // }); setInterval(function () { var offset = (-pos * 25) + 'px 0px'; $('.myCustomPin').css({ backgroundPosition: offset}); pos++; if (pos == 3) pos = 0; }, 80); } </script> </head> <body onload='getMap()'> <div id="map" style="position: relative; width: 800px; height: 600px;"> </div> <div> <input type="button" onclick="changeDashed()" value="Change" /> </div> </body> </html>
Here is a link that works for this kind of sample: http://www.boonaert.net/element/bingmaps/samples/Animated/bing-v7_AnimatedPin.html
MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/- Proposed as answer by Nicolas Boonaert Thursday, September 1, 2011 4:15 PM
- Marked as answer by Ricky_Brundritt Tuesday, September 6, 2011 10:47 AM
Thursday, September 1, 2011 4:15 PM -
Thanks!Monday, September 5, 2011 12:31 PM