Route Modifiers
The Route Modifier layer allows you to indicate on a map roads that are configured for your company as avoids or favors. Avoids are roads that your company has designated should be avoided if at all possible. Favors should be preferred over alternate routes. The add-on provides the ability to show some or all avoids and favors or to hide the layer. Requires Trimble Maps v3.1.0 or later. Learn more about the Route Modifiers add-on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.js"></script>
<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-routemodifiers-1.0.5.js"></script>
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-routemodifiers-1.0.5.css" />
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const myMap = new TrimbleMaps.Map({
container: 'map', // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-74.011934, 40.708016], // starting position
zoom: 16 // starting zoom
});
modifierOptions = {
isVisible: true,
};
const modifiers = new TrimbleMapsControl.RouteModifiers(modifierOptions);
myMap.addControl(modifiers, 'top-right');
myMap.once('load', () => {
console.log(
'AF SETS from the ControlPanel: ',
modifiers.getAFSets()
);
// Test after load
});
</script>
</body>
</html>
Route Modifiers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.js"></script>
<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-routemodifiers-1.0.5.js"></script>
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-routemodifiers-1.0.5.css" />
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const myMap = new TrimbleMaps.Map({
container: 'map', // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-74.011934, 40.708016], // starting position
zoom: 16 // starting zoom
});
modifierOptions = {
isVisible: true,
};
const modifiers = new TrimbleMapsControl.RouteModifiers(modifierOptions);
myMap.addControl(modifiers, 'top-right');
myMap.once('load', () => {
console.log(
'AF SETS from the ControlPanel: ',
modifiers.getAFSets()
);
// Test after load
});
</script>
</body>
</html>