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.
Mon, 11/04/2019 - 07:17
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.
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>