How to bind click event on plotted route

Amit Bangar 1 Reputation point
2022-11-08T11:34:45.68+00:00

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

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
661 questions
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 16,466 Reputation points Microsoft Employee
    2022-11-08T18:25:48.457+00:00

    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>  
    
    1 person found this answer helpful.
    0 comments No comments