Reputation: 23
Good morning. I am trying to get my map to show a route based on average traffic conditions on a Monday morning at 11:00am EST. I can do this with the calculateRoute service by appending the following to the service URL:
&depart=".date('Y-m-d', strtotime('monday this week'))."T11:00:00-05
I use this to gather my turn by turn directions, but I would also like the visual route line on the map to reflect this as well. I am very new to JS so please forgive my code, I mainly used the canned demo scripts and modified them to do what I needed. Below is the code for my map. This does also use PHP in the code, but mainly for SQL data and grabbing GET data.
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': 'MY APP ID',
'app_code': 'MY APP CODE'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.normal.traffic,
{
zoom: 10,
center: { lat: 42.3314, lng: -83.0458 }
}
);
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map);
// Add event listeners:
map.addEventListener('tap', function(evt) {
// Log 'tap' and 'mouse' events:
console.log(evt.type, evt.currentPointer.type);
});
// Instantiate the default behavior, providing the mapEvents object:
var behavior = new H.mapevents.Behavior(mapEvents);
var routingParameters = {
// The routing mode:
'mode': 'fastest;truck;traffic:enabled',
'waypoint0': 'geo!<?PHP echo $_GET['shipFrom']; ?>',
// The end point of the route:
'waypoint1': 'geo!<?PHP echo $geoCode; ?>',
// To retrieve the shape of the route we choose the route
// representation mode 'display'
'representation': 'display'
};
// Define a callback function to process the routing response:
var onResult = function(result) {
var route,
routeShape,
startPoint,
endPoint,
linestring;
if(result.response.route) {
// Pick the first route from the response:
route = result.response.route[0];
// Pick the route's shape:
routeShape = route.shape;
// Create a linestring to use as a point source for the route line
linestring = new H.geo.LineString();
// Push all the points in the shape into the linestring:
routeShape.forEach(function(point) {
var parts = point.split(',');
linestring.pushLatLngAlt(parts[0], parts[1]);
});
// Retrieve the mapped positions of the requested waypoints:
startPoint = route.waypoint[0].mappedPosition;
endPoint = route.waypoint[1].mappedPosition;
// Create a polyline to display the route
routeLine = new H.map.Polyline(linestring, {
style: { lineWidth: 10 },
arrows: { fillColor: 'white', frequency: 2, width: 0.8, length: 0.7 }
});
// Create a marker for the start point:
var startMarker = new H.map.Marker({
lat: startPoint.latitude,
lng: startPoint.longitude
});
// Create a marker for the end point:
var endMarker = new H.map.Marker({
lat: endPoint.latitude,
lng: endPoint.longitude
});
// Add the route polyline and the two markers to the map:
map.addObjects([routeLine, startMarker, endMarker]);
// Set the map's viewport to make the whole route visible:
map.setViewBounds(routeLine.getBounds());
}
};
// Get an instance of the routing service:
var router = platform.getRoutingService();
// Call calculateRoute() with the routing parameters,
// the callback and an error callback function (called if a
// communication error occurs):
router.calculateRoute(routingParameters, onResult,
function(error) {
alert(error.message);
});
</script>
Upvotes: 0
Views: 135
Reputation: 1044
You could just add the departure parameter in the routingParameters used in the above shared javascript code
var routingParameters = {
// The routing mode:
'mode': 'fastest;truck;traffic:enabled',
'waypoint0': 'geo!<?PHP echo $_GET['shipFrom']; ?>',
// The end point of the route:
'waypoint1': 'geo!<?PHP echo $geoCode; ?>',
// To retrieve the shape of the route we choose the route
// representation mode 'display'
'representation': 'display',
//departure time
'departure' : '2018-10-22T11:00:00-05'
};
Upvotes: 1