This article was sponsored by WRLD 3D. Thank you for supporting the partners who make SitePoint possible.

The following takes place between 7:00am and 8:00am, on Christmas Eve. Events occur in real time.

For all our data-gathering capabilities, we’re still hopeless when it comes to visualising that data in the 3D we live in. We stare at 2D charts and log entries, but much of the data we pluck out of the has meaning in a 3D context. And, it can be useful to visualise this data when it is applied back into a 3D model.

This is the problem Augmented Reality seeks to solve. In contrast to the fictional environments of Virtual Reality, Augmented Reality can help us solve many real problems; by applying the data we would otherwise consume through a 2D medium to the real world around us. Mapping is the first-born amongst Augmented Reality’s children.

When WRLD approached us, to write about their platform, I was immediately taken by their platform’s graphics and performance. Yet, the more I use their platform; the more I am fascinated by the usefulness of their API and fidelity of their mapping data.

We’re going to publish a series of tutorials, which demonstrate how to use this platform to bring information into the world it applies to. Each tutorial is themed according to a popular T.V. show. As you may have guessed, this first one is about 24.

In this tutorial, we’re going to learn how to get started with the WRLD platform. We’ll follow the documentation examples to render the simplest map. Then, we’ll create a local environment for compiling our code; and start to tell a story with it.

We’ll cover these topics:

  • Rendering maps based on the name of a place
  • Moving through a map, for a sequence of events
  • Highlighting buildings and designing events at each building
  • Playing sound files with the HTML5 Audio API
  • Changing weather conditions and time of for the map

The code for this tutorial can be found on Github. It has been tested with a modern versions or Firefox, Node, and macOS.

Getting Started

The easiest way to get started is to follow the first example, in the documentation. Before we can do that, we need an account. Head over to https://www.wrld3d.com and click “Sign Up”.

WRLD home page

Once you’re logged in, click “developers” and “Access API Keys”.

WRLD access API Keys screen

Create a new API key for your application. You can call it anything, but you’ll need to copy the generated key later…

WRLD Key

We can get the code, for the first example, from the official documentation site. I’ve put it in CodePen, and replaced the coordinates with those for New York:

See the Pen Getting started with WRLD by Christopher Pitt (@assertchris) on CodePen.

WRLD.js is based on Leaflet.js, which makes it familiar to anyone who has done a bit of map-based work before. It also means the maps are -friendly and interactive.

Click and drag, with the left mouse button, to pan around the map. Click and drag, with the right mouse button, to rotate the map. Click and drag, with the middle mouse button to change the perspective angle. Scrolling the mouse wheel will affect the zoom. The map can also be controlled on touch devices.

Apart from including the Javascript SDK and stylesheet; we only needed about lines of formatted code to render a sweet map of New York! The first parameter, map, is the ID of the element into which WRLD should render the map. The second is the API key we generated. The third is a configuration object. This object contains the coordinates for the centre of the map, and an optional zoom level.

Setting up a Build Chain

CodePen is great for a quick demo; but we need something more robust and presentable. Let’s set up something simple, that will compile all our modern Javascript into a version most browsers can understand.

ParcelJS was recently announced; as a fast, zero-configuration web bundler. Let’s put that to the test. Firstly, we need to install Parcel as a global application, through NPM:

npm install -g parcel-bundler

Next, we can create a handful of files for our project. We’ll need a Javascript file, a CSS file, and an HTML entry-point file:

const Wrld = require("wrld.js")

const map = Wrld.map("map", "[your API key here]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})

This is from tutorial/.js

@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css";

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #000000;
}

This is from tutorial/app.css

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="./app.css" />
        <title>Getting started with WRLD</title>
    </head>
    <body>
        <div id="map"></div>
        <script src="http://www.sitepoint.com/./app.js"></script>
    </body>
</html>

Continue reading %The following takes place with an API called WRLD…%



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here