Route Styling
When a routing layer is constructed, the default route color, origin, destination, and stop icons will be used whenrouteColor
, originIcon
, destinationIcon
, stopIcon
route options are not provided. To change these default route properties, either supply custom a color and icons when constructing a layer or use the update
function after a layer is created.
Requires Trimble Maps v3.1.0 or later.
<!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> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> // Create a route with custom color, origin icon, destination icon, and stop icon. // Update a route with custom color and icons after a layer is created. 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 routeOptions = { routeId: 'myRoute', stops: [ new TrimbleMaps.LngLat(-74.566234, 40.49944), new TrimbleMaps.LngLat(-74.528512, 40.386680), new TrimbleMaps.LngLat(-74.629749, 40.26118) ], routeColor: '#888888', // optional routeColor originIcon: { // optional origin Icon size: 1, url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png', offset: [0, -6] }, stopIcon: { // optional stop icon size: 1, url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png', offset: [0, -6] } }; const myRoute = new TrimbleMaps.Route(routeOptions); map.on('load', function() { myRoute.addTo(map); setTimeout(function() { routeOptions.routeColor = '#00ff00'; // update route color routeOptions.destinationIcon = { // update destination icon size: 1, url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png', offset: [0, -6] }; myRoute.update(routeOptions); }, 8000); }); </script> </body> </html>
Route Styling
<!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> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> // Create a route with custom color, origin icon, destination icon, and stop icon. // Update a route with custom color and icons after a layer is created. 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 routeOptions = { routeId: 'myRoute', stops: [ new TrimbleMaps.LngLat(-74.566234, 40.49944), new TrimbleMaps.LngLat(-74.528512, 40.386680), new TrimbleMaps.LngLat(-74.629749, 40.26118) ], routeColor: '#888888', // optional routeColor originIcon: { // optional origin Icon size: 1, url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png', offset: [0, -6] }, stopIcon: { // optional stop icon size: 1, url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png', offset: [0, -6] } }; const myRoute = new TrimbleMaps.Route(routeOptions); map.on('load', function() { myRoute.addTo(map); setTimeout(function() { routeOptions.routeColor = '#00ff00'; // update route color routeOptions.destinationIcon = { // update destination icon size: 1, url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png', offset: [0, -6] }; myRoute.update(routeOptions); }, 8000); }); </script> </body> </html>