Bing maps AJAX V7 Tips and Tricks

Question

This sticky is meant to be a single place where tips and tricks can be posted about V7 of the Bing Maps AJAX Control. Please refrain from asking questions this sticky, create a separate question instead. The goal will be to come up with a bunch of tips, tricks and best practices that will benefit everyone.

---

Windows Live Developer MVP - http://rbrundritt.spaces.live.com | http://inknowledge.co.uk

Answer 1

Tip - Polygons with holes. In order to support polygons with holes cross browser be sure to reverse the orientation of your points in your inner rings (like what is required in SQL 2008). This tip comes from tanoshimi in the following post: http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/ed756c03-13f3-4bee-b42d-d505326b05ec?prof=required

---

Windows Live Developer MVP - http://rbrundritt.spaces.live.com | http://inknowledge.co.uk

Answer 2

Use Bing Maps Ajax 7 over SSL:

https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1

Notice the "https" and the added "s=1" in the query string. This is identical to the method of accessing v6.x under SSL.

---

Microsoft MVP - Bing Maps
Blog: http://pietschsoft.com | Web.Maps.VE - ASP.NET AJAX Bing Maps Server Control

Answer 3

Here are some additional tips:

Pushpin Animation Extension: http://pietschsoft.com/post/2010/11/30/Bing-Maps-Ajax-7-Simple-Pushpin-Animation-via-Extension-to-MicrosoftMaps.aspx

Draggable Pushpins: http://www.garzilla.net/vemaps/Draggable-Push-Pins-with-Bing-Maps-7.aspx

Custom Infoboxes: http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/8eec78d8-e211-4245-b47c-e83289755f2c

---

Windows Live Developer MVP - http://rbrundritt.spaces.live.com | http://inknowledge.co.uk

Answer 4

Localized Labels: http://jkebeck.wordpress.com/2010/11/30/bing-maps-ajax-control-version-7-loading-the-map-localized-labels/

V6.3 to V7 migration tips: http://jkebeck.wordpress.com/2010/12/01/bing-maps-ajax-control-version-7-adding-vector-data/

 

---

Windows Live Developer MVP - http://rbrundritt.spaces.live.com | http://inknowledge.co.uk

Answer 5

GeoRSS is not supported out of the box but here is a tool to help import your GeoRSS files in: http://rbrundritt.wordpress.com/2010/12/10/georss-support-for-bing-maps-v7-ajax-control/

---

Windows Live Developer MVP - http://rbrundritt.spaces.live.com | http://inknowledge.co.uk

Answer 6

Thank you for the GeoRSS post. It was AWESOME! There is a bug with the jQuery concat() bit that stops the map zooming properly (and for a while I didn't realize that the code was actually working with my own data). _allCoords.concat(tempCoord); Should be _allCoords = _allCoords.concat(tempCoord); Also, couldn't leave comment on your wordpress blog to say thanks for the work.

---

Jonathon

Answer 7

Add Custom Navigation Bar Buttons: http://pietschsoft.com/post/2010/12/18/Bing-Maps-Ajax-7-Add-Custom-Navigation-Bar-Buttons-using-jQuery.aspx

Add a Simple Mini Map: http://pietschsoft.com/post/2010/12/19/Bing-Maps-Ajax-7-Add-a-Simple-Mini-Map.aspx

Changing mouse cursor: http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/d2aba403-1974-430a-8993-6fb16dd2e87a

---

Microsoft MVP - Windows Live Platform
Blog: http://pietschsoft.com | Web.Maps.VE - ASP.NET AJAX Bing Maps Server Control

Answer 8

Add a Simple Mini Map: http://pietschsoft.com/post/2010/12/19/Bing-Maps-Ajax-7-Add-a-Simple-Mini-Map.aspx

---

Microsoft MVP - Windows Live Platform
Blog: http://pietschsoft.com | Web.Maps.VE - ASP.NET AJAX Bing Maps Server Control

Answer 9

Note that the information regarding SSL at http://msdn.microsoft.com/en-us/library/gg427624.aspx is incorrect. It asks you to use the "ssl=1" parameter, however as mentioned above the correct parameter is "s=1". The former does not work, although it is in the official documentation.

Answer 10

Is there way of not display Base Tiles in V7 ?   This was possible in 6.3.

---

Steve Kahler

Answer 11

@Steve Kahler - As per the instructions in the first post, please do not ask questions in this thread - I have answered your question separately in the forum.

---

twitter: @alastaira blog: http://alastaira.wordpress.com/

Answer 12

Here is how you get rid of all the "extra" Bing stuff. Took me forever to find this page. 

 

  map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
   credentials: "",
   mapTypeId: Microsoft.Maps.MapTypeId.road,
   enableClickableLogo: false,
   enableSearchLogo: false,
   showCopyright: false,
   showDashboard: true,
   showLogo: false

  });

Answer 13

The correct API page is http://msdn.microsoft.com/en-us/library/gg427603.aspx. Not all of the properties from 6.3 are applicable, such as UseEnhancedRoadStyle.

Answer 14

Using event and pushpin drag capabilities to snap it to a route while dragging:

<!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 - Drag with snap on route</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=fr-FR"
		type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		// Map control
		var map = null;

		// Route Shapes
		var route = null;
		var routepoints = [];
		var viaShape = null;

		// Logic
		var viaDragging = false;

		// Distance and drag action index			
		var dragMinIndex = -1;
		var dragMaxIndex = -1;


		function init() {
			map = new Microsoft.Maps.Map(
				document.getElementById("map"),
				{
					credentials: "YOURKEY",
					center: new Microsoft.Maps.Location(47.5, 2.75),
					//disableUserInput: true,
					showDashboard: false,
					showLogo: false,
					showCopyright: false,
					mapTypeId: "r",
					zoom: 5
				}
			);

			Microsoft.Maps.Events.addHandler(map, 'mouseup', onMouseUp);
			Microsoft.Maps.Events.addHandler(map, 'mousemove', onMouseMove);

			map.getCredentials(MakeRouteRequest);
		}

		function MakeRouteRequest(credentials) {
			var start = "Laventie, France";
			var stop = "Paris, France";
			var routeRequest = "http://ecn.dev.virtualearth.net/REST/v1/Routes?wp.0=" + start + "&wp.1=" + stop + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;
			CallRestService(routeRequest);
		}

		function CallRestService(request) {
			var script = document.createElement("script");
			script.setAttribute("type", "text/javascript");
			script.setAttribute("src", request);
			document.body.appendChild(script);
		}

		function RouteCallback(result) {

			if (result &&
				   result.resourceSets &&
				   result.resourceSets.length > 0 &&
				   result.resourceSets[0].resources &&
				   result.resourceSets[0].resources.length > 0) {

				// Draw the route
				var routeline = result.resourceSets[0].resources[0].routePath.line;
				routepoints = [];
				for (var i = 0; i < routeline.coordinates.length; i++) {
					routepoints[i] = new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
				}

				// Draw the route on the map
				var options = {
					strokeColor: new Microsoft.Maps.Color(127, 255, 165, 0),
					strokeThickness: 5
				};
				route = new Microsoft.Maps.Polyline(routepoints, options);
				map.entities.push(route);

				viaShape = new Microsoft.Maps.Pushpin(routepoints[parseInt(routepoints.length / 2,10)], {
					icon: 'poi_via.png',
					anchor: new Microsoft.Maps.Point(13, 13)
				});

				map.entities.push(viaShape);
				// Add a handler to the pushpin drag
				Microsoft.Maps.Events.addHandler(viaShape, 'mousedown', onMouseDown);

				map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(routepoints) });
			}
		}


		function onMouseDown(e) {
			if (viaShape != null) {
				if (e.target == viaShape) {
					viaDragging = true;

					e.handled = true;
					return;
				}
			}
		}

		function onMouseMove(e) {
			if (viaShape != null) {
				if (viaDragging) {
					var curLoc = map.tryPixelToLocation(new Microsoft.Maps.Point(e.getX(), e.getY()));

					var closestPoint = getDistancePoint(curLoc, routepoints, "min");
					viaShape.setLocation(new Microsoft.Maps.Location(closestPoint.latitude, closestPoint.longitude));
				}
			}

			e.handled = true;
			return;
		}

		function onMouseUp(e) {
			if (viaDragging) {
				viaDragging = false;
				e.handled = true;
				return;
			}
		}




		function getDistancePoint(loc, linePoints, choice) {
			var points = linePoints;

			var dragMinDistance = 99999999999;
			var dragMaxDistance = -1;

			for (var i = 0; i < points.length; i++) {
				var curDist = getDistance(points[i].latitude, points[i].longitude, loc.latitude, loc.longitude, "k");
				if (curDist < dragMinDistance) {
					dragMinDistance = curDist;
					dragMinIndex = i;
				}
				else if (curDist > dragMaxDistance) {
					dragMaxDistance = curDist;
					dragMaxIndex = i;
				}
			}

			if (choice == null) {
				return points[dragMinIndex];
			}
			else {
				if (choice == "max") {
					return points[dragMaxDistance];
				}
				else {
					return points[dragMinIndex];
				}
			}
		}

		// from http://www.zipcodeworld.com/samples/distance.js.html - thanks!
		function getDistance(lat1, lon1, lat2, lon2, unit) {
			var radlat1 = Math.PI * lat1 / 180
			var radlat2 = Math.PI * lat2 / 180
			var radlon1 = Math.PI * lon1 / 180
			var radlon2 = Math.PI * lon2 / 180
			var theta = lon1 - lon2
			var radtheta = Math.PI * theta / 180
			var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
			dist = Math.acos(dist)
			dist = dist * 180 / Math.PI
			dist = dist * 60 * 1.1515
			if (unit == "K") { dist = dist * 1.609344 }
			if (unit == "N") { dist = dist * 0.8684 }
			return dist
		}   


	</script>
</head>
<body onload="init()">
	<div id="map" style="position: relative; width: 800px; height: 350px;">
	</div>
</body>
</html>

---

MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

Answer 15

Here is an example of get coordinates from mouseclick on bingmaps ajax7

https://sites.google.com/site/gissoftwareconsulting/blog/post/getcoordinatesfrommouseclickonbingmapsajax7