# Sphere of rotating Earth with Markers and Popups

**URL:** <https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551>\
**Category:** Questions\
**Tags:** popup, markers, geometry\
**Created:** [October 8, 2024, 10:08am UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551 "2024-10-08T10:08:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mstudio](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@mstudio](https://discourse.threejs.org/u/mstudio)\
**Post date:** [October 8, 2024, 10:08am UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551/1 "2024-10-08T10:08:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [October 8, 2024, 10:35am UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551/2 "2024-10-08T10:35:26Z")

</div>

> [@mstudio](#):
>
> I asked ChatGPT but the answer is not working right

snicker - SCNR

You came to the right place: Try [**this**](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995).

---

<div class="post-metadata">

**Author:** ![mstudio](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@mstudio](https://discourse.threejs.org/u/mstudio)\
**Post date:** [October 8, 2024, 11:00am UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551/3 "2024-10-08T11:00:08Z")

</div>

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](https://regaceproject.com/spin/earth.html)  
(you can see all the code in the source)

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [October 8, 2024, 12:42pm UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551/4 "2024-10-08T12:42:05Z")

</div>

> [@mstudio](#):
>
> Can I use this anywhere and on any site?

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.

> [@mstudio](#):
>
> How do I change the image of the globe and adding my own text to the markers?

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

> [@mstudio](#):
>
> If like to see, this the is page of what ChatGPT answered

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

---

<div class="post-metadata">

**Author:** ![mstudio](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@mstudio](https://discourse.threejs.org/u/mstudio)\
**Post date:** [October 9, 2024, 10:47am UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551/5 "2024-10-09T10:47:45Z")

</div>

[vielzutun.ch](https://discourse.threejs.org/u/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

---

<div class="post-metadata">

**Author:** ![mstudio](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@mstudio](https://discourse.threejs.org/u/mstudio)\
**Post date:** [October 10, 2024, 2:03pm UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551/6 "2024-10-10T14:03:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [October 11, 2024, 8:59am UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551/7 "2024-10-11T08:59:21Z")

</div>

> [@mstudio](#):
>
> I am completely lost

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)

---

<div class="post-metadata">

**Author:** ![mstudio](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@mstudio](https://discourse.threejs.org/u/mstudio)\
**Post date:** [October 13, 2024, 6:26am UTC](https://discourse.threejs.org/t/sphere-of-rotating-earth-with-markers-and-popups/72551/8 "2024-10-13T06:26:38Z")

</div>

[vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)  
The example here [https://codepen.io/prisoner849/full/oNopjyb](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](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](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?