You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
4.4 KiB
161 lines
4.4 KiB
|
|
function calculateRouteFromAtoB(platform) {
|
|
var router = platform.getRoutingService(),
|
|
routeRequestParams = {
|
|
mode: 'fastest;car',
|
|
representation: 'display',
|
|
routeattributes: 'waypoints,summary,shape,legs',
|
|
maneuverattributes: 'direction,action',
|
|
waypoint0: '52.5160,13.3779', // Brandenburg Gate
|
|
waypoint1: '52.5206,13.3862' // Friedrichstraße Railway Station
|
|
};
|
|
|
|
|
|
router.calculateRoute(
|
|
routeRequestParams,
|
|
onSuccess,
|
|
onError
|
|
);
|
|
}
|
|
|
|
function onSuccess(result) {
|
|
var route = result.response.route[0];
|
|
|
|
addRouteShapeToMap(route);
|
|
addManueversToMap(route);
|
|
|
|
// ... etc.
|
|
}
|
|
|
|
function onError(error) {
|
|
alert('Can\'t reach the remote server');
|
|
}
|
|
|
|
|
|
// set up containers for the map + panel
|
|
var mapContainer = document.getElementById('map');
|
|
|
|
//Step 1: initialize communication with the platform
|
|
// In your own code, replace variable window.apikey with your own apikey
|
|
var platform = new H.service.Platform({
|
|
'apikey': 'ElOm77yzgasZvSGlnpiqwE-D5sbtTwgMYzSFiBV-6pc'
|
|
});
|
|
|
|
var defaultLayers = platform.createDefaultLayers();
|
|
|
|
//Step 2: initialize a map - this map is centered over Berlin
|
|
var map = new H.Map(mapContainer,
|
|
defaultLayers.vector.normal.map, {
|
|
center: { lat: 52.5206, lng: 13.3862 },
|
|
zoom: 13,
|
|
pixelRatio: window.devicePixelRatio || 1
|
|
});
|
|
// add a resize listener to make sure that the map occupies the whole container
|
|
window.addEventListener('resize', () => map.getViewPort().resize());
|
|
|
|
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
|
|
|
|
// Create the default UI components
|
|
var ui = H.ui.UI.createDefault(map, defaultLayers);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Creates a H.map.Polyline from the shape of the route and adds it to the map.
|
|
* @param {Object} route A route as received from the H.service.RoutingService
|
|
*/
|
|
function addRouteShapeToMap(route) {
|
|
var lineString = new H.geo.LineString(),
|
|
routeShape = route.shape,
|
|
polyline;
|
|
|
|
routeShape.forEach(function (point) {
|
|
var parts = point.split(',');
|
|
lineString.pushLatLngAlt(parts[0], parts[1]);
|
|
});
|
|
|
|
polyline = new H.map.Polyline(lineString, {
|
|
style: {
|
|
lineWidth: 4,
|
|
strokeColor: '#0baf9a'
|
|
}
|
|
});
|
|
// Add the polyline to the map
|
|
map.addObject(polyline);
|
|
// And zoom to its bounding rectangle
|
|
map.getViewModel().setLookAtData({
|
|
bounds: polyline.getBoundingBox()
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Creates a series of H.map.Marker points from the route and adds them to the map.
|
|
* @param {Object} route A route as received from the H.service.RoutingService
|
|
*/
|
|
function addManueversToMap(route) {
|
|
var svgMarkup = '<svg width="18" height="18" ' +
|
|
'xmlns="http://www.w3.org/2000/svg">' +
|
|
'<circle cx="8" cy="8" r="8" ' +
|
|
'fill="#0baf9a" stroke="white" stroke-width="1" />' +
|
|
'</svg>',
|
|
dotIcon = new H.map.Icon(svgMarkup, { anchor: { x: 8, y: 8 } }),
|
|
group = new H.map.Group(),
|
|
i,
|
|
j;
|
|
|
|
// Add a marker for each maneuver
|
|
for (i = 0; i < route.leg.length; i += 1) {
|
|
for (j = 0; j < route.leg[i].maneuver.length; j += 1) {
|
|
// Get the next maneuver.
|
|
maneuver = route.leg[i].maneuver[j];
|
|
// Add a marker to the maneuvers group
|
|
var marker = new H.map.Marker({
|
|
lat: maneuver.position.latitude,
|
|
lng: maneuver.position.longitude
|
|
},
|
|
{ icon: dotIcon });
|
|
marker.instruction = maneuver.instruction;
|
|
group.addObject(marker);
|
|
}
|
|
}
|
|
|
|
|
|
// Add the maneuvers group to the map
|
|
map.addObject(group);
|
|
}
|
|
|
|
|
|
/**
|
|
* Creates a series of H.map.Marker points from the route and adds them to the map.
|
|
* @param {Object} route A route as received from the H.service.RoutingService
|
|
*/
|
|
function addWaypointsToPanel(waypoints) {
|
|
|
|
|
|
|
|
var nodeH3 = document.createElement('h3'),
|
|
waypointLabels = [],
|
|
i;
|
|
|
|
|
|
for (i = 0; i < waypoints.length; i += 1) {
|
|
waypointLabels.push(waypoints[i].label)
|
|
}
|
|
|
|
nodeH3.textContent = waypointLabels.join(' - ');
|
|
|
|
}
|
|
|
|
|
|
|
|
Number.prototype.toMMSS = function () {
|
|
return Math.floor(this / 60) + ' minutes ' + (this % 60) + ' seconds.';
|
|
};
|
|
|
|
// Now use the map as required...
|
|
calculateRouteFromAtoB(platform);
|