Geolocation and Mapping - HTML5 with Visual Studio 2012 - page 286

5. Press F5 to start the application. depending on your location, your page should look

like Figure 12-9 . notice the controls at the top-left corner of the page. You can use
this to zoom in or out and pan in any direction. The Automatic mode will switch to
the satellite view if the map is zoomed in sufficiently.

Figure 12-9. Displaying the initial map

When calling the setView() function to specify the center location, this code also set the zoom to 18.
Depending on your application you may not want to zoom in that far, initially. Try this code using 15 or 16 to see
how that looks. Of course the user can also adjust the zoom once the map is displayed.

Adding Pushpins
Now you'll display some pushpins on the map. To add a pushpin, you first create a Pushpin object, specifying its
location. Then add it to the map's entities collection. First, you will add a default pushpin at the current location.
Later, you'll add custom pushpins to indicate points of interest.
Add the code shown in bold to the end of the showLocation() function:

// Center it on the current location
map.setView({ zoom: 18, center: new Microsoft.Maps.Location(lat, long) });

// Mark the current location
var pushpin = new Microsoft.Maps.Pushpin
(new Microsoft.Maps.Location(lat, long), null);
map.entities.push(pushpin);

The lat and long variables contain the same values used to center the map. Press F5 to start the application.
You should see a pushpin indicating the current location as shown in Figure 12-10 .