How to Build a 3D Airport Experience with the Wrld.js SDK

Continued from page 1. 

Now when you search for "coffee", you should see markers on the map, indicating the location of various coffee shops: https://codepen.io/Pirh/pen/oGwWVa

See the Pen LAX Demo, Part 4 by Paul Harris (@Pirh) on CodePen.


Viewing search results on the 3D map

For the search results to appear indoors, you will have to create some indoor places first. This can be done with our tool, Places Designer. I'll leave the details of this for another post, but for now, there is a video tutorial that shows the basics.

Drawing Routes Indoors

If a user searches for a place, it's a safe bet that they want to know how to get there. To display this, you can use the wrld.js routing SDK and draw the resulting paths as Leaflet polylines.

Firstly, rather than integrating a location API, the code below draws a circle at a hard-coded location to represent where the user is currently standing:

// Indicate our current location with a circle
var laxIndoorMapId = "98a265e2-b890-4c6b-a28f-948c92e36914";
var myLocation = L.latLng([33.94274810771653, -118.40823555904284]);

L.circle(
 myLocation,
 {
   radius: 2.0,
   color: "#0000ff",
   indoorMapId: laxIndoorMapId,
   indoorMapFloorId: 1
 }
).addTo(map);

The indoorMapId is WRLD's unique ID for the LAX terminal building. You can retrieve this value using the SDK here, but once you know it, you can specify it directly. This code should draw a circle on Floor 3 (which has the index 1 in the map) of the terminal near the elevator.

Now register an event on the search bar:

// Find a route when a search result is selected
searchbar.on("searchresultselect", selectSearchResult);

function selectSearchResult(event) {
 var location = event.result.location;

 var resultCoord = location.latLng;
 var resultFloorId = location.floorIndex;

 var coordWithFloor = [resultCoord.lng, resultCoord.lat, resultFloorId];
 var myCoordWithFloor = [myLocation.lng, myLocation.lat, 1];

 map.routes.getRoute([myCoordWithFloor, coordWithFloor], displayRoute);
}

Now whenever the user clicks a search result from the search bar menu, the selectSearchResult function is called. This calls into getRoute with two points: the user's position, and the position of the search result. Note that the routing SDK accepts coordinates of the form [longitude, latitude, floorId]. When a route is found, the displayRoute function will be called, so define that function as follows:

// Add a layer group to contain our route polylines
var routeLines = L.layerGroup();
routeLines.addTo(map);

// Draw polylines representing a route
function displayRoute(routes) {
 routeLines.clearLayers();

 for (var i = 0; i < routes[0].length; ++i) {
   var step = routes[0][i];
   var polyline = L.polyline(step.points, { indoorMapId: step.indoorMapId, indoorMapFloorId: step.indoorMapFloorId });
   polyline.addTo(routeLines);
 }
}

This function is passed an array of routes, which in turn are composed of steps. A step is a path on a single floor (for example, from the entrance, to an elevator). The code above creates a polyline for each step of the route and adds it to a layerGroup on the map.

With this code, whenever a search result is clicked, you should see a route from your location to the marker on the map: https://codepen.io/Pirh/pen/boqzoE

See the Pen LAX Demo by Paul Harris (@Pirh) on CodePen.


Drawing indoor routes in WRLD

Next Steps

In under a hundred lines of JavaScript, you have now enabled your users to find their check-in desk, gate, or coffee shop, view it on a 3D map, and get directions to places indoors and outdoors.

Of course, there are many ways you could take this further. As mentioned previously, you could integrate real-time location tracking, or possibly journey planning with multiple destinations. You could use the Places Designer to add even more places, and configure the search bar menu to add different categories.

There’s no reason to stick with the LAX terminal either. The WRLD platform contains various buildings from shopping malls to university campuses. We encourage you to submit your own building using our indoor maps API.

If you want to continue building on this example, or if you're just interested in what else can be done with wrld.js, you can sign up for free here and check out the documentation and examples. WRLD is available cross-platform with SDKs to help you build on Unity, Android Java, Windows, iOS, VR and AR as well.

If you have any comments or questions about this guide, please leave them in the comments below, or open an issue on the wrld.js issue tracker on GitHub.
 

Be sure to read the next Mapping article: ProgrammableWeb's Most Interesting APIs in 2017: Mapping and Location

 

Comments (0)