Sphere of rotating Earth with Markers and Popups

Questions
, ,
1

I want to create Sphere of Earth with markers and popups, so when you user click on marker a popup will shown with some info.
I want the rotate will pause when hovering the marker, so user can click it.
I have number of markers that need to stay on the same spot and move with the Earth.
I asked ChatGPT but the answer is not working right. can I show the code here?
I also have link to the page

2

snicker - SCNR

You came to the right place: Try this.

2 Likes
3

Thanks, it looks amazing.
Can I use this anywhere and on any site?
How do I change the image of the globe and adding my own text to the markers?
If like to see, this the is page of what ChatGPT answered
https://regaceproject.com/spin/earth.html
(you can see all the code in the source)

4

It is my understanding, that whoever posts/publishes code samples on this site implicitely agrees to it being used for any purpose by whomever feels to do so.

I’m afraid you’ll have to dig through the code samples of interest and find the spots that you need to adapt.

This is more/better than I would have expected, even though a far cry from what you’re aiming for.

1 Like
5

vielzutun.ch
I checked the example with Chrome console to see it on mobile and tablet, is there way to make it more responsive for tablet and mobile on vertical layout? It looks OK on horizontal layout

6

I am completely lost, I tried for 2 days to create what I want and even ChatCPT doesn’t helping.
I want to 6 markers on position I select and when user click one marker a popup will show with info on HTML format about the marker, I have part of solution that in it the popup is not closing when clicking the close X

7

This type of “global” questions is not going to get you anywhere.

If I understand your quest correctly from your previous posts, you plan to have

  1. a spinning globe (either auto-spinning, or manually rotated via OrbitControls)
  2. a globe bitmap/layout of your choice
  3. some markers on specific points of the globe
  4. These markers shall react to a click
  5. by showing a popup screen with some information related to the clicked marker
  6. The popup shall close when a button (x) is clicked.

On that list, how far did you get? In which step did the first problem occur? Solve that problem before proceeding to the next step. Note: regardless how many problems you already solved, there will always be the next “first” problem to solve.

If you can’t overcome the very first problem on your own or with the help of AI, ask a specific question regarding one specific aspect of that problem only.

Software development is a sequential process which can be summed up as

divide and impera!

(divide and conquer)

8

vielzutun.ch
The example here https://codepen.io/prisoner849/full/oNopjyb
is great, all I need is the set the markers position by my own to fixed position so they don’t have random position and set custom text to each marker.
It is like here https://shange-fagan.neocities.org/globe_news2/globe-news2 but the with layout on the example you show me, I don’t need the background and other layout.
Thanks for all the help.

UPDATE:
this is what I have for now
https://regaceproject.com/spin/text.html
Two problems:

  1. The close button for marker 1 (the one without markers near it) is not place as the others, how to make it place like the others?
  2. All the marker are big large, how to make them smaller?