How to bind click event on plotted route

Amit Bangar 1

Hi,

We have used Bing map direction manager to plot the routes. We are plotting multiple routes. When we plot multiple route then we want to perform some task when user clicks on any particular route but we did not found any event to identify which route user clicks.

Is there any way to identify which route in clicked.

Waiting for the response.

Thanks

AshokPeddakotla-MSFT 27,571 Reputation points

2022-11-21T15:55:51.433+00:00

@Amit Bangar Wanted to follow up with you to understand whether the below information helped. Please let us know if there are any other queries.
If below suggestions answers your query, do click Accept Answer and Up-Vote for the same. And, if you have any further queries do let us know.
AshokPeddakotla-MSFT 27,571 Reputation points

2022-12-06T14:40:32.27+00:00

@Amit Bangar Did you get a chance to see below suggestions? If the suggestions answers your query, do click Accept Answer and Up-Vote for the same.

1 answer

rbrundritt 15,311 Microsoft Employee

The directions manager doesn't expose any way to add a click event to route polylines, so if you followed this sample https://samples.bingmapsportal.com/?sample=display-multiple-routes you would not be able to add any click events.

What you can do is instead call the Route REST service directly, parse the response and create polylines entities for each route path, then you can add click events to either the individual polylines or to a layer the contains all your route polylines and add some metadata/properties to your polylines so you can identify which line represents which route when clicked. Here is a modified version of that above sample that uses the REST services and adds click events to each route path:

   <!DOCTYPE html>  
   <html lang="en">  
   <head>  
       <title>Display Multiple Routes - Bing Maps Samples</title>  
     
       <meta charset="utf-8" />  
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />  
         
   	<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=<Your_Bing_Maps_Key>'></script>  
       <script>  
       var map, infobox, sessionKey;  
   	  
   	var routeUrl = 'https://dev.virtualearth.net/REST/V1/Routes/Driving?o=json&wp.0={start}&wp.1={end}&key={BingMapsKey}&routeAttributes=routePath';  
     
       function GetMap()  
       {  
           map = new Microsoft.Maps.Map('#myMap', {  
               center: new Microsoft.Maps.Location(47.7, -122.14),  
               zoom: 10  
           });  
   		  
   		//Create an infobox at the center of the map but don't show it.  
           infobox = new Microsoft.Maps.Infobox( map.getCenter(), {  
               visible: false  
           });  
     
           //Assign the infobox to a map instance.  
           infobox.setMap(map);  
   		  
   		//Get a session key from the map and use with the REST services to make requests non-billable transactions.  
           map.getCredentials((c) => {  
               sessionKey = c;  
   			  
   			//Generate some routes.  
               getRoute('Seattle, WA', 'Bellevue, WA', 'red', 1);  
               getRoute('Kirkland, WA', 'Bothell , WA', 'blue', 2);  
               getRoute('Woodinville, WA', 'Duval, WA', 'green', 3);  
               getRoute('Redmond, WA', 'Sammamish, WA', 'orange', 4);  
           });  
       }  
     
       function getRoute(start, end, color, id) {  
   		var requestUrl = routeUrl.replace('{start}', encodeURIComponent(start)).replace('{end}', encodeURIComponent(end)).replace('{BingMapsKey}', sessionKey);  
   		fetch(requestUrl). then(r => r.json()).then(r => {  
   			 if (r &&  
   				r.resourceSets &&  
   				r.resourceSets.length > 0 &&  
   				r.resourceSets[0].resources &&   
   				r.resourceSets[0].resources.length > 0) {	  
     
   					var route = r.resourceSets[0].resources[0];			  
   					  
   					var coords = [];  
   					  
   					route.routePath.line.coordinates.forEach(c => {  
   						coords.push(new Microsoft.Maps.Location(c[0], c[1]));  
   					});  
   					  
   					var routePath =  new Microsoft.Maps.Polyline(coords, {  
   						strokeColor: color,  
   						strokeThickness: 5  
   					});  
   							  
   					//Capture 							  
   					routePath.metadata = {  
   						id: id,  
   						start: start,  
   						end: end  
   					};  
   					  
   					map.entities.push(routePath);  
     
   					Microsoft.Maps.Events.addHandler(routePath, 'click', routeClicked);  
   				}		  
   			});  
   		}  
   	  
   		function routeClicked(e) {  
   			//Make sure the infobox has metadata to display.  
   			if (e.target.metadata) {  
   				var m = e.target.metadata;  
   				  
   				//Set the infobox options with the metadata of the pushpin.  
   				infobox.setOptions({  
   					//Use the location of where the mouse was clicked to position the infobox.  
   					location: e.location,  
   					title: 'Route clicked',  
   					description: `ID: ${m.id}<br/>Start: ${m.start}<br/>End: ${m.end}`,  
   					visible: true  
   				});  
   			}  
   		}  
       </script>      
   </head>  
   <body onload="GetMap()">  
       <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>  
   </body>  
   </html>