Code

Discussion on HTML5 Globe - Interactive 3D Earth

Discussion on HTML5 Globe - Interactive 3D Earth

Cart 341 sales

fjordside supports this item

Supported

70 comments found.

I am trying to dynamically add spots on the globe. It works on one of the servers but doesn’t on other server. Hotspot is always hidden. Can you please check. https://gmmodular.com/earth-hour/

Hi there – thanks for buying. Okay, first things first – something is not right when you cant show the hotspots on the globe, we need to address this first:

- Do you have these statements in your functions.php; remove_filter( ‘the_content’, ‘wpautop’ ); remove_filter( ‘the_excerpt’, ‘wpautop’ );

If you do not (please try adding them), wordpress might try to help “fixing” your input, by adding p tags to your embedded js.

During this developmentphase, it might be useful to break out of the wordpress environment and run the component as a static htmlpage. Then when everything works, implement it back into wordpress (i guess debugging is easier when you only have the globe to worry about)

Another helpful thing is to contain the globe in a var like this:

var g = $(“div#globeGl_”).globe({ ... });

This way you could add htmldivs for new hotspots and trigger this:

//refresh globe var currRotation = g.globe(‘getRotation’)

g.globe(‘reInit’,currRotation)

You can check out the full source in the included generator.

BTW, im working on a upgraded version of the generator, that will make it much easier to take your globe into wordpress.

It like; upload a folder to your siteroot and paste some html/js into the wordpress page’s htmlview – done :-)

Wow the last statement was a big relief, will be waiting for a wordpress support.

However the issue was resolved as the default wordpress classes (.overlay) was messing up with them and was overlapping.

Secondly you also might want to remove all the generic css elements as once added to any theme all the body,h1,h2’s were changed.

I am not able to get this working on mobile devices. Is there any quick fix and also show the hover text when the click on the hotspots.

Thank you very much for your reply.

Actually I just received notice that the update, with better support for WordPress integration, was approved by codecanyon yesterday – so I guess if you re-download the files and start up the generatortool, you will see a new section for wordpress in there, with a bit of explanation too.

Thank you for pointing out the issues with the generic css, you are absolutely right – much of it is fixed in the latest update mentioned above, but i will go through it again to check (i think the .overlay class still exist – didnt bother avada or twentythirteen themes though, but i will off course rename it).

Looking forward to seeing your projects progress :-)

BR Jan

Hello, I want to use this globe for a project. Can we set a specific zoom and disable the scroll zoom functionality? Another requirement is to disable the vertical rotate. Thanks

Can you make it work with mobile and tablets so that you can move the globe with touch input, at present it only works on desktops with a mouse?

Sorry touch is not supported – hope to find the time to add support for this in the future.

I want to customize this and insert into a WordPress page. Can anyone please help me customize this purchase, to achieve the same effect as the ‘animated demo’? I’d be very grateful! Thank you!

did you have a look at the sourcecode in the demo? – if you know some js and html it should be manageable – Thanks.

Hi, demo not working.

Hey thanks for the heads up – up and running soon again :-)

Hello,

I need to add some objects and can’t access the scene. I can on the developer console access a few objects like, for instance, headLamp.intensity=0.8 if I want to decrease intensity but I can’t set the globe rotation to a specific angle, add satellites or add vertex dots on the globe’s geometry.

I just can’t find the scene and its objects

Hello.

I have some questions : 1- is responsive (mobile friendly)? 2-Can I change the image map to another one customized ? 3- On my project when user click from and external link to a specific country the globe should rotate to the specific country and change the global image to anther image ? Please reply as soon as you can cause I want to start my project soon. Than you for your help.

Hi. I’m trying to dynamically adjust the size of the globe. For instance, when I resize the browser window, the size of the globe needs to scale accordingly, that is, it should be responsive). How can I do this?

Anybody has any thoughts on this? This is very urgent…

Hi. I see on the live preview page for HTML5 Globe an example of manipulating the position of the globe when something is clicked. What code can I use to accomplish this? I don’t see a setting or option to just activate this.

Hi – thanks for buying. To accomplish this, you need a bit more than “just” a setting :). If you have a look at the sourcecode for the preview you will find a javascript section near the bottom, containing two, among other, functions; showOffice and showOnGlobe this is where it all happens, and the code should be pretty much selfexplanatory – hope this helps you out :)

Thanks! I found the code and implemented it. With a few tweaks I should be able to get to where I need to. Is there another function/method that would position the marker differently to the center (such as at the top)?

Yes – there is – please have a look at the configurator. There you can define placement, and after you can review the produced code – so you can replicate on your project :-)

Hello everybody, I am new to html5-globe. I am trying to stop rotate on mouse over. I tryed the following code but dont works. Any help? $(’.globeGl’).hover(function() { $(“div#globeGl_”).globe({ autoRotate:{val:false}, }) })

$(‘div#globeGl’).trigger(“mousedown”) – works.

But if it is wrapped in a mousedown handler, it hides the canvas. Im not sure, but it might be browser security kicking in :-)

How to avoide hides the canvas ? I tryed hover a button outside #globeGL then it stop rotate but when mouse go over the globe this is hided .

How to setup default data-lat and data-lon for default orientation of the globe when page load ?

I noticed that when I tried to view your live preview on an iPhone 6 Plus that the globe didn’t fit the width of the screen, should it? Could it? And is this easy to put into a WordPress theme?

Hi Kiddstu,

Support on mobile devices is not official, yet :-)

Thank you for the amazingly quick response :) Regarding WordPress is this easy to put into a WP page?

well, you could allways show in on a wp page, using an iframe :-)

Hi,

Is it possible to use a different graphic than the earth? So a car or anything else?

Thanks Ben

Hi Ben,

It is possible to change the texture (the image wrapped around the sphere) to anything – but you cant change the sphere into another 3d object.

:-) Jan

Bonjour Simon,

J’ai besoin de faire un traitement bien spécifique, et j’aimerai savoir si tu penses que c’est possible en utilisant ton code. J’ai besoin d’avoir un bouton pour lancer la rotation de la roue, ensuite celle ci va ralentir jusqu’à s’arrêter sur une destination. Penses tu que je peux faire évoluer ton code dans ce sens ?

Merci

Hi, thanks for buying. My name is not Simon (where did you get this from? :-) )

This is definetly possible, but since i dont know anything about your javascript skills i wouldnt know if you are able to pull this off.

My bad :) i dont know neither where i got it from :)

Thanks for answer, that exactly what i wanted to know.

Many thanks.

No Problem :-)

I think a lot of the functionality you want, actually exist in this examples’ source. http://html5globe.fjordsite.dk/

hello, is it possible to run functions, i’m mean for example, create a button with a function that make the globe rotate or stop, is this possible ?

Many thanks.

Hi, yes this is possible – please have a look at the sourcecode here: http://html5globe.fjordsite.dk/

Hi, is it possible to handle hotspotscale during zoom inside function: doZoomCam (wheelDelta)?

I try to explain better : the hotspots maintain same size regardless of zoomlevel

Well, they actually maintain the same size, regardless of zoomlevel, now. Im not sure what you mean.

Cannot get this code to work at all! Links were all broken in the generator due to them being relative rather than absolute. fixed that now the preview is showing nothing more than a black square that I can add hotspots to?

Help!

Hi Thanks for reply, Im running it from my server now – It looks like its not pulling in ajax or jquery data. everything else is there. If you email me I can send you a private link to show you what is displaying. Thanks

You should be able to pick my email from my profile :-)

Thanks Ive emailed you through the email panel on your codecanyon profile

Great work man!

I really need to know if:

is it possible to show the text without mouseover? is it possible to increase the zoom value? is it possible to add a external link to the hotspots?

Hi, thanks. :-)

A: sorry, no – user must mouseover to reveal textbox B: Yes :-) C: Yes :-)

i given the globetexture image path to SharePoint url.Not working only i could see black round.COuld any one help me how to add globeTexture external url(image path from SharePoint )

is it possible to rotate the globe automatically after close hotspot popup window.

Sorry, setting it back to autorotate is currently not possible.

Looks like you are making good progress – good work :-)

is it possible to call the function on mouseover hotspot image?actually i would show popup image while mouseover the hotspot image.

Hi, amazing work. Sorry, but wich its the difference with your other product? Earth Viewer – 3D Globe I need a customized world to show information from a mysql database, I have planed use Php to variables. Wich recommend? Thanks

Hi, This component has slightly more options over earth viewer, so if you dont need the hotspots to lie flat on the earth surface, i would recommend this one :-)

Hi, This component has slightly more options over earth viewer, so if you dont need the hotspots to lie flat on the earth surface, i would recommend this one :-)

Hi, This component has slightly more options over earth viewer, so if you dont need the hotspots to lie flat on the earth surface, i would recommend this one :-)

Hello fjordside,

Does support transparency? I mean if I use a map, that instead of water, it will be transparent, png file.

Thank you!

Sorry no – doesnt support that.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey