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);
};