Show / Hide Route on Map

2 posts / 0 new
Last post
pinkdigital
Show / Hide Route on Map

I have a map that has multiple routes on it. Is there a way that I can show / hide one or other of the routes so that the other route is visible more clearly.

 


MQBrianCoakley
Here is a quick and dirty way

Here is a quick and dirty way I did it. It might be better to use a FeatureCollection but I haven't done it that way yet.

 

<!DOCTYPE html>

<html>

<head>

<title>MapQuest.js multiple routes on map</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.2.0/mapquest.js"></script>

<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.2.0/mapquest.css"/>

<script type="text/javascript">

"use strict";

var L, MQ, map, directions, routes = new Array();

function init() {

L.mapquest.key = "KEY";

map = L.mapquest.map("map", {

layers: L.mapquest.tileLayer("map"),

center: [ 40.731701, -73.993411 ],

zoom: 12

});

map.addControl(L.mapquest.control());

directions = L.mapquest.directions();

directions.route({

start: "Denver, CO",

end: "Golden, CO"

}, putrouteonmap);

directions.route({

start: "Aurora, CO",

end: "Parker, CO"

}, putrouteonmap);

function putrouteonmap(err, data){

routes.push(L.mapquest.directionsLayer({

directionsResponse: data,

}).addTo(map));

};

}

</script>

<style>

#map {

width: 800px;

height: 600px;

}

</style>

</head>

<body onload='init();'>

<div id="map"></div>

<button onclick="map.removeLayer(routes[0]);">remove</button>

</body>

</html>