none
Creating a pushpin icon using sprite RRS feed

 > 

  • Question

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

  • Question
    Sign in to vote
    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/
    Wednesday, August 31, 2011 1:26 PM
    |
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    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/
    Thursday, September 1, 2011 4:15 PM
    |
    Moderator

All replies

  • Question
    Sign in to vote
    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/
    Wednesday, August 31, 2011 1:26 PM
    |
    Moderator
  • Question
    Sign in to vote
    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
    |
  • Question
    Sign in to vote
    0
    Sign in to vote

    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/
    Thursday, September 1, 2011 4:15 PM
    |
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote
    Thanks!
    Monday, September 5, 2011 12:31 PM
    |