JS Globe

Hopefully you should see a spinning texture mapped globe below, which is rendered entirely with Javascript and HTML. No Flash, Canvas tags or animated Gifs. Just a bunch of divs, some CSS and a sprinkling of Javascript. Tested on Firefox and Opera.

How it works

Update: Added some green lines, because some people weren't convinced!

 
Use Markdown for formatting 
*Italic* **Bold** `inline code`

Links to [Google](http://www.google.com)

> This is a quote
>

```python
import this
```
your comment will be previewed here
gravatar
JD —
I see the globe, but it runs super slow in Firefox, interfering with my typing. The display is handled better in IE. Still pretty cool.
Reply to JD
gravatar
BoydWaters —
In Safari, no textures…
Reply to BoydWaters
gravatar
BoydWaters —
whaa.. after I posted a comment, the textures appeared – spinning globe! Wow!
Reply to BoydWaters
gravatar
GirldOceans —
In Safari, no textures…
Reply to GirldOceans
gravatar
Goner —
I see a white ball in Firefox 3.0.10. (I've been waiting for a bit and still nothing)

In IE six it looked like it was working for a second and then a non-transparent sphere image was overlayed and it now looks the same as the non-working Firefox version except no transparent png support.

Looks like you've got some bugs to work out. Sounds like a cool concept though. check out http://hyszczak.net/2 for an example of a flash-like Javascript/HTML/CSS implementation.

Good luck!
Reply to Goner
gravatar
Will McGugan —
Goner, It should work on FF 3.0. Try refreshing, for some reason it doesn't appear first time. No hope for IE6, due to its lack of transparent PNGs…
Reply to Will McGugan
gravatar
Goner —
Same issue as BoydWaters. After I posted the comment it started working. Maybe you could lower the resolution so there's not a new row every pixel, but every 3 or 4 pixels. Just a thought.

Another semi transparent cloud layer would be cool too.
Reply to Goner
gravatar
PhillyPop —
Ideas like this are what make people cool. Couldn't see it yet but looking forward to it. Just call it the ice-age version for now.
Reply to PhillyPop
gravatar
Marc —
Maybe I'm wrong but shouldn't the landmasses shrink in size (horizontal) when they get closer to the edge? Now it looks like they are stretched the closer they get to the edge.

This is on FF 3.0.10 and the globe appeared instantly by the way, it's a bit slow but still very impressive work!
Reply to Marc
gravatar
Will McGugan —
Marc, absolutely correct – there is no foreshortening on the x axis. I don't think there is a way of doing that with plain old HTML!
Reply to Will McGugan
gravatar
Marc —
Oh.. okay… still pretty cool though ;-)

Maybe dive into canvas next time. :)
Reply to Marc
gravatar
earth —
this looks like an animated circle not a globe
Reply to earth
gravatar
Derrick —
I see only a silver sphere
Reply to Derrick
gravatar
Tyler Style —
Great little app! Nice work. And it renders perfectly for me with no speed or loading issues on FF3 and Ubuntu 9.04
Reply to Tyler Style
gravatar
George —
In FF 3.0.10 with NoScript, I got a white sphere with grey/silver shading.

Then I allowed both willmcgugan.com and googleapis.com. Duh!

Then I got a cool rendering of the globe with occassional fat, green longitude markers.

It even moves from west to east, toward the rising sun! That's better than NBC News' managed, and it took them a lo-o-o-ong time to fix it.
Reply to George
gravatar
George —
I got about 12 or 13 seconds for one rotation ("one, one-thousand, … , so I'm off for sure, but close enough), which seems reasonable. The old girl isn't a top, after all!

Would a spherical top (basketball, …) spin faster? Only if a simpler image meant fewer pixels to bash, I suppose.

The code is remarkably simple, from my limited concept of javascript.
Reply to George
gravatar
David Welden —
Just an empty sphere on Chrome
Reply to David Welden
gravatar
Lucas —
Wired.
Reply to Lucas
gravatar
daniel —
wow!…. pretty cool… can it go faster and slower ?
Reply to daniel
gravatar
Christian Uhl —
Works on Firefox 3.6.8 after one reload.

Why is this required?
( at the beginning without reload just white ball )

Can you scale this for fullscreen usage and some drag functionality and marking ( eg whats on the otherside? )



Christian Uhl

PS.: JS is always hard work someway ^^
Reply to Christian Uhl
gravatar
Poonam —
javascript globe
Reply to Poonam
gravatar
Chalie Monkey —
We don't like your work. Use WebGL
Reply to Chalie Monkey