locked
Numbering Pushpins in V5 RRS feed

  • Question

  • I am adding a customer icon (Pushpin different color) to the map using an XML overlay as below:

     

    var geoRssLayer1 = new VEShapeLayer();
      var geoRssLayerSpec1 = new VEShapeSourceSpecification(VEDataType.GeoRSS, source, geoRssLayer1);

    map.ImportShapeLayerData(geoRssLayerSpec1, onFeed1Load, true);

    function onFeed1Load(layer)

    {
         var numShapes = layer.GetShapeCount();
         for(var i=0; i < numShapes; ++i)
        {
            var s = layer.GetShapeByIndex(i);
      s.SetCustomIcon("<img src='images/green_pin.gif'/>");
        }

    }

     

    The description, title etc are taken from the XML file.  Is there a way either by a tag in the XML document or hardcoded to add a number to each pushpin?  In the same way as on the MSN Maps.

     

    Thanks

    Matt

     

    Tuesday, May 8, 2007 4:27 PM

Answers

  • Matt,


    What your seeing from MSN Maps is likely the numbered driving direction pins which are special generated inside the VE API.  Also to note, is that those numbered pins are actually .gif files (labelled redcircle001.gif to redcircle300.gif appropriately).  The only thing I can think about is to actually do something similar and have your own pre-made .gif files and when inserting the pins on the map, use the appropriate .gif file for it.

    Hope that helps,

    Tuesday, May 8, 2007 11:27 PM

All replies

  • Matt,


    What your seeing from MSN Maps is likely the numbered driving direction pins which are special generated inside the VE API.  Also to note, is that those numbered pins are actually .gif files (labelled redcircle001.gif to redcircle300.gif appropriately).  The only thing I can think about is to actually do something similar and have your own pre-made .gif files and when inserting the pins on the map, use the appropriate .gif file for it.

    Hope that helps,

    Tuesday, May 8, 2007 11:27 PM
  • Are you familiar with XSLT (Xml Transform)?  There are a few methods available to do this on the fly between your source data and the subsequent display on the VE surface.  It would also help to know what server technologies you are using on the hosting platform.
    Wednesday, May 9, 2007 4:23 PM
  • Hi,

     

    No i'm not aware of XSLT I am new to XML to be honest.

     

    The numbered pin is not from the directions results its on a standard map. If you add a pin to a map in MSN it numbers it with a corresponding description list.

     

    The server is running on Windows 2003 Standard on IIS 6.  The pages are developed using ASP, VBScript, Javascript and Ajax.

     

    Thanks

    Matt

    Thursday, May 10, 2007 10:07 AM
  • Hi Jared,

     

    It would be a great help to me if you could offer more advice regarding your previous post!

     

    Thanks

    Matt

     

    Monday, May 14, 2007 6:29 PM
  • Okey doke, I'll try.  Have you experimented with ASP.NET at all (1.1 or 2.0)?  Or will your current web hosting backend be solely ASP technology?  I have a feeling Derek is correct about the MSN driving directions and the individual pin icon rendering...I do something similar for a traffic xml feed.  Anyhow, let me know about your .NET experience when you can.
    Monday, May 14, 2007 6:51 PM
  • Hi Jared,

     

    Unfortunately I have no knowledge of ASP.NET only ASP.  I only know ASP and very basic Javascript and XML.

     

    Thanks

    Matt

     

     

     

    Tuesday, May 15, 2007 5:12 PM
  • You can create numbered pushpins in v5 using VEShape.SetCustomIcon.  You can pass custom HTML with CSS styles to the SetCustomIcon call.  For example, the following HTML snippet has two nested divs with styles and a text number.

     

    Code Snippet

    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);

     

    Here's the custom CSS to go with it:

     

    Code Snippet

    .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; }

     

    Here's a link to the complete working example:

    http://blogs.msdn.com/keithkin/archive/2007/05/16/virtual-earth-api-creating-numbered-pushpins.aspx

     

     

     

     

    Wednesday, May 16, 2007 9:03 PM
  • Hi,

     

    The link above and the associated sample are fantastic.

     

    The only detail I'm not so happy with is the global  style that you've added to your sample:

     

     a{ text-decoration: none; }

      

    http://krkinnan.members.winisp.net/samples/v5/veshapes/venumberedpinsample.html

     

    The reason you did it, is that without this setting, the pins numbers appear underlined.

    However is there any way to somehow encapsulate this style into the pin's style, instead of making it a global setting?

     

     I now see that all the <a>...</a> anchor tags in the document are not underlined anymore...

     

    Thank you very much!

    Saturday, June 9, 2007 9:07 AM
  • try this instead.

    .VEAPI_Pushpin{ text-decoration: none; }

    Wednesday, June 13, 2007 12:20 AM
  • Hi,

     

    Great answer, it works, thank you very much for your help.

     

     

    Wednesday, June 13, 2007 1:02 PM
  • Thanks for the feedback. I went ahead and updated the sample to now just override the VEAPI_Pushpin style instead of the global link style.

     

    Thanks,

    Keith

    Wednesday, June 13, 2007 8:25 PM