How do I remove routes from a Bing Map if not check boxed by user

How do I remove routes from a Bing Map if not check boxed by user
0.0 0

#1

I have created routes on a Bing Map and details about the routes appear on the screen if the user marks the check box next to the route name. Currently all the routes appear on the map. I want only the routes that have been check boxed by the user to appear so the details of the routes and the map match. How do I tell the route function to hide routes not check boxed by the user?

Creating the routes on a map:

  function getRoute(Stop0, Stop1, Stop2,Stop3,Stop4,Stop5,Stop6,Stop7,Stop8,Stop9,Stop10,Stop11,Stop12,Stop13,Stop14,Stop15,color,RouteName) {
        var dm = new Microsoft.Maps.Directions.DirectionsManager(map);
        directionsManagers.push(dm);
        dm.setRequestOptions({
            routeMode: Microsoft.Maps.Directions.RouteMode.driving
        });
        dm.setRenderOptions({
            autoUpdateMapView: true,
            drivingPolylineOptions: {
                strokeColor: color,
                strokeThickness: 3
            }
        });

Displaying the route details:

document.getElementById('action').addEventListener('click', _ => {
  Microsoft.Maps.loadModule('Microsoft.Maps.Directions', _ => {
    console.clear()
	for (routeValue in routes) {
      // routeValue is not in selectedRoutes, ie route not selected by user
      if (!selectedRoutes.includes(routeValue)) continue; 
	let myStr = routes[routeValue].concat(routeValue);
	console.log((""+myStr).replace(/,,/g,""));
      // add the original route name back in params
      const params = routes[routeValue].concat(routeValue); 
      // actually call getRoute
      getRoute.apply(this, params);
    }	  
  });
});

Creating check boxes:

for (routeValue in routes) {
  const label = document.createElement('label');
  const input = document.createElement('input');
  const text = document.createTextNode(routeValue);
  input.type = 'checkbox';
  input.value = routeValue;
  input.addEventListener('click', e => {
    if (e.target.checked) {
      selectedRoutes.push(e.target.value);
    } else {
      selectedRoutes.splice(selectedRoutes.indexOf(e.target.value), 1);
    }
  });
  label.appendChild(input);
  label.appendChild(text);
  content.appendChild(label);
};

#2

Ok, first, you have way to many parameters for your route function. I can’t imagine having to pass 15 routes, a color, and a route name every time I want to call the function. I’d suggest storing those values in an array and sending that in.

Then it’d be easy to programmatically add or remove stops on your map.

I have no idea what this returns, so can’t figure out the logic.

Without any more info, I’d say try to store the state of the checkbox somewhere. And then only render to the screen the ones that are checked.

To be more helpful I’d need to know what that module returns, and what state shape you have.