Finding a route with WrldNavigation and displaying directions
Using the WrldNavigation
widget to find and display the directions for a route between two locations. To display the route on the map see this example using the WrldRouteView
Widget
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/wrld.js@1.x.x"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
<link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/v1/latest/css/wrld.css" rel="stylesheet"/>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/navigation/v1/latest/navigation.js"></script>
</head>
<body>
<div style="position: relative">
<div id="map" style="height: 500px">
<div id="navigation-widget-container" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: hidden;"></div>
</div>
<div style="position: absolute; top: 0; right: 0; display: flex; flex-direction: column; z-index: 20;">
<button onclick="openNavWidget()">Open</button>
<button onclick="closeNavWidget()">Close</button>
<button onclick="resetNavWidget()">Reset</button>
<select id="locations">
<option value="" disabled selected >Locations</option>
<option value="west_ward_works">West Ward Works</option>
<option value="abertay">Abertay</option>
<option value="westport_house">Westport House</option>
</select>
<button onclick="setStartLocation()">Set Start Location</button>
<button onclick="setEndLocation()">Set End Location</button>
<button onclick="clearLocations()">Clear Locations</button>
<button onclick="findRoute()">Find Route</button>
<button onclick="clearDirections()">Clear Directions</button>
</div>
<script>
var apiKey = "your_api_key_here";
var map = Wrld.map("map", apiKey, {
center: [56.461762, -2.975963],
zoom: 16
});
var locations = {
abertay: WrldNavigation.buildLocation("Abertay", 56.463008, -2.974135),
westport_house: WrldNavigation.buildLocation("Westport House", 56.4600344, -2.9783117, "westport_house", 2),
west_ward_works: WrldNavigation.buildLocation("West Ward Works", 56.4612316, -2.9831228)
}
var startLocation = {};
var endLocation = {};
var navigation = new WrldNavigation("navigation-widget-container", map, apiKey);
navigation.on("swapjourneylocations", (event) => { console.log(event);onNavWidgetSwapJourneyLocations(); });
function clearDirections() {
navigation.clearDirections();
}
function clearLocations() {
startLocation = {};
endLocation = {};
navigation.clearLocations();
}
function findRoute() {
navigation.findRoute(startLocation, endLocation, findRouteCallback);
}
function findRouteCallback(result) {
if (result.route) {
navigation.buildDirectionsForRoute(result.route, buildDirectionsCallback);
}
}
function buildDirectionsCallback(result) {
if (result.directions) {
navigation.setDirections(result.directions);
navigation.setRouteDuration(result.route.routeDuration);
}
}
function setStartLocation() {
var locationId = document.getElementById("locations").value;
startLocation = locations[locationId] || {};
navigation.setStartLocation(startLocation);
}
function setEndLocation() {
var locationId = document.getElementById("locations").value;
endLocation = locations[locationId] || {};
navigation.setEndLocation(endLocation);
}
function onNavWidgetSwapJourneyLocations() {
const tmp = startLocation;
startLocation = endLocation;
endLocation = tmp;
}
function openNavWidget() {
navigation.openControl();
}
function closeNavWidget() {
navigation.closeControl();
}
function resetNavWidget() {
navigation.resetControl();
}
</script>
</div>
</body>
</html>