4 Replies - 345 Views - Last Post: 31 May 2018 - 02:29 PM

#1 dmccallum   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 31-May 18

Check boxes to hide/unhide map data

Posted 31 May 2018 - 11:30 AM

I have a Bing map with multiple routes displayed and check boxes that display via console.log details about the route. I need to have the routes appear/disappear on the map based on the check boxes.

<!DOCTYPE html>
<html>
<head>
<script src="snippet-javascript-console.min.js?v=1"></script>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map, directionsManagers = [];
    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','','','','','','','','','','','','','','','Purple','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','','','','','','','','','','','','','','','Maroon','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');

        });
    }
    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: false,
            drivingPolylineOptions: {
                strokeColor: color,
                strokeThickness: 3
            }
        });
        dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop0 }));
        dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop1 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop2 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop3 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop4 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop5 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop6 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop7 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop8 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop9 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop10 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop11 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop12 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop13 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop14 }));
		dm.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: Stop15 }));
        dm.calculateDirections();
    }
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=ArJkybJp6LvcJs7su6sKIQMBnwYngXlhGIjE5aWRApleSq6DkWzGNm5j80Lb-WZt' async defer></script>
    <script src="snippet-javascript-console.min.js?v=1"></script>
	</head>
<body>
    <div id="myMap" style="position:top;width:1400px;height:600px;"></div>
 <div id="content"></div>
    <div id="content"></div>
<button id="action">Display route stops</button>


    <script type="text/javascript">

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

document.getElementById('action').addEventListener('click', _ => {
  Microsoft.Maps.loadModule('Microsoft.Maps.Directions', _ => {
    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);
	  
	  

    }	  
  });
})
console.clear
	
</script>


</body>
</html>


How can I make the getroute data appear/disappear based on the check boxes?

Is This A Good Question/Topic? 0
  • +

Replies To: Check boxes to hide/unhide map data

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: Check boxes to hide/unhide map data

Posted 31 May 2018 - 12:14 PM

You'll need to check their API documentation to see if there's a method you can use to toggle that. If not, one option may be to just recreate the map without the routes.
Was This Post Helpful? 0
  • +
  • -

#3 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5227
  • View blog
  • Posts: 14,010
  • Joined: 18-April 07

Re: Check boxes to hide/unhide map data

Posted 31 May 2018 - 12:28 PM

Your drivingPolylineOptions object there has a "visible" option to it. That might be what you need. It can be used to toggle the visibility of the polyline. It would be where I would experiment. :)

https://msdn.microso...y/mt712655.aspx

This post has been edited by Martyr2: 31 May 2018 - 12:28 PM

Was This Post Helpful? 0
  • +
  • -

#4 dmccallum   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 31-May 18

Re: Check boxes to hide/unhide map data

Posted 31 May 2018 - 01:07 PM

drivingPolylineOptions object will allow me to make the lines visible or invisible but not for each individual route and not based on input from the user via the check boxes.
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: Check boxes to hide/unhide map data

Posted 31 May 2018 - 02:29 PM

Why would the particular event matter as to what you're able to do? If you can write code to do anything, you can write it anywhere, including inside a checkbox event handler.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1