Build an App with Real Time Data using WRLD

Real Time Data

Google maps, Lyft, Uber, Slack and many more in the list. These are some of the major apps that work on real-time data. In today’s reactive and time-sensitive lifestyles where a delay of a few seconds can cause a big issue, these real-time apps are a big relief. Undoubtedly, Realtime has also become a basis of IoT and Big data where the as fastest the data received, it can be processed actionable. Any difference between your app failing or climbing high will come down to it’s actual functionally, reliability and speed. If you are looking to build an app with Real Time Data, then WRLD is highly recommended. So, before getting into the main essence of the article, let’s find out more about WRLD.

What is WRLD?

WRLD is a showcase that makes interacting with the world easier in 3D format from the major cities to the events occurring inside the buildings. This platform is highly used for mixed reality experiences, buildings, location-based games and more. If you use it to make an app, you can get all location-based information, such as Time of day, Traffic, weather, transit times, and parking availability.

Build an App with Real Time Data using WRLD

For building an app with real-time data, WRLD is a boon. So, in this post, we are going to shed light on building a map app with real-time using WRLD.

Create a new account of WRLD and generate a new API key

Before getting started, you need to create a new account on WRLD. After you have registered and verified your email address, you’ll have to get an API key. To get an API key, you need to log in and then click on developers & access API keys options. Now create a new API key and name it anything you want, and generate the key when requiredBuild an App with Real-Time Data using WRLD.

Building the map app approach

WRLD maps offer great benefits to various industries. It offers two great ways to expand the capabilities of the platform.

  • Building a custom app
  • Using incorporated tools like places and Map designer.

Building the Custom App

This is one of the most flexible options that need some coding efforts, but it taps into the world of potential offered by the WRLD platform. With the custom app, you can easily create your own UI, access external databases and add more fields in the real-time.

Using incorporate tools like Places designer and Map designer

Places Designer is used to creating Store Cards. This enables us to create a Collection set where all markers of a point of Interest will be held. You can access this set in the WRLD ecosystem as well as via API key externally. Moreover, this data can be passed through the custom map made using the Map designer. This tool also allows for sharing the map with others by using a generated link. The best part of this method is – it doesn’t require any coding. However, in some cases, it has some limitations as well, such as:

  • Limited UI Design that comes with Places Designer
  • Limited data set where you can’t showcase additional information other than provided.
  • Build an App with Real-Time Data using WRLD

To overcome these limitations, it is important to use the proper approach using the second method.

Building the Mapp App with WRLD

To start with, you need to create a basic app and then add functionality to it later on. Now go to your workspace directory and create a fresh folder for your project. Let’s name it- Map app.

Now open the map app folder inside your code editor and if you have VS Code, then access it by using Ctrl+ ‘ and follow the commands that are within the project directory.

VS Code

After having project structure, you can start writing code with index.html and use this code for app.js. But for that, you need a few node dependencies. As mentioned earlier, you can take benefit of modern JavaScript syntax in order to write the code. Therefore, it is important to babel to compile this modern code to a format that is compatible with maximum browsers. For that, you need to install babel dependencies and configure them through a babel file. Also, you need to make sure to install as a dev- dependencies.

dev- dependencies.

Now, copy this code directly to the .babelrc file. Moreover, you also need some packages to run a project and these are-

  • Parcel bundler, which is an easy version of web pack that comes with zero configuration.
  • JSON Server that creates a dummy API server build an App with Real-Time Data using WRLD
  • Build an App with Real-Time Data using WRLD

JSON Server

After completing this, you need to write some sort of JavaScript Code and for that, first, you need to supply WRLD API key in env.js and open it to copy this code.

Put all the codes under the window.addEventListener function. This ensures that code is well executed after the dependencies of JavaScript. Also, you will specify it later in index.html. In this function, you will also initialize the map by crossing a number of parameters.

  • Map- It is a DIV container ID specialized in index.html
  • Center- the longitude and latitude of Mall
  • Zoom- elevation
  • Keys.wrld- API key
  • IndoorsEnabled that allows users to access the indoor maps without any hassle.

Now go to your terminal and use Now just wait for a few seconds to let the project complete. When it’s finished, now access to the local build an App with Real-Time Data using WRLDlhost:1234. According to your internet speed, the map will be load without consuming much time.


Now create indoor controls

In order to enable users to get controls over different floors, you need to provide them control widget. For that, you need to update js/app.js to initiate the widget. Now place the code after the map initialization section. After you refresh the page, click on the icon of “Enter Indoors’ and start operating. Now enter the door automatically by using the js/app.js file code.

create indoor controls

Mall Map Planning

For creating store cards, you need-

  • Information on store contact and opening hours
  • Precise Latitude and Longitude coordinates of a store
  • Design template for a store card.

Store Card Information & Design

It requires description, image, phone, email, web, Twitter and opening times. To get this information, save this file from GitHub inside the data folder and save it as db.json. The design has 3 dependencies: Semantic UI CSS, jQuery and Semantic UI JS.

Highlight Parking space

WRLD is also used to highlight parking areas by using different colors. The yellow marking indicates 80% parking space, green indicates total parking space available and red indicates 100% occupied space.
In order to create a map, you need to start with using code parking.html and js/parking.js

Parking zone positioning map

positioning map

Now, copy this code for js/parking.js. Now use the parcel for this (Note: Avoid using an existing one). Then highlight parking and use rest API for parking data. Update js/parking.js with these color codes and place it after key declaration. For real-time parking zone, use the library.

Wrapping the post

You will be amazed when Building an App with Real-Time Data using WRLD. Moreover, with endless possibilities, you can create a plethora of apps using this super platform WRLD.


Please enter your comment!
Please enter your name here