Andri Yadi

I've searched blogs about Virtual Earth in INDC Geeks blog, I couldn't find one. So, I think it's good idea to start very basic and brief one. This blog is intended to give you a glance about how to embed map into web page using Virtual Earth Map Control SDK.

Lets code a very basic one. This code below is a regular HTML page. Just start your Visual Studio, Add New Item and select HTML Page, and write this code.

Then View in Browser, and you'll get following display. I don't know why the default map is US :)

OK, I'll explain the code as clear as possible.

• First thing first, you must include the JS script that contain Map Control script. You can easily write this code:

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>

As you can see, we add reference to map control library version 6, the latest version. Off course you need connected to internet to get the script and the map loaded.

• Write simple JS function to get the map object.

var map = null;

function GetMap()
{
     map = new VEMap('myMap');
     map.LoadMap();
}

I think the function code is self-explained. First, create map object that is instantiated from VEMap class with the ID of layer (where the map will be rendered) as constructor parameter. Then, call LoadMap method of map object.

• You need to call the above JS function when the body is loaded. So, in the body tag you should set onload attribute with GetMap() function.
• Then, make sure you have a layer (div tag) inside the body with specified id, "myMap" in this case.

That's it and you can embed map into your web page.

Ok, lets say now you want to display specified location as a default when the first time the map is loaded. You just specify a location as VELatLong object and use the object as LoadMap() method parameter. Change the JS function above to:

var map = null;
var dyCodeCoord = new VELatLong(-6.89186, 107.59987);

function GetMap()
{
       map = new VEMap('myMap');
       map.LoadMap(dyCodeCoord);
}

And you'll get following map. The exact coordinate will be displayed as center by default.

As you can see at the code above, we create VELatLong object to be provided as LoadMap argument. VELatLong class requires two parameters: latitude and longitude point in decimal form. If you have the point in degree form, you need to convert to decimal form first. Use following page to convert it: http://robuck.net/geocaching/convert.htm

Now, you want to customize more when the map loading. First you need to know more about LoadMap parameters:

VEMap.LoadMap(VELatLong, zoom, style, fixed, mode, showSwitch, tileBuffer);

Parameters:

VELatLong

A VELatLong Class object that represents the center of the map. Optional.

zoom

The zoom level to display. Valid values range from 1 through 19. Optional. Default is 4.

Style

A VEMapStyle Enumeration value specifying the map style. Optional. Default is VEMapStyle.Road.

fixed

A Boolean value that specifies whether the map view is displayed as a fixed map that the user cannot change. Optional. Default is false.

mode

A VEMapMode Enumeration value that specifies whether to load the map in 2D or 3D mode. Optional. Default is VEMapMode.Mode2D.

showSwitch

A Boolean value that specifies whether to show the map mode switch on the dashboard control. Optional. Default is true (the switch is displayed).

tileBuffer

How much tile buffer to use when loading map. Default is 0 (do not load an extra boundary of tiles). This parameter is ignored in 3D mode.

Lets say you want to display aerial view with zoom level is 10 by default. Then change LoadMap method to:

map.LoadMap(dyCodeCoord, 10, VEMapStyle.Aerial);

And you'll get:

To emphasize to location, you can add pin and display detail information about the location. To do that, you need to use VEPushpin class. Change the GetMap() function to:

function GetMap()
{
     map = new VEMap('myMap');
     map.LoadMap(dyCodeCoord, 10, VEMapStyle.Aerial);
     var pin = new VEPushpin(1, dyCodeCoord, null, 'DyCode', 'PT. Dycode Cominfotech Development');
     map.AddPushpin(pin);
}

And you'll get:

Hover your mouse to the pin, and detail information of the pin will be displayed.

OK, that's it for now. I'll update this blog later. For now, I need to sleep because it's 5 am here.

For more information about Virtual Earth SDK, go to: http://msdn2.microsoft.com/en-us/library/aa905677.aspx

Thanks for reading this brief blog.

Share this post: | | | |