Last week I showed you how to add a map with a custom data layer to your website in 10 minutes and without the need to be a developer. One reader used the 10 minute tutorial to add a map to their website for Rushworth Community House, and asked in the follow up comments how to customize the pushpin icon that appears for each location. This is really easy to do if inserting an additional line of code into the web page doesn't frighten you. The icon that appears on the map for each item in your Collection is simply a gif image. You can specify a custom gif image by setting the IconURL for your Collection. Lets say you want each pushpin to be a heart instead of the default pin like this:

You can try it out here. If you view the source of the page you will notice the only change from the original version is the addition of this line:

     veLayerSpec.IconUrl ="http://www.sininlinen.com/mapstar.gif";

Of course, you can substitute any image you want in there.

With a little more effort you can have a different icon for each item in your Collection. Perhaps you want to number the icons. Or maybe you want to draw a different symbol for different types of things in the Collection. Here is a version of the page that draws a numbered circle for each item:

Again, view the source to see the code. Her eyou will see that we are iterating over the array of pushpins and specifying a new icon for each like this:

points[cnt].Iconurl = "http://maps.live.com/i/bin/1.3.1204222815.33/pins/RedCircle" + (cnt+1) + ".gif";

After each icon has had an icon assigned, you tell VE to refresh the layer on the map by hiding it and re-displaying it like this:

     map.HideLayer("MYLAYER");
     map.ShowLayer("MYLAYER");

That's it! if you've added these extra features to your web page, you should still be under 15 minutes total :-) In part three I'll show you how to add a text field to the page so that the user can enter a city or address they want to jump to. Best of all, it will only add about 4 lines to your application.

As always, if you want to poke around to find some more chrome for your app, visit the VE developer documentation site. If you see something you like, just hit the 'Source code' tab on the page and copy and paste the snippet into your application.