jeudi 7 juin 2018

Only routes checked should appear on Bing Map

I have five check boxes that appear on the page:

> const content = document.getElementById('content');
const routes = {
  'ATL6101': ['4200 N COMMERCE DR,30344-5707','822 RALPH MCGILL BLVD NE,30306','','','','','','','','','','','','','','','Purple'],
  'ATL6102': ['4200 N COMMERCE DR,30344-5707','4575 WEBB BRIDGE RD,30005','','','','','','','','','','','','','','','Lime'],
  'ATL6103': ['4200 N COMMERCE DR,30344-5707','520 W PONCE DE LEON AVE,30030','','','','','','','','','','','','','','','Maroon'],
  'ATL6104': ['4200 N COMMERCE DR,30344-5707','575 OLYMPIC DR,30601','','','','','','','','','','','','','','','Navy'],
  'ATL6105': ['4200 N COMMERCE DR,30344-5707','3470 MCCLURE BRIDGE RD,30096','','','','','','','','','','','','','','','Yellow'],
};
let selectedRoutes = [];

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

And I have a Bing Map that has all the routes:

function GetMap()
{
    map = new Microsoft.Maps.Map('#myMap', {
       // center: new Microsoft.Maps.Location(47.7, -122.14),
        zoom: 7
    });
    //Load the directions module.
    Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
        //Generate some routes.
            getRoute('4200 N COMMERCE DR,30344-5707','822 RALPH MCGILL BLVD NE,30306','','','','','','','','','','','','','','','Pink','ATL6101');
            getRoute('4200 N COMMERCE DR,30344-5707','4575 WEBB BRIDGE RD,30005','','','','','','','','','','','','','','','Lime','ATL6102');
            getRoute('4200 N COMMERCE DR,30344-5707','520 W PONCE DE LEON AVE,30030','','','','','','','','','','','','','','','Red','ATL6103');
            getRoute('4200 N COMMERCE DR,30344-5707','575 OLYMPIC DR,30601','','','','','','','','','','','','','','','Navy','ATL6104');
            getRoute('4200 N COMMERCE DR,30344-5707','3470 MCCLURE BRIDGE RD,30096','','','','','','','','','','','','','','','Yellow','ATL6105');

    });
}

Information based on what the user has checked appears below the map but all the routes are on the map all the time. I need to have the route hidden if the user did not check the box next to the route name. How do I add to the GetMap function code that says if the route is not checked by the user don't appear?




Aucun commentaire:

Enregistrer un commentaire