Bing Maps AJAX Control version 7 – Adding Vector Data

After a quick overview on the new features in the Bing Maps AJAX Control v7 as well as a look at loading the map and displaying localized labels we are now moving on to the various options to add your own data. As before we will compare version 6.3 and version 7 and you will find live examples with source code on my Windows Azure site.

In version 6.3 vector data can be dropped as VEShape-objects of type Pushpin, Polyline or Polygon into the map directly or grouped into VEShapeLayer.

image

The concept is very much the same in version 7 but the namespace and object-model is different. In version 7 objects can as well be dropped as entities into the map directly or grouped into EntityCollections. In v6.3 VEShape-objects and VEShapeLayer had to be vector data while raster data were added as VETileLayer. In v7 vector and raster data are now all entities and we only distinguish the entity-type Pushpin, Polyline, Polygon or TileLayer.

image

Adding a Default Pushpin in v6.3

To add a Pushpin in v6.3 we need at a minimum the latitude and longitude where we want to place it on the map.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps - v6.3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

<script type="text/javascript">
var map = null;

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

var mapOptions = new VEMapOptions();
mapOptions.DashboardColor = 'black';
mapOptions.UseEnhancedRoadStyle = true;
map.LoadMap(new VELatLong(51.46117933094501, -0.9259434789419174), 18, 'h', false, VEMapMode.Mode2D, true, 0, mapOptions);

var pushpin = new VEShape(VEShapeType.Pushpin, new VELatLong(51.46117933094501, -0.9259434789419174));
map.AddShape(pushpin);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
</body>
</html>

Adding a Default Pushpin in v7

The basic idea is the same instead of “VEShape(VEShapeType.Pushpin, new VELatLong(lat, lon)” we use now Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps - v7.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">
var map = null;
var MM = Microsoft.Maps;

function GetMap() {
map = new MM.Map(document.getElementById("myMap"), {
credentials: "Your Bing Maps Key",
center: new MM.Location(51.46117933094501, -0.9259434789419174),
mapTypeId: "a",
zoom: 18
});

var pushpin = new MM.Pushpin(new MM.Location(51.46117933094501, -0.9259434789419174));
map.entities.push(pushpin);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
</body>
</html>

Btw: I think that the new default Pushpin is definitely an improvement Smile

image

Customizing Pushpins in v6.3

Customizing Pushpins in v6.3 is quite simple with regards to changing icons but it would be a bit more fiddling to add labels to the pushpin or next to it (see for example Keith Kinnan’s blog). To use a custom icon we only need to add 1 line of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps - v6.3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

<script type="text/javascript">
var map = null;

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

var mapOptions = new VEMapOptions();
mapOptions.DashboardColor = 'black';
mapOptions.UseEnhancedRoadStyle = true;
map.LoadMap(new VELatLong(51.46117933094501, -0.9259434789419174), 18, 'h', false, VEMapMode.Mode2D, true, 0, mapOptions);

var pushpin = new VEShape(VEShapeType.Pushpin, new VELatLong(51.46117933094501, -0.9259434789419174));
pushpin.SetCustomIcon('./IMG/pushpin.png');
map.AddShape(pushpin);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
</body>
</html>

Customizing Pushpins in v7

In v7 you can define a much larger variety of PushpinOptions. Text and textOffset for example can simply be defined as a PushpinOption. So is the icon that you want to use on the map.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps - v7.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">
var map = null;
var MM = Microsoft.Maps;

function GetMap() {
map = new MM.Map(document.getElementById("myMap"), {
credentials: "Your Bing Maps Key",
center: new MM.Location(51.46117933094501, -0.9259434789419174),
mapTypeId: "a",
zoom: 18
});

var pushpinOptions = { icon: './IMG/pushpin.png' };
var pushpin = new MM.Pushpin(new MM.Location(51.46117933094501, -0.9259434789419174), pushpinOptions);
map.entities.push(pushpin);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
</body>
</html>

Adding an InfoBox or Popup in v6.3

Now here comes the first major difference: In version 6.3 you can simply set additional Pushpin-properties such as a title or a description. Once you set at least a title, an InfoBox pops up when you mouse-over the Pushpin. Further customization of this InfoBox is possible by defining styles in the Cascading Style Sheet and clearing the default InfoBox styles.

In the example below we will increase the size of the InfoBox and load a Photosynth-collection in the description area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps - v6.3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<style type="text/css">
.customInfoBox-previewArea {
width:500px;
height:420px;
}
</style>

<script type="text/javascript">
var map = null;

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

var mapOptions = new VEMapOptions();
mapOptions.DashboardColor = 'black';
mapOptions.UseEnhancedRoadStyle = true;
map.LoadMap(new VELatLong(32.362980181127874, -64.71483707427978), 17, 'h', false, VEMapMode.Mode2D, true, 0, mapOptions);

//Set Style for InfoBox
map.ClearInfoBoxStyles();

var pushpin = new VEShape(VEShapeType.Pushpin, new VELatLong(32.362980181127874, -64.71483707427978));
pushpin.SetCustomIcon('./IMG/pushpin.png');
pushpin.SetTitle('Martello Tower');
pushpin.SetDescription('<iframe frameborder=0 src="http://photosynth.net/embed.aspx?cid=ba12ab48-6899-4d7f-b28c-624f5f7ff4f0&delayLoad=false&slideShowPlaying=false" width="500" height="400"></iframe>');
map.AddShape(pushpin);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
</body>
</html>

Adding an InfoBox or Popup in v7

In version 7 there is at present no build-in mechanism to create InfoBoxes or pop-ups but here is how it could be done.

  1. we extend the properties of the Pushpin-object using the JavaScript prototype function in order to provide “title” and “description” for a Pushpin object
  2. We create a div-element that can we positioned, hidden or shown to show the InfoBox
  3. We add an event-handler to the map that opens the InfoBox whenever we click on the pin and another one that hides the InfoBox again when we change the map-view.

Admittedly this is a bit more effort in v7 than it is in v6.3 but once the framework is in place it can be re-used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps - v7.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">
var map = null;
var MM = Microsoft.Maps;

function GetMap() {
map = new MM.Map(document.getElementById("myMap"), {
credentials: "Your Bing Maps Key",
center: new MM.Location(32.362980181127874, -64.71483707427978),
mapTypeId: "a",
zoom: 17
});

var pushpinOptions = { icon: './IMG/pushpin.png' };
var pushpin = new MM.Pushpin(new MM.Location(32.362980181127874, -64.71483707427978), pushpinOptions);

//extend the pushpin class to store information for popup
MM.Pushpin.prototype.title = null;
pushpin.title = "Martello Tower";
MM.Pushpin.prototype.description = null;
pushpin.description = '<iframe frameborder=0 src="http://photosynth.net/embed.aspx?cid=ba12ab48-6899-4d7f-b28c-624f5f7ff4f0&delayLoad=false&slideShowPlaying=false" width="500" height="400"></iframe>';

//add a click event
pushpinClick = MM.Events.addHandler(pushpin, 'click', displayEventInfo);

//close the infobox when the map is panned or zoomed
MM.Events.addHandler(map, 'viewchangestart', closeInfoBox);

map.entities.push(pushpin);
}

function displayEventInfo(e) {
if (e.targetType = "pushpin") {
var pix = map.tryLocationToPixel(e.target.getLocation(), MM.PixelReference.control);
var ibTitle = document.getElementById('ibTitle');
ibTitle.innerHTML = e.target.title;
var ibDescription = document.getElementById('ibDescription');
ibDescription.innerHTML = e.target.description;
var infobox = document.getElementById('infoBox');
infobox.style.top = (pix.y - 60) + "px";
infoBox.style.left = (pix.x + 20) + "px";
infoBox.style.visibility = "visible";
document.getElementById('myMap').appendChild(infoBox);
}
}

function closeInfoBox() {
var infobox = document.getElementById('infoBox');
infoBox.style.visibility = "hidden";
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div><br />
<div id='infoBox' style="visibility:hidden; position:absolute; top:0px; left:0px; max-width:550px; z-index:10000; font-family:Verdana; font-size:12px">
<img src="IMG/leftbeak.png" alt="Left Beak" style="position:absolute;top:10px; left:0px;" />
<table style="width:510px; border:medium solid Orange; position:absolute;top:0px; left:22px; background-color:White">
<tr style="width:510px">
<td style="width:510px"><b id='ibTitle'></b></td>
<td align="right" valign="top"><img src="IMG/close.png" alt="close" onclick="closeInfoBox()" /></td>
</tr>
<tr>
<td colspan="2"><a id='ibDescription'></a></td>
</tr>
</table>
</div> 
</body>
</html>

image

As mentioned before you will find these and other examples – including Polylines and Polygons here.

Previous Postings on the Bing Maps AJAX Control v7

Advertisements
This entry was posted in AJAX, Bing Maps and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s