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.

<script src="https://cdn-webgl.wrld3d.com/wrldjs/api/v0.1.1366/wrld.js"></script>
<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/v119/indoor_control.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/searchbar/v119/searchbar.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/marker_controller/v119/marker_controller.js"></script>

You'll also need to include the CSS for Leaflet and wrld.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" />
<link rel="stylesheet" href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/v119/css/wrld.css" />

Note that if you're using CodePen or JSFiddle, you can include these sources by pasting the URLs for them in the configuration. Otherwise, include them in the <head> tag of the page.

You'll need a small amount of HTML on the page to contain the map, and the later UI components. These can go in divs as shown below:

<div id="overlay" class="wrld-widget-container"></div>
<div id="map"></div>

You'll also need some CSS to give the map some height and make it visible:

html, body, #map
{
 height: 100%; margin: 0;
}

Finally, you’ll need some JavaScript to create the map itself:

var wrldApiKey = "YOUR_API_KEY_HERE";
var laxLocation = L.latLng([33.943398, -118.409541]);

// Create the map
var map = L.Wrld.map(
 "map",
 wrldApiKey,
 {
   center: laxLocation,
   zoom: 17,
   indoorsEnabled: true
 }
);

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

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


A 3D map of the LAX terminal

If you click this marker, you'll be able to see its indoor map.

You'll notice that you can only see the bottom floor of the building, which doesn't appear to be very interesting. Next, you'll add a UI control to allow you to view the upper floors.

Adding an Indoor Control

Adding the Indoor Control is simple:

// Add a control to change between indoor map floors
var indoorControl = new WrldIndoorControl("overlay", map);

Similarly to the map's constructor, "overlay" is the id of the HTML element for the indoor control to render in.

Next, you'll have to add some CSS to move the slider to the right of the map.

.eegeo-indoor-control { float: right }

When you enter the indoor map, you should now see a slider control on the right which you can click and drag to change floors: https://codepen.io/Pirh/pen/JrJNwv

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


Using the indoor elevator control

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:

// Add a search bar with the following menu items
var searchCategories = [
 { name: "General", searchTag: "general", iconKey: "general" },
 { name: "Check In", searchTag: "check_in", iconKey: "ticket" },
 { name: "Gates", searchTag: "gate", iconKey: "airport" },
 { name: "Coffee", searchTag: "coffee", iconKey: "coffee" },
 { name: "Food & Drink", searchTag: "food_drink", iconKey: "food_drink" },
 { name: "Shopping", searchTag: "shopping", iconKey: "shopping" }
];

var searchbar = new WrldSearchbar("overlay", map, {
 apiKey: wrldApiKey,
 outdoorSearchMenuItems: searchCategories,
 indoorSearchMenuItems: searchCategories
});

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

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


Navigating 3D Maps with the search bar

However, the search results aren't visible on the map itself, and search results aren't showing up when inside the airport.

Adding the Marker Controller

To solve search result visibility, you can add the Marker Controller:

// Add a marker controller to draw styled markers on the map
var markerController = new WrldMarkerController(map, { searchbar: searchbar });

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.)

Paul Harris
 

Comments (0)