WolframAlpha is a “computational knowledge engine”. Unlike a search engine, Wolfram generates output by doing computations from its own internal knowledge base. The user can enter any piece of data, for example a place, a formula or a person’s name, and Wolfram will return any data it thinks is related.
We are using Wolfram to return additional information about an environment. We pass the coordinates of the environment to Wolfram and we display the information it gives back. We have grouped the data we want to display into 3 categories: time, weather and nearby.
The main problem with using Wolfram was that due to the output being computational, it didn’t always return exactly the same data, even with the same input. So refreshing the page may cause the data to change. This isn’t the greatest user experience.
We opted to add a small message in the bottom-right corner to warn the user that the information is dependant on data availability.
In hindsight, we could have used some kind of caching system to save the data once it has been loaded by the first user and only update it if it is newer or more populated. However I’m not sure whether Wolfram’s policy would allow us to do that.
Another problem was that the data that Wolfram returns was raw text with no formatting. For example, a list of nearby cities was presented without an obvious delimiter between each place. We had to use some clever regex to split up the lists.
By combining Google Elevation API, Google Static Maps API and ThreeJS, we can automatically generate and display 3D topographical representations of real-world areas using only code.
The following lists out the step-by-step process we went through in order to produce the outcome.
Getting the elevation data:
- Split the world into tiles
- Work out which tile the user has selected
- Get the latlng (latitude and longitude) boundaries of that tile
- Divide the tile into another grid (30×30)
- Loop through the grid, row by row, and get the latlng of each of those divisions
- Request the elevation of each latlng from Google Elevation API and store in an array
Generating the height map:
A height map is a grey scale image where white means high and black means low.
In RGB, white = 255 and black = 0.
- Take the elevation array and find the maximum and minimum value
- Normalise all the data so that the minimum value = 0
- Calculate the ratio of all the values so that they lie between 0 and 255
- Convert the array into a string, with each column delimited by a comma and each new row signified by a dash, and pass the string into a PHP script
- The PHP parses and loops through the string to draw out the grey scale image pixel by pixel, which is then saved to disk
Getting the satellite image:
- From the selected tile boundaries, calculate the centre latlng of that tile
- Request the satellite image using Google Static Maps (proxying through a PHP script to bypass the Cross-Origin Policy)
Rendering the model:
- ThreeJS is used to generate a mesh and downloads the height map and the satellite image
- The height map is applied as a displacement map
- The satellite image is applied as a texture