WRLD offers a 3D map API, wrld.js, that can use multiple data sources to create maps with rich visualizations. wrld.js uses Leaflet - an open source JavaScript library used in creating interactive mapping applications.

While Leaflet provides all basic map components, such as zoom and pan controls, markers, and popups, its brilliance lies in its compatibility with a host of mapping providers. This means that for users, the only requirement for the code is to ensure compatibility with Leaflet. As Leaflet integrates seamlessly with several vendor APIs, the client code, by being compatible with Leaflet, becomes automatically ready to work with any vendor of mapping solutions.

At WRLD, Leaflet is used extensively because it functions as a common interface for creating map experiences.

In most organizations, the API is used in conjunction with 2D map providers. Such an integration only uses exterior mapping data and results in the usual slippy map experiences.

However, at WRLD, we focus on 3D mapping that encompasses both the interior and exterior for a more realistic and intuitive user experience. wrld.js, our custom-built JavaScript API, is a simple way for developers to create stunning 3D maps.

Here are three pointers to help you get started with Leaflet and wrld.js:

1. Latitude and Longitude Carry Over from 2D

The good news is latitude and longitude functionalities work the same way in 3D as in 2D. wrld.js uses the same standard WGS84 latitude and longitude observed in the majority of mapping systems. This makes it easier to translate 2D information to 3D without a steep learning curve.

By adding a Leaflet marker at a latitude and longitude position, wrld.js will automatically position your marker at ground level.

2. Introducing the Third Dimension: Altitude

In 2D land, latitude and longitude give the position of your object at a point on the globe. To move into 3D, we need to introduce a third coordinate to vertically position your object above (or below) the ground.

Here’s a diagram to visualize this:

There are two common ways to specify this:

• Altitude (height above sea level)
• Elevation (height above the ground)

By default, wrld.js uses elevation in meters to specify the vertical height of positions. So, an elevation set to 100 implies “100 meters above ground at the given latitude and longitude.” Optionally, the elevation mode can be set to specify an altitude above sea level.

Here’s an example that demonstrates how to place a Leaflet marker with elevation using wrld.js.

3. But, What About Indoors?

The next challenge is to understand how to specify points inside a building.

wrld.js provides both indoor and outdoor capabilities. The functionality for indoors extends naturally from 3D points outdoors, with just a few tweaks. Although latitude and longitude work exactly the same way as points outdoors, the vertical component (height) works in a slightly different manner.

Here, it makes sense to specify the indoor point’s vertical component (height)—its relation to its height from the floor. In addition to the relative height of the point, the exact building and the specific floor (story) of the building also need to be specified.

In summary, we need to specify the following parameters for an indoor point:

• Lat/lon: Location of the point on the globe.
• IndoorMapId: ID of the indoor map that the point lies within.
• IndoorFloorId: ID of the building floor (story) the point lies on.
• Elevation: Height, in meters, of the point above floor level in the given building floor.

Here’s a code sample that takes you in detail through the steps in creating an indoor marker.

Getting Started With WRLD and Leaflet

One of the incredible aspects of wrld.js is that it’s an open source option, like other Leaflet components. The source code is available on GitHub for you to add your own extensions. To share your work with others, please do send us a pull request and we will be happy to assist.

WRLD offers code samples and detailed instructions on each feature to help you get started with wrld.js. For detailed API documentation, check this API reference.

If you have any questions about this or anything else, get in touch with our excellent support team.