Interactive Routes
By default, routes are static. If you would like to your users to interact with the routes by moving the location of stop or dragging the routes, you just need to set theisDraggable property of the routing layer in the constructor to true.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Add two draggable routes.
// Mouse over a route or a stop, then drag the mouse to add a new stop or changing a stop location.
// Turn on or off route dragging by calling setDraggable method.
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map',
style: TrimbleMaps.Common.Style.TRANSPORTATION,
center: new TrimbleMaps.LngLat(-74.566234, 40.49944),
zoom: 8
});
const myRoute = new TrimbleMaps.Route({
routeId: 'myRoute',
isDraggable: true,
stops: [
new TrimbleMaps.LngLat(-74.566234, 40.49944),
new TrimbleMaps.LngLat(-74.629749, 40.26118)
]
});
const myRoute2 = new TrimbleMaps.Route({
routeId: 'myRoute2',
isDraggable: true,
routeColor: '#576571',
stops: [
new TrimbleMaps.LngLat(-74.762360, 40.389078),
new TrimbleMaps.LngLat(-74.358442, 40.297086)
]
});
map.on('load', function() {
myRoute.addTo(map);
myRoute2.addTo(map);
// myRoute2.setDraggable(false);
});
</script>
</body>
</html>
Interactive Routes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Add two draggable routes.
// Mouse over a route or a stop, then drag the mouse to add a new stop or changing a stop location.
// Turn on or off route dragging by calling setDraggable method.
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map',
style: TrimbleMaps.Common.Style.TRANSPORTATION,
center: new TrimbleMaps.LngLat(-74.566234, 40.49944),
zoom: 8
});
const myRoute = new TrimbleMaps.Route({
routeId: 'myRoute',
isDraggable: true,
stops: [
new TrimbleMaps.LngLat(-74.566234, 40.49944),
new TrimbleMaps.LngLat(-74.629749, 40.26118)
]
});
const myRoute2 = new TrimbleMaps.Route({
routeId: 'myRoute2',
isDraggable: true,
routeColor: '#576571',
stops: [
new TrimbleMaps.LngLat(-74.762360, 40.389078),
new TrimbleMaps.LngLat(-74.358442, 40.297086)
]
});
map.on('load', function() {
myRoute.addTo(map);
myRoute2.addTo(map);
// myRoute2.setDraggable(false);
});
</script>
</body>
</html>