Great job on this!
I’m having one issue with Markers. As globe is rotated, every little while I see the horiz scrollbar appearing/disappearing. I stopped the rotation when the scrollbar appeared and way, way off to the right side (it scrolls for a very long time), I see a few of the Markers positioned over there – way off the canvas and globe.
When start rotating again after stopping it, then those particular markers no longer show on the globe at the coords they are supposed to. If I don’t stop and scroll over to the markers, they come back to the correct position on the globe, but are still moving in and out cause I can see the scrollbar appearing/disappearing.
Do you know how I can fix this? Is anyone else having this issue?
Great design and functionality though! Very helpful directions as well.
This sound like an issue with the CSS ‘overflow’ property. As the markers are added onto the globe as child elements, they can potentially affect the layout of the parent element in some circumstances (e.g. by making it bigger in the layout therefore suddenly requiring a scrollbar where none was needed before).
Experiment with setting the overflow: hidden; property on the globe, and possibly anything that overlaps or is in the general area. If you look at the index.html that comes with the globe for example, you’ll see that property set on the body tag of the document.
Thanks for your reply. I tried putting overflow:hidden; on the body tag, but this cuts off other elements on the page and makes my vert scrollbar completely go away so I can’t scroll down to see them.
I tried putting the canvas & markers inside a div container and set the size to same size as canvas. If set the div to overflow:hidden it still does not work… unless I also set the div to position: relative. Then it works!
But then the coords are a bit messed up, I think due to the relative position. The markers are still in their correct positions, but when I use the “coords” div to see the Lat/Long, the bottom half of the globe shows as ”.” as if I’m not on the globe, when I am. Also, the speed of the redraw/rotation is drastically reduced, making the globe not rotate very well to an unacceptable level. Any thoughts on this?
I’m wondering why would the markers ever be in coords outside of the globe to begin with though? Why are they doing that, and how could I prevent that as an alternative way to fixing this? Is there a way I could code: if marker coords are outside globe, then hide the marker or reposition marker inside globe?
Thanks again for any help or thoughts on this!
Why don’t you email it over and i’ll take a look.
I have a few questions i need answers for before I purchase this.
1. How many points am I able to plot on a globe? I have 34000 data points. Will this be too much for this module?
2. Can I have multiple color markers on one globe? For example red markers for capitals and green markers for parks?
3. Can the globe be scaled to fit a given size?
I look forward to hearing back from you.
2) Yes, as each marker is just a DOM element you can style it with CSS however you like, for example by changing the background-color property.
3) Yes, the globe simply takes a reference to a canvas element in your HTML; this can have its width and height set to whatever you want.
Thinking about buying this to replace a flash version I have on a website, but can the globe be made to rotate constantly, not just on clicking a location ? Thanks.
Will purchase it anyway – nearest to what I need, but if it is easy to make it constantly rotate would be interested in knowing how to do it.
Yes you can make it rotate constantly using two functions:
SetDamping() to prevent the globe slowing down.
SetAngularVelocity() to start the spin.
Hoe can I color the whole country – for each marker – I have a list of countries that need to be cliacakble but it is TOOO busy with each marker.
You might find it easier to have a number of different maps each with a different country coloured differently, and switch images as you require them.
You might also try getting the lat/lng of the mouse click, and testing if it’s within a short distance of a lat/lng that represents the center of a country – to see if the country was clicked on.
Hi there Monty,
Is there a possibility to restrinct the motion range in one of the axis when mouse dragging?
I want to move the globe only in the x way and barely in the y way.
Thank you so much.
Sorry I am away for one week and not able to access my computer, help you when I get back.
Open globe.js and on line 602 insert the following lines:
this.quat.x = Math.min(0.1, Math.max(-0.1, this.quat.x));
this.quat.z = 0.0;
That should do it. You can change the 0.1 to another number, including 0 to vary the vertical restriction.
It works perfect, Thanks!
I noticed the globe is created by an image on strips strips that span north to south – what I want to know is if it is possible (and hopefully not too hard) to extract what point on a strip is clicked in a meaningful way (like what pixel of which strip)
You can detect the latitude/longitude of a mouse click.
You could then use some math to get the pixel of the wrapped image, for example:
Latitude is -90 to +90
Image is, say 512 pixels in height.
Pixel-Y = (((lat / 90) + 1) / 2) * 512
Would it be possible to add markers based on a click(or in the html js script in general)? In the quickstart the marker attributes are all hard coded
I think what i want to do requires:
creating dom element
add it to array of markers
Yes you could add a marker from a mouse click by that method.
Hi There Monty,
I m am willing to buy this product.But i want to know that if it has the auto rotation feature in it.And it should stop the rotation on the first mouse click on globe.
I am not a tech savvy so can you just tell me that which lines i would change an din which file…
Hi, sorry for not replying i’ve been very busy.
Yes you can make the globe rotate and stop it with just a couple of lines of code. Set it up how you want it then email it over and I will do that small job for you.
Hi, Thanks for replying…we were able to resolve all the issue we mentioned….Really a good job done
Hi, Unfortunately i’m too busy to get involved with smaller projects, but you may have some success with a freelancing company such as elance.com
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
Unlimited graphic downloads & digital courses. Only $29/month
22,000+ templates & 1,000+ courses
Learn almost anything with
Envato Tuts+ for free
9000 free tutorials, 3000 paid courses
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work