none
Creating a pushpin icon using sprite RRS feed

  • 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/
    Wednesday, August 31, 2011 1:26 PM
    Moderator
  • 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

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

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