Microsoft VEMap Using Pure Javascript

The article will guide you with samples to create and embed Microsoft Map in your website within minutes. The intension is to give basic knowledge on how Javascript library could be used to embed Custom Map

After creating the most popular article 2 years back on Google Maps, I am getting lots of replies/suggestions on my mailbox daily. I have tried to give as much support as I can. During this process, I found lots of people want me to write about Microsoft Map in the same way as I did for Google. While I search for Bing Maps API, I hardly find any links that provides good and precise knowledge on how to start with working with it. Thus, I thought of creating this article for you so that all people who wants to work with Microsoft Maps could be benefitted. I have tried to make this most simple and easy to understand, but if would be excited to see your replies and suggestions. I agree that the article is very much inspired to MSDN as I dont have enough experience with Bing as such. My intension is to give accumulate all the necessary items into a single thread.

Microsoft Launches Bing Map services to provide online Mapping Services that enable the user to create custom maps and share information about a location in their own applications. Map service also provides superior API to search for
location, Geocode Address of a specific location, Draw Custom Shapes on the map, interact with users etc.

In both the process when client requests the server, server gets the data from live.com and sends back to the client. Thus the client always need to be connected to the internet even if it is working in LAN to get online data from Live Servers.

The SDK provides Javascript API services that might be added freely to the website and start working with them.
The api gives you a number of Javascript classes which one might use to create maps. As this works only in the client side
using Javascript, you can use this service to any programming language you wish to (Such as JSP, PHP, ASP etc).

The web service API is a programmable SOAP services implemented using Windows Communication Foundation. You can make use of
the library of classes generated automatically when you add reference to the web service. You can integrate the Web service to your
web site or WPF windows client and get Imaginary Data when connected to Internet.

In this Article I am going to discuss about Bing Map Control SDK which is Javascript library. I will give you examples on how to make use of
Virtual Earth Map controls in your website a better way.

This might seem to you most exciting. Let us make the most simple map in a web page. I am using just normal html code to make you understand a better and
to make this useful to all.
To create a map Just follow the steps below :

Here we have created a Button which will load map directly. Now let us discuss about the few functions used in the above code:

VEMap(divelement) : This will load the Map into a div element. The Id of the div element is passed to the Constructor.

VELatLong(latitude, longitude, altitude, altitudemode): This returns a Geo point object that should be passed to LoadMap. You can define as many Geo points as you want using
VELatLong. The Arguments are given below

Latitude: Latitude of a single point in the globe.

Longitude : Longitude of the single point in the globe.

Altitude : It defines the Altitude of a point in the globe. This is optional, default value is 0

AltitudeMode: Altitudemode defines how the altitude is represented. Altitudemode can be VEAltitudeMode.Default, VEAltitudeMode.Absolute, VEAltitudeMode.RelativeToGround.

This is optional and Default Value is VEAltitudeMode.Default.AltitudeMode comes very handy when working with Mode3D(Discussed in later Sections).

Finally we have called map.LoadMap(point, zoom, style, fixed, mode, showSwitch, tileBuffer)
This will Load the map centering the specified VELatLong point.

VELatLong : It represents the global point to which the map will be centered

Zoom : Represents the Zoom Level. The Range could be between 1 - 19. Default is 4

Style : Specifies the Map Style to be displayed. The value can be :

Road

Shaded

Aerial

Hybrid

Oblique

Birdseye

BirdseyeHybrid

You can try them one by one. Each of them could be changed from the UI too.

Fixed : Specifies whether the map could be changed by the user at runtime or not. Default is false

Mode : Specifies whether the map should be loaded in Mode2D or Mode3D mode. Default is 2D.Note : Mode3D requires the browser to install the proper plugin, otherwise the map will not be displayed properly.

ShowSwitch : Defines whether the map mode switch button to be displayed in the map or not

TileBuffer : Specifies how much tile buffer would be used to smoothen the map navigation.

Pushpin are used to point a Geo Location on the map. We can add as many pushpins as we want over the map.
The Map will show the pins when the area is viewed dynamically. Let us look into the code below :

The pin will be added at the center of the map when it is called. map.GetCenter() returns an object of VELatLong which points to the center of the map.
This is passed to LatLongToPixel(VeLatLong) to get the actual point VEPixel object.
We need to pass this object to AddPushpin to get the pushpin added to the point.

The Pushpin object returned can set Title using SetTitle and Description using SetDescription functions.
You can see I used HTML inside SetDescription and SetTitle.SetCustomIcon is used to change the default pin Icon. The SetMoreInfoUrl creates a ... which opens up a new window.
We can also set the entire html content of the pushpin using

We can add custom shapes over the map. We may use VEShape class to create custom Shapes over our map.
We can add different shapes to the map based on VEShapeType Enumeration. The Shapes it supports are :

The above code will create a polyline over the map which traverses over the points specified.
The HideIcon is important in this case otherwise it will put an unnecessary Pushpin Icon
on the start point of the polyline. The SetLineColor specifies the RGB color generated from VEColor.
The SetFillColor(which is unnecessary for Polylines) speicifies the color to fill the polyline and SetLineWidth specifies the width of the line drawn over map.

We may use Geocoding to find a location. Geocoding in Version 6.2 got most easiest with the introduction
of Find function. You may use Find Function of VEMap control to get the information of the
Geographic point from an address. Let us look into its prototype :
VEMap.Find(what, where, findType, shapeLayer, startIndex, numberOfResults, showResults, createResults, useDefaultDisambiguation, setBestMapView, callback);

What : Name of the Business Entity for which search is conducted

Where : Parameter which specifies the address to be found

FindType : Currently it supports only VEFindType.Businesses. So we set this as null

ShapeLayer : This represents the object of VEShapeLayer. We will discuss how to create layers in later sections. For time being we set this to null

StartIndex: Optional parameter for the start index in the result

numberOfResults : No of results to be returned from Search

showResults: A boolean value that specifies whether the results to be shown in the map.

createResults : Creates a pushpin to the position on which What is specified. Ignores if what is null.

useDefaultDisambiguation : Specifies whether a dialog box to appear if there is ambiguity in state, country, city etc.

setBestMapView : Automatically sets the best map view when search result is found.

Callback : The callback which will be fired on successful search operation complete.

Thus if we call StartGeocoding("Kolkata"), it will put a pointer over the New York city. In the GeocodeCallback function
I have created a VEShape with a Pushpin on the best place result. If no result is found,
the message box "Address not Found!!!" appears.

We can create layers within the map. We use VEShapeLayer to create multiple layers over the map. This will enable us to group
related informations (such as drawings, PushPins etc), so that it could be hidden and shown easily programmatically. Basically it acts as a container
for all types of Shapes.
The process is simple. Create a class of VEShapeLayer, Create objects of VEShape. Add the object of Shape in the object of Layer using
AddShape method. Finally, after all the shapes are added to the Shape Layer, we add the Layer to the map using AddShapeLayer of VEMap
object.
We can use Show, Hide method of the Layer object to make the layer visible or invisible at times programmatically.
You can also use GetShapeByIndex , GetShapeByID, DeleteShape, DeleteAllShapes of Layer object to manipulate after its been added to the Map.
Now let us look at the code below :

This code looks almost similar to the others, the only difference is, We added a new Layer using VEShapeLayer and added all the Shapes on the layer rather than adding
them directly to the map. Additionally I have shown how to create CustomPin using only html. You can use SetCustomIcon to generate custom pin for your map.
The SetPhotoURL function will add an image on the Description pane. You may also use ClearInfoBoxStyle / SetInfoBoxStyle methods before drawing the custom
infobox youself.

Virtual Earth maps has an inbuilt to import data from 3 types of linkage :

Shape collection using Windows Live : You can create shapes on scratchpad associated with your Live website. This data could be used very easily to your web site to draw shapes with Title and description.
To Do Follow the Steps mentioned :

Here georss could be of 3 types: georss:point, georss:polyline and georss:polygon.
You can generate the GeoRSS dynamically using the data from the server. To do this create one httphandler and create the response directly.
Remember to use ContentType=application/xml;

VEDataType.ImportXML : Specified if KML data is specified in datasource.

Event handling with Map is the most vital section of building a map.VEMap responds to various events, starting from Normal Keyboard events, it responds to drag and drop,
mouse click, scroll wheel movements etc. and also to custom Map events if attached.

Working with events is very easy. You only need to write a callback function which will be called automatically when event is triggered. And then use AttachEvent to register the event.

In the code above, I have added few event handlers called onclick, ondoubleclick, onmousedown ... each of which calls MouseHandler. Inside any mouseeventhandler
we get an implicit object e. We can usee.eventName
to get which event generates the event.e.mapX, e.mapY
represents the Co-ordinate point of the map where event generated.
e.elementID gets the bound element(if any) which is within the area, e.zoomLevel defines the current Zoom of the map etc.
Here we got the bound Polygon and fetch its Title and description to show you.

To work with 3D mode you need to install Virtual Earth 3D plugin. The 3D plugin will launch automatically whenever you click on 3D button of the main navigation menu.

After installing the 3D plugin you can also install 3D Model Creation software called 3dVIA. It allows you to create custom object directly over map which you can later exported or import directly to your website very easily using ImportShapeLayerData.

After successful installation, try creating your first 3d map.

In order to work with 3D map we need to change the map mode to 3D. Using the code VEMap.SetMapMode(VEMapMode.Mode3D) will load the map in 3D.
The process of creating 3D map is almost similar to how we work in 2D. Let us suppose take the example of Pushpin.

If we specify VEAltitudeMode.Default, or VEAltitudeMode.RelativeToGround as Altitudemode, then the altitude is set from the Ground, just like the image below.

The above picture shows how the image gets changed using altitude.
You can use 3DVIA to create custom 3D models to the Map. Go to
bing.com/maps
[^]
, Move to 3D view and go to collections menu, then click “Open your collections” and then click on the house icon or right-click a location, then click “Add 3D model”.

Finally let us create a website with all the most important things in place. For the demo I have created a custom menu for the map
which will allow you to perform the most important operations. Let us look into the oode below:

VEMap control is easy to develop and very handy tool to display maps. If you need any further help, feel free to comment. I would love to answer your queries.

This is part 1 of the Article. I would also be going further for WPF users and composing Part 2 of this topic very soon which will include the Web Service solution and also I will give an idea how you can use
Virtual Map earth in Windows application.
Hope you will read that too.

Share

About the Author

Oh, lets go a bit further to know him better. Visit his Website : www.abhisheksur.com to know more about Abhishek.

Abhishek also authored a book on .NET 4.5 Features and recommends you to read it, you will learn a lot from it.http://bit.ly/EXPERTCookBook

Basically he is from India, who loves to explore the .NET world. He loves to code and in his leisure you always find him talking about technical stuffs.

Presently he is working in WPF, a new foundation to UI development, but mostly he likes to work on architecture and business classes. ASP.NET is one of his strength as well. Have any problem? Write to him in his Forum.

Hi Abhishek, very useful example of Viryal Earth Map Control. But I am bit Confused about the javascript sdk which you have used. I went through the documentation of bing map Ajax sdk. We need to have app key before we can use that sdk in our project. But don't see any key in above example. I want to understand the difference between VE javascript library which you have used and Bing map Ajax javascript API. Also I have created the example above but it is not displaying any map may be because I have not mentioned any any key.I would like to display sql data on bing maps with Ajax javascript API and display on web site. Can you please explain how to do that. Any help would be highly appreciated.

Article is very useful thank you for that,but I have a little problem,I asked about it in the website but it is the best way to get correct answer.I want to drag pushpin,because after I compile this project everything runs good but when I want to drag pushpin near places of the address I looked I can't.I tried this code:

A great article. Really helped a lot. I have got a question though.I am using C# and my requirements is to show multiple pushpins (corresponding to businesses in the db) on the map. Which means I have 4 variable parameters per business namely - latitude, longitude, pushpin title and pushpin description. How can I do it programatically? I cant pass an array from C# to Javascript as it doesnt recognise the format. Or is there any other way I can get this done??

Thanks, Abhishek, for making a clear and concise article. The topic has been neatly explained. Any idea on how licensing works for Bing Maps? Can I use this javascript code for my company's website and display their list of dealers?

Thank you so much dear. Actually I have this idea of publishing this for a long time. Just got time to implement this now. Also got so many requests by users to make something like this after my initial Gmap Article.