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