Let’s draw a shape to replace pushpin on Virtual Earth Map.

Let me show you how to draw a shape to replace pushpin on Virtual Earth Map. If you develop a map for marketing/sales analysis by using geo codes and place pin points on a map, you may consider to use your customized points. First, it will represent your business professionally. Second, you can define the size you desire.

Let’s draw together a shape of a blue ball for example. Open Adobe Photoshop software, you can use any size and any shape such as rectangle or square. I will start with a 40×40 image space with a transparent background. This will not cover your map in the back if you save the file in .png or .gif format. If you save the file in .jpg format, the background won’t look cool on a map.

Select ellipse tool and use fixed size of 38×38 to start drawing a blue circle. Remember to check “Anti-alias” checkbox, so the circle will have a sharpened edge. Now, you can modify the layer by double click on layer. Check the Stroke box and select 1px for the border of the blue circle. Then select a darker blue color to draw the border.

To make the ball looks like 3D image, you can add lighting effect to it by the menu Filter->Render->Lighting Effects. Select any direction of light on the object. Now you have a great image but it’s only in .psd format. We got to save it for the web in .png or .gif format. Click on File->Save for Web & Devices. Select GIF or PNG-24 in the preset drop down box. Save the file to the server.

Then you can use the function provided by Microsoft Virtual Earth API to add this image to a map. The sample codes are below:

var image = “<img src=’images/icons/BlueBall.png’ style=’background:transparent;’/>”;

You can download the .png image here:

The screenshot below is one of the applications we built applying Virtual Earth Map. We need to define geo codes longitude and latitude for each property and embed the ball image for each location on the map.