Virtual Earth API: Creating Numbered Pushpins


Many people have asked how to create numbered pushpins using the Virtual Earth API.  One way to do this is to have custom pin images with numbers in the image.  However, you can also do this in the v5 API using VEShape and custom HTML and CSS styles for the shape icon.  The following example shows one way to do this.


You fist need to create custom CSS styles for a pin setting a background image, position, and font styles.



.pinStyle1{ position:relative; background:url(‘pin1.gif’) no-repeat 0 0; height:30px; width:25px; top:-15px; color:#fff; text-align:center; font: bold 12px Arial; cursor: pointer;}



.pinStyle1 .text{ position: relative; top: 2px; }


Then, to add the numbered pin to the map, you can create a VEShape and use the SetCustomIcon method to set the pin icon to custom HTML/CSS.   In this example, the pin icon consists of two styled DIVs using the styles above and the text “1”.  The outer DIV is used to style the pushpin image and the inner DIV is used to style the pushpin text.



var shape = new VEShape(VEShapeType.Pushpin,new VELatLong(37.776, -122.426));
shape.SetCustomIcon(“<div class=’pinStyle1′><div class=’text’>1</div></div>”);
shape.SetTitle(‘Shape 1’);
shape.SetDescription(‘This is Shape 1’);
map.AddShape(shape);


This adds a numbered pin to the map using “pin1.gif” and the number “1”.  In this example, the pin image “pin1.gif” is 30 pixels x 25 pixels.  By default pushpin icons are centered.  However, “pin1.gif” is a pushpin which has a pointer on the bottom. So to get the bottom of the pin to point to the location, I set the top position to the negative of half of the image height (-15 pixels) to move the pin up and position it properly. Also, I set the text to be position 2 pixels from the top of the pin to position the text properly.


Using the above technique, you can now create numbered, lettered, or any kind of custom pushpin with custom text.


Here’s a link to the complete example with several different examples of numbered and letter pushpins:



Virtual Earth API Numbered Pushpin Example


Comments (4)

  1. ASP.NET Futures May CTP Release [Via: gduthie ] Debugging SQL Server 2005 Stored Procedures in Visual…

  2. Skeetidot says:

    Your example shows how to create numbered pushpins for new shapes.  How can I add numbers onto my existing layer of pushpins?

    Thanks,

    Lauren

  3. Keith Kinnan says:

    You can add numbers to an existing shape layer by modifying the existing shapes in the layer. You can use the GetShapeCount method on the VEShapeLayer to get the number of shapes and iterate through the indexes with a for loop and call GetShapeByIndex on the method to get access to the shapes. Then modify each shape individually.

    For example (assuming you have a VEShape layer called myShapeLayer):

    var numShapes = myShapeLayer.GetShapeCount();

    for(var i=0; i < numShapes; ++i)

    {

      var shape = myShapeLayer.GetShapeByIndex(i);

      //shape.SetCustomIcon(…)

    }

  4. Larry Jordan says:

    As you hover over the numbered push pin, the info box flashes as you move from the number part of the pushpin to the border area.  Is there any way to eliminate the flashing?