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

Wrld.js is an SDK built on the Leaflet API that can be used for embedding interactive, 3D, indoor and outdoor maps in a web page.

This guide will walk you through the process of using wrld.js to build a 3D airport experience for LAX, including searching, point-of-interest markers, and indoor routing.

To follow this guide, you'll only need to be familiar with basic JavaScript, HTML, and CSS. You can see the end result in the following CodePen: https://codepen.io/Pirh/pen/boqzoE. You can either fork this, or create a new pen to follow along.

Displaying a 3D Map

The first thing you'll need to do on your HTML page is include wrld.js and the UI components we'll be using, as well as some dependencies: JQuery and JQuery UI.

The first argument to L.Wrld.map is the id of the HTML element to render the map in. The second argument is your WRLD API key, which you can get for free by signing up at wrld3d.com. The final argument defines the latitude, longitude, and zoom level to use, along with a flag to specify that we want indoor maps as well as outdoor maps.

If you run what you have so far, you should see a view of the LAX Tom Bradley terminal with a blue door marker on top of it, as seen below and in this CodePen: https://codepen.io/Pirh/pen/gGRWQN

Your users can view the entirety of the airport, but it's still a little lacking in information. It would be useful if a user could search for information on the map. This can be accomplished by adding a Search Bar.

Adding a Search Bar

As before, the code for this is simple, but it does require a little more configuration:

The searchCategories array defines the options that show up under "Find" when the search bar's menu is opened. You should now be able to search for something ("coffee", for example) and see some Yelp search results listing coffee places near the airport: https://codepen.io/Pirh/pen/PJjmVM

Note that in the above code, the search bar is passed in as an option. This automatically sets up the events to display search results on the map. (You can however use the Marker Controller without the search bar and create markers yourself.)

This article was published as a part of ProgrammableWeb's Sponsored Content Program. The opinions expressed here are those of the underwriter and do not necessarily reflect the views of ProgrammableWeb or its editorial staff. For more information, please consult our FAQ.