locked
Bing maps AJAX V7 Tips and Tricks RRS feed

  • General discussion

  • 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
    • Moved by Ricky_Brundritt Saturday, March 10, 2012 2:12 PM (From:Bing Maps: Map Control and Web services Development)
    • Changed type Ricky_Brundritt Saturday, March 10, 2012 3:15 PM
    • Changed type SoulSolutions Sunday, March 11, 2012 5:53 AM not a question, causes stats to show an unaswered question for forum
    Thursday, December 2, 2010 5:17 PM

All replies

  • 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
    Thursday, December 2, 2010 5:20 PM
  • 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

    Friday, December 3, 2010 12:20 AM
  • Monday, December 6, 2010 11:02 AM
  • 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
    Monday, December 6, 2010 1:36 PM
  • 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
    Friday, December 10, 2010 3:43 PM
  • 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
    Thursday, December 16, 2010 1:23 PM
  • 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.
    Wednesday, January 26, 2011 3:55 PM
  • Is there way of not display Base Tiles in V7 ?   This was possible in 6.3.
    Steve Kahler
    Friday, March 4, 2011 4:54 PM
  • @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/
    Friday, March 4, 2011 7:17 PM
  • 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
    
      });
    
    
    
    


    • Edited by Kevin Mcc Wednesday, March 23, 2011 5:12 PM formatting
    Monday, March 21, 2011 7:51 PM
  • 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.
    Wednesday, March 30, 2011 4:17 PM
  • 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/
    Monday, April 4, 2011 12:04 AM
  • Here is an example of get coordinates from mouseclick on bingmaps ajax7

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


    • Edited by gissc Thursday, April 5, 2012 1:47 PM
    Wednesday, April 4, 2012 7:25 PM