Dispaying an indoor route and directions
Using the WrldNavigation
widget to find an indoor route, display the directions and display that route 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://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/indoor_control/v1/latest/indoor_control.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/navigation/v1/latest/navigation.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/routeview/v1/latest/routeview.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 id="indoor-control-widget-container" style="position: absolute; top: 120px; right: 20px; bottom: 30px;"></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="findRoute()">Find Route</button>
<button onclick="clearRoute()">Clear Route</button>
</div>
<script>
var apiKey = "your_api_key_here";
var map = Wrld.map("map", apiKey, {
center: [56.459844, -2.978236],
zoom: 18,
indoorsEnabled: true
});
var indoorControl = new WrldIndoorControl("indoor-control-widget-container", map);
var navigation = new WrldNavigation("navigation-widget-container", map, apiKey);
var routeView = new WrldRouteView(map, {
polyline: {
weight: 10
}
});
var startLocation = WrldNavigation.buildLocation("Car Park", 56.460716, -2.979616);
var endLocation = WrldNavigation.buildLocation("Desk", 56.459834, -2.978244, "westport_house", 2);
function clearRoute() {
navigation.clearLocations();
navigation.clearDirections();
routeView.clearDirections();
}
function findRoute() {
navigation.setStartLocation(startLocation);
navigation.setEndLocation(endLocation);
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);
routeView.setDirections(result.directions);
navigation.setRouteDuration(result.route.routeDuration);
}
}
function openNavWidget() {
navigation.openControl();
}
function closeNavWidget() {
navigation.closeControl();
}
</script>
</div>
</body>
</html>