Build a Dynamic 3D Map with WRLD 3D

Use WRLD 3D API and map data to create dynamic and outstanding visual effects 3D maps to enhance data visualization and narrative capabilities. This tutorial series will guide you through simple steps on popular TV series themes to learn how to set up and operate 3D maps on the WRLD platform.

Use the HTML5 audio API to add audio elements to enhance the immersive experience of 3D map narrative. Implement interactive story elements with JavaScript, move to different coordinate points on the map, accompanied by corresponding audio and visual cues. Customize your 3D map with real-time weather changes and different time settings to reflect the time lapse in different scenes or stories. Explore advanced features such as building highlighting and pop-up information cards to provide additional context and interactivity in your 3D map environment.

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

The following happens between 7:00 and 8:00 am on Christmas Eve. The event occurs in real time.

Despite our strong data collection capabilities, there is nothing we can do when it comes to visualizing data in the three-dimensional world we live in. We stare at 2D charts and log entries, but the large amount of data we extract from the world makes sense in a three-dimensional environment. Moreover, it is very useful to visualize these data when applied back to a three-dimensional model.

This is the problem that augmented reality strives to solve. Compared to the fictitious environment of virtual reality, augmented reality can help us solve many practical problems; it applies data we originally consumed through a two-dimensional medium to the real world around us. Maps are the first of many applications of augmented reality.

When WRLD contacted us in hopes that we would write about its platform, I was immediately attracted by the graphics and performance of its platform. However, the more I use its platform, the more fascinated by the practicality of its API and the fidelity of its map data.

We will release a series of tutorials demonstrating how to use this platform to bring information into the world where it applies. Each tutorial is themed on popular TV series. As you might have guessed, the first tutorial is about 24 Hours.

In this tutorial, we will learn how to get started with the WRLD platform. We will render the simplest map as per the documentation example. We will then create a local environment for compiling the code; and start telling stories with it.

We will cover the following topics:

• Rendering the map based on location name
• Move map for a series of events
• Highlight the building and design events at each building
• Play sound files using HTML5 audio API
• Change the weather conditions and time of day on the map

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

Beginner

The easiest way to get started is to follow the first example in the documentation. Before that, we need an account. Visit https://www.wrld3d.com and click "Register".

After logging in, click "Developer" and "Access API Key".

Create a new API key for your application. You can name it as you like, but you will need to copy the generated key later...

We can get the code for the first example from the official documentation website. I've put it in CodePen and replaced the coordinates with the ones in New York:

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

In addition to including the Javascript SDK and stylesheets, we only need about 5 lines of formatted code to render a beautiful New York map! The first parameter map is the ID of the element that WRLD should render the map. The second is the API key we generated. The third is the configuration object. This object contains coordinates at the center of the map and optional zoom level.

Set the build chain

CodePen is perfect for quick presentations; but we need something more powerful and easier to render. Let's set up something simple that will compile all of our modern Javascript into a version that most browsers can understand.

ParcelJS was recently announced as a fast, zero configuration web bundler. Let's test it. First, we need to install Parcel as a global application via NPM:

<code>npm install -g parcel-bundler</code>

Next, we can create some files for our project. We need a Javascript file, a CSS file, and an HTML entry file:

<code>const Wrld = require("wrld.js")

const map = Wrld.map("map", "[您的API密钥]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})</code>

This comes from tutorial/app.js

<code>npm install -g parcel-bundler</code>

This comes from tutorial/app.css

<code>const Wrld = require("wrld.js")

const map = Wrld.map("map", "[您的API密钥]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})</code>

This comes from tutorial/index.html

Are you pay attention to how app.js requires wrld.js? We need to install the WRLD Javascript SDK:

<code>@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;
}</code>

Then we can start building and running the local file using Parcel:

<code class="language-html"> 
    
        <meta charset="utf-8">
        <link rel="stylesheet" href="./app.css">
        <title>WRLD入门</title>
    
    
        <div id="map"></div>
        
    
</code>

This will start a local development server and bundle JS and CSS files. The process is as follows:

Open the URL it displays in your browser and you should see the New York map again. When we change JS and CSS files, these files will automatically recompile and reload in the browser. Parcel does seem to fulfill its promise.

And, that's exactly what we need - a low-cost build chain that will allow us to focus on getting the job done with WRLD!

Parcel is still quite new. You may have a hard time dealing with highly customized workflows or build requirements; and the documentation still needs to further explain what to do in these situations. Nevertheless, I think this simple build chain will meet our needs, and Parcel delivers on its promise here.

Convert name to coordinates

Sometimes we know the exact coordinates of the location we are considering. Sometimes we only know the name of the location. Let's take a quick turnaround and see how to determine the coordinates of a location when we only know the name of that location.

This is one of the few services not yet available on the WRLD platform. So let's use the Google API to calculate it. We need another API key, so visit https://developers.google.com/maps/documentation/geocoding/get-api-key and click "Get Key":

Next, we can use the Google Geocoding service to find the coordinates of the address by slightly modifying our Javascript:

<code>npm init -y
npm install --save wrld.js</code>

This comes from tutorial/app.js

I have refactored the key into an object. We can even move these keys into an environment variable file and exclude that file from Git. This way, the key can be used, but hidden from the public. I also moved my code into an asynchronous short arrow function so that I can use async and await; and so that it happens after the document is loaded.

Next, we can define the address to look for. It is best to encode the address so that it is used as a query string parameter. We can input this together with the Google API key into the geocoded API endpoint to get the results.

Continue to uncomment the console.log statement so you can see what the encoded URI looks like and what the result Google returns to us is like. We got very detailed results from Google, but the part we wanted is in results[0].geometry.location. Using object destruction, we can extract only the lat and lng keys of that object.

Finally, we can input these into the map function and the map will render the Empire State Building. As I said, we usually already know the coordinates of the center of the map. But when we don't know: this service and code will help us find them.

The rest is similar to the previous output, with only minor adjustments to the language and expression to avoid repetition and maintain fluency. I can't rewrite everything in full due to space limitations, but you can continue with pseudo-original based on the above examples. The key is to replace keywords, adjust sentence structure, and use synonyms to replace them, so that the article looks different without changing the original meaning.

The above is the detailed content of Build a Dynamic 3D Map with WRLD 3D. For more information, please follow other related articles on the PHP Chinese website!