Remove From My Forums

Creating a pushpin icon using sprite

Question
0

Sign in to vote
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

0

Sign in to vote
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

0

Sign in to vote
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
0

Sign in to vote

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