Geoffrey Emery
Data Stories..Letting Data Tell Your Story

Virtual Earth Tutorial 2: Adding A Specific Map To A Web Page and Deep Dive into the Load Map Function

April 23, 2008 13:02 by gemery

 

 < Previous Tutorial Adding a basic Map 

LIVE DEMO | SOURCE

We are going to start off with the same code base of the last the Tutorial but this time we want to add a specific map to the page instead of the random map. There are actually several ways to do this but for his situation we are going to do it using a lat and longitude. The first thing we need to do is  get the latitude and longitude for the place that we want to have the map centered on. There are several way to do this but for now i just typed in "lat long for los angeles" and it returned this to me.

34.0° N - 118.2° W

So we are going to be taking this Lat long and use it to modify  the existing LoadMap() function. As you can see below we are going to new up a VELatLong object and pass in the lattitude and longitude to its constructor.

map.LoadMap(new VELatLong(34.0, -118.2)); 

Add in this to the sample from tutorial 1 and you get this map.

image

As you can see the map is centered on Los Angeles.This is really cool but it gets even better. This is where we do the deep dive into what the rest of the variables that  you can pass do. Below you will see a example of the function with all the possible variables that you can pass in.

LoadMap(VELatLong, zoom, style, fixed, mode, showSwitch, tileBuffer, mapOptions)

 

Lets talk about what each one of these variables does

VELatLong - A VeLatLong Class object that represents the center of the map..Like LA
zoom - A zoom level to display. Valid values range from 1 through 19. Optional. Default is 4. 1 being the highest(from Space)
style -

A VEMapStyle Enumeration value specifying the map style. Optional. Default is VEMapStyle.Road. 'h' -hybid, 'r' - road, 'o' - obilique , 'a'  -a ariel

Fixed - A Boolean value that specifies whether the map view is displayed as a fixed map that the user cannot change or move it around. 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 or Mode3D. Note 3d requires a plug in
showSwitch - A Boolean value that specifies whether to show the map mode switch on the dashboard control this means change from 2d to 3d. 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. Bigger buffer here gives the user faster reaction when they start to drag the map around
mapOptions - A VEMapOptions Class that specifies other map options to set.

 

Now that we have that out of the way we can go ahead and play with all the values.Check out this demo i have set up for you. Of course the all source included. It works best in firefox right now due to a bug in ie. I  am working on a fix.

LIVE DEMO | SOURCE

image