Our blog.

What is Google’s WebGL Globe?

Profile Image Posted

Epiphany

Tying up the loose ends

Please note – to view the globe you must use Google Chrome – if you’re using Chrome right now you’ll be able to automatically see the embedded demo’s that are shown under each screenshot. Yesterday Google announced that they were sharing their WebGL Globe code and gave us two great interactive examples of Google Search Volume by Language and also a display of the World Population from 1990, 1995 and 2000.

The WebGL Globe allows for relatively easily data representation on a 3D globe (think Google Earth style). [iframe width="600" height="400" src="http://data-arts.appspot.com/globe-search/embed"] Points are plotted on the globe using Longitude, Latitude, Magnitude and Colour.

Getting Started

You can find the code repository here: http://code.google.com/p/webgl-globe/source/checkout You’ll need to download a Mercurial client to check out a copy of the code. If you have a Mercurial client already installed you can just clone the repository using the command: hg clone https://webgl-globe.googlecode.com/hg/ webgl-globe So you’ll have the files checked out looking something like this: Read the README and LICENSE files. The two folders Globe and Globe-Search contain the two demo’s that you can see online. If you want load your own data to be drawn on the map then simply open up the search.json file in the Globe-Search example and put in your own data then refresh the page. To draw the location of the Epiphany Leeds office simply replace the existing values with following text: [53.795,-1.53,1.000,11]

JSON Structure for Googles WebGL Globe

Each point on the globe is defined in JSON as a collection of four comma-delimited values.

  1. Longitude
  2. Latitude
  3. Magnitude
  4. Colour

Example of how to map a single point on the globe:   [53.795,-1.53,1.000,11] Multiple points are mapped successively, so you just tag the values on: [53.795,-1.53,1.000,11,51.488, -0.115,0.3,7] In the example values above the first block of 4 digits draws a point in Leeds, the second block of numbers in red draws another point in London in a different colour. The current JSON documentation in the README only mentions Long, Lat and Mag – not colour. If you pass the globe only 3 values instead of 4 you’ll get some weird results (or it will fail to load).

Longitude

Quite simply the Longitudinal value of where you want your point to be shown. It must be only to three decimal places.

e.g. 53.795

Latitude

Again, simply the latitudinal value of where you want your point to show. It must be only to three decimal places.

e.g. -1.53

If you want to quickly get the long-lat of a specific place you can use one of the many Google Maps based longitude latitude finders – just point and click on the map to get the location.

Magnitude

This is the size (or rather height) of the point. Values between 0.000 and 8.000 will be displayed – you can specify a value above 8.000 such as 99.000 but the point drawn will just look the same as a 8.000 magnitude point.

 

Maximum Usable Value – 4.000

This is the maximum value you can use for the top of a point to be visible when the globe initially loads at its maximum distance. Using a value any larger will probably cause issues when displaying many points – purely because the user won’t be able to see the globe as the points will be in the way!

[53.795,-1.53,4.000,11]      Click Here For Larger Live Demo

[iframe width="350" height="350" src="http://webgl.epiphanydev4.co.uk/epiphany/MaxMagnitude.html"]

Negative Values

You can also specify a negative magnitude and if its sufficiently big enough, the point will go through the globe and out the other side. Below, the first image is drawn in a magnitude of 3.000, the second image is drawn with a negative magnitude of -3.000, which appears on the other side of the globe.

Magnitude 1.000      Click Here For Larger Live Demo

[iframe width="350" height="350" src="http://webgl.epiphanydev4.co.uk/epiphany/PositiveMagnitude.html"]

Magnitude -3.000 (out the other side)  Click Here For Larger Live Demo

[iframe width="350" height="350" src="http://webgl.epiphanydev4.co.uk/epiphany/NegativeMagnitude.html"]

Using both a negative and positive point to ‘skewer’ the globe.  Click Here For Larger Live Demo

[iframe width="350" height="350" src="http://webgl.epiphanydev4.co.uk/epiphany/SkewEarth.html"]

Two positive points mapped (Epiphany Solutions Ltd office locations)

[iframe width="350" height="350" src="http://webgl.epiphanydev4.co.uk/epiphany/EpiphanyOffices.html"]

Colour The fourth value represents the colour – there are 15 to choose from by default

 

 

 

 

 

 

 

 

 

[iframe width="350" height="350" src="http://webgl.epiphanydev4.co.uk/epiphany/AllDefaultColours.html"]

 

  1. White
  2. Purple
  3. Cyan
  4. Blue
  5. Dark Blue
  6. Pink
  7. Bright Red
  8. Red
  9. Dark Red
  10. Yellow
  11. Orange
  12. Light Green
  13. Dark Green
  14. Puce Black (21)

Click Here For Larger Live Demo

You can change the colours in the array by simply opening up the Index.html and editing the list of colours (line 122 in the Google demo):

var globe = DAT.Globe(document.getElementById('container'), function(label) {
return new THREE.Color([
0x7ed3f7, 0xff7e7e, 0xff7e7e, 0xff7e7e, 0xff7e7e,
0x216288, 0xff7e7e, 0xff1f13, 0xc0120b, 0x5a1301, 0xffcc02,
0xedb113, 0x9fce66, 0x0c9a39,
0xfe9872, 0x7f3f98, 0xf26522, 0x2bb673, 0xd7df23,
0xe6b23a, 0x7ed3f7][label]);
});

var globe = DAT.Globe(document.getElementById('container'), function(label) {return new THREE.Color([0x7ed3f7, 0xff7e7e, 0xff7e7e, 0xff7e7e, 0xff7e7e,0x216288, 0xff7e7e, 0xff1f13, 0xc0120b, 0x5a1301, 0xffcc02,0xedb113, 0x9fce66, 0x0c9a39,0xfe9872, 0x7f3f98, 0xf26522, 0x2bb673, 0xd7df23,0xe6b23a, 0x7ed3f7][label]);});

Drawing a Simple ‘E’ On WebGL Globe

There are so many uses for WebGL Globe it’s almost unthinkable – but you’ll need to go out and source the data along with the long/lat values or map the long/lat values to the data yourself. For now, as a simple demonstration we’re going to draw a basic “E” on the globe in the Epiphany Solutions colour (orange!). Click Here For Larger Live Demo [iframe width="350" height="350" src="http://webgl.epiphanydev4.co.uk/epiphany/EpiphanyE.html"] To make things easy, I’ve started at the 0,0 long/lat position on the map. As there’s not really a tool out there (yet) which lets you easily draw characters on a map using long/lat coordinates I simply created a basic Excel spreadsheet that accepts a starting Longitude and Latitude, then increments either value by 0.5 over a number of rows along with a fixed Magnitude and Colour – saving the output as a CSV gives me the JSON I need. You can do the same quite easily – although it’s more likely that rather than calculate the successive values you’ll just be looking up individual locations against a database (e.g. “whats the long/lat for London”). Demo Summary Example Files WebGL Globe – All Default Colours WebGL Globe - Magnitude Maximum WebGL Globe - Magnitude Negative WebGL Globe - Magnitude Positive WebGL Globe – Skew EarthWebGL Globe – Epiphany Solutions Ltd Offices WebGL Globe – E Character JSON Example Files All Default Colours JSON Magnitude Maximum JSON Magnitude Negative JSON Magnitude Positive JSON Skew Earth with Magnitude JSON Epiphany Solutions Ltd Offices JSON Draw E Character JSON