HTML5 Globe Help

Getting started

With this amazing HTML5 globe, you can travel around the world, in a matter of secondes. Show your points-of-interest with ease.

Getting started is very easy

Using the generator tool.

Step 1 - Upload the generator tool

Locate your generator folder, and upload this folder to your webhost. When the upload has finished, access generator.html under the generator folder where you uploaded it.

Step 2 - Create points and tweak settings

a: Click anywhere on the globe to mark the position of your point.
b: Choose an icon and alignment.
c: Fill in rollover text and content.
d: Press Add hotspot - and you have got your first hotspot.
e: Follow the below instructions, in the generator tool, for either using your globe as custom html or on a wordpress page.

Using the Globes API.

The globe has got some exposed features and function that can be accessed from outside the globe, using javascript. This is usefull if you f.ex. want to spin the globe to a specific location, set some options og change the zoom level.

Setting options

jQuery('#globeGl_').globe('getOptions') //lists available options in the devtools console listener jQuery('#globeGl_').globe('option','autoRotate',{val:'true'}) //sets the option "autoRotate to true"

Available options

globeRadius:{val: 200, desc:"defines the size of the globe"}, globeShine:{val: 10, desc:"defines the shininess of the globes material"},texture to use for the globe"}, globeTexture:{val: "textures/earthmap10k_comp.jpg"/*"textures/terra_equi.jpg"*/, desc:"defines wich texture to use for the globe"}, globeBump:{val: "textures/earthbump1k.jpg"/*"textures/terra_equi.jpg"*/, desc:"defines wich texture to use for the globe"}, globeMinScale:{val: 0.3, desc:"sets minimum zoomlevel"}, globeMaxScale:{val: 7, desc:"sets maximum zoomlevel"}, globeSegments:{val: 50, desc:"defines the globes coarsness - high value (50) gives smooth and round globe, lower values might increase performance on slow systems"}, momentum:{val: 0.07, desc:"defines the globes rotation-momentum, low values produce more momentum (the globe appears heavier)"}, ambientIntensity:{val: 3.5, desc:"defines intensity for the ambient light"}, ambientColor:{val: "#555584", desc:"defines color for the ambient light"}, ambientPosX:{val: 20000, desc:"defines x position for the ambient light"}, ambientPosY:{val: -10000, desc:"defines y position for the ambient light"}, ambientPosZ:{val: 495, desc:"defines z position for the ambient light"}, headLampIntensity:{val: 1.2, desc:"defines intensity for the main light"}, headLampColor:{val: "#ffffff", desc:"defines color for the main light"}, headLampPosX:{val: 500, desc:"defines x position for the main light"}, headLampPosY:{val: 1000, desc:"defines y position for the main light"}, headLampPosZ:{val: 0, desc:"defines z position for the main light"}, hotSpotIcon:{val: "textures/hotspotIconsOrange/nano_LT.png", desc:"default texture for the hotspots - hotspots are alignet left-top by default"}, backPlateTexture:{val: "textures/backPlate_glow.png", desc:"texture for the globes halo"}, backPlateMargin:{val: 50, desc:"defines how far the halo extends from the globe"}, debugMode:{val: "false", desc:"used for testing"}, popWidth:{val: "80%", desc:"default maxwidth for colorbox popup"}, popHeight:{val: "80%", desc:"default maxheight for colorbox popup"}, contentClass:{val: ".hotspot", desc:"wich class to use for hotspotgeneration"}, hotspotCssOverride:{val: "hotspot_override", desc:"Use this to override graphic properties on hotspots"}, cameraTargetX:{val:0 , desc:"cameras target x position"}, cameraTargetY:{val:0 , desc:"cameras target y position"}, cameraTargetZ:{val:0 , desc:"cameras target z position"}, autoRotateSpeed:{val: .02, desc:"sets the speed on autorotate"}, autoRotate:{val: "true", desc:"makes the globe autorotate on startup"}, clickExternal:{val: false, desc:"name of custom function to call on hotspotclick - overrides the default lightbox popup"}, assetPath:{val: '', desc:"Use this to prepend all assets with a path"}, zoomWheelDirection:{val: 'downIn', desc:"Use this to control the direction of zoomwheel zooms - options are 'downIn' or 'downOut'"},

Exposed functions

rotate: rotate, rotates the globe to specific lat, lng jQuery('#globeGl_').globe('rotate',0,0) -- refresh: refresh, refreshes the globe jQuery('#globeGl_').globe('refresh') -- getOptions: getOptions, returns all available options jQuery('#globeGl_').globe('getOptions') -- reInit: reInit, reinitializes the globe jQuery('#globeGl_').globe('reInit') -- getCoords:getCoords, returns lat and long for last click jQuery('#globeGl_').globe('getCoords') -- getRotation:getRotation, returns the globes rotation jQuery('#globeGl_').globe('getRotation') -- zoom:zoom, zooms the globe using level, time jQuery('#globeGl_').globe('zoom',0.5,2000) -- getZoom:getZoom, returns the current zoomlevel jQuery('#globeGl_').globe('getZoom') -- startNav:startNav, starts navigation jQuery('#globeGl_').globe('startNav') -- pauseNav:pauseNav, pauses navigation jQuery('#globeGl_').globe('pauseNav') -- startAutoRotate:startAutoRotate, starts autorotation jQuery('#globeGl_').globe('startAutoRotate')