# Globe with markers and label: thoughts, ideas, approaches, solutions

**URL:** <https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995>\
**Category:** Resources\
**Tags:** labels, points, globe, marker, shaders\
**Created:** [February 17, 2022, 5:03pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995 "2022-02-17T17:03:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 17, 2022, 5:03pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/1 "2022-02-17T17:03:10Z")

</div>

Hi community!

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/0/a0830fe9894ba5f75cff41450a1f24cce6d3f82d.jpeg)

**Demo + source code: [https://codepen.io/prisoner849/full/oNopjyb](https://codepen.io/prisoner849/full/oNopjyb)**

It was questioned many times on the forum, SO and discord: how to create a globe with markers, and more important, with interactable markers, when you click them, a label with some info would pop up.

So I decided to create this demo, which is kind of compilation of my thoughs and ideas. And now I’ve got an example I can refer to in case of further asking 🙂

There are comments in the source code.

PS It’s just a demo, not the ultimate solution.  
PPS Feel free to add your demos and examples, with markers and labels, to the thread.

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [February 18, 2022, 7:20pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/2 "2022-02-18T19:20:28Z")

</div>

Looks fantastic, well done!

Here’s some github repos with cool globes:

[Google Data Arts WebGL Globe](https://github.com/dataarts/webgl-globe)  
[Globe.gl](https://github.com/vasturiano/globe.gl) - a wrapper around the previous repo

---

<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:** [February 19, 2022, 11:42am UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/3 "2022-02-19T11:42:10Z")

</div>

Really well done! 👏 👍  
I particularly like the little details, like the “radiating” markers spreading thinner until they vanish, and them _ **not** _ being in sync with each other. Then of course the very gentle backface culling transition zone for the labels. So you quite elegantly avoided one of the downsides of labels being a 2D-effect.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 19, 2022, 12:22pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/4 "2022-02-19T12:22:17Z")

</div>

Oh, yeah, creation of markers with ripple effect was fun. 🙂  
The hardest part was to make the label a friend of markers, and make it disappear, when a marker is on the backside of the sphere. 💪

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [February 19, 2022, 12:36pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/5 "2022-02-19T12:36:44Z")

</div>

nice touch with the pulsing annotations, looks like a game.

> [@prisoner849](#):
>
> PPS Feel free to add your demos and examples, with markers and labels, to the thread.

i have a barebones example in order to teach how to occlude (and animate) markers when they’re behind the globe: [HTML Markers - CodeSandbox](https://codesandbox.io/s/html-markers-6oei7?file=/src/App.js)

---

<div class="post-metadata">

**Author:** ![Suns](https://avatars.discourse-cdn.com/v4/letter/s/b9bd4f/32.png) [@Suns](https://discourse.threejs.org/u/Suns)\
**Post date:** [February 23, 2022, 7:03pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/6 "2022-02-23T19:03:58Z")

</div>

Hi, I love those points. Thanks for sharing your code, I’ve tried them on another globe. 🌎🌍🌏

[![og_1400_900](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/5/45080e95f2fb2a3f85bb8b61b1574337e2dc7d84.jpeg)](https://maptheclouds.com/playground/dataviz/globe-points/)

---

<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:** [March 13, 2022, 3:50pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/7 "2022-03-13T15:50:56Z")

</div>

> [@prisoner849](#):
>
> PPS Feel free to add your demos and examples, with markers and labels, to the thread.

Now that I’ve published a stand-alone version of [TexFont for Three.js](https://discourse.threejs.org/t/texfont-for-three-js/35888), I’m equally happy (but less proud) to publish my entry into this collection of “Globes with labels”:

 ![Bildschirmfoto 2022-03-13 um 16.52.34](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/0/10bd9d8bbe1b53c9ad8ca2a34ec88acf10c99449.jpeg)

In my entry, the labels are textured 3D-planes, and as such benefit from the full range of 3D features like:

- depth cueing
- automatic visibility handling
- various billboarding options
- dynamic content updating
- sensitivity for fog
- plus the rest I didn’t think of 😉

Be warned, that the code is a monolithic mess (it contains an earlier version of TexFont) - please take this only as an [MVP](https://productschool.com/blog/product-management-2/skills/difference-prototype-mvp/) to see what this approach can do in terms of visual impact.

Please take particular note of **the one** label at latitude 0°, longitude 0° (Gulf of Guinea), which can be configured (GUI) as having **[No | 2D | 3D] billboarding** properties. In addition, its **contents is dynamcally updated** and displays pitch and yaw angles, as well as distance from the target of the OrbitControlled camera.

[https://jsfiddle.net/Chrisssie/s63jnpea/](https://jsfiddle.net/Chrisssie/s63jnpea/)

---

<div class="post-metadata">

**Author:** ![danechitoaie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danechitoaie/32/25754_2.png) [@danechitoaie](https://discourse.threejs.org/u/danechitoaie)\
**Post date:** [April 21, 2022, 9:32am UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/8 "2022-04-21T09:32:52Z")

</div>

Awesome. Any idea how to have the outer circle in different color?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 21, 2022, 1:57pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/9 "2022-04-21T13:57:32Z")

</div>

@danechitoaie  
Not that much to add and to change:

```nohighlight
    shader.fragmentShader = `
    	uniform float time;
        varying float vPhase;
    	${shader.fragmentShader}
    `.replace(
      `vec4 diffuseColor = vec4( diffuse, opacity );`,
      `
      vec3 col = diffuse; // added
      
      vec2 lUv = (vUv - 0.5) * 2.;
      float val = 0.;
      float lenUv = length(lUv);
      val = max(val, 1. - step(0.25, lenUv)); // central circle
      float outerCircle = step(0.4, lenUv) - step(0.5, lenUv); // added
      col = mix(col, vec3(0, 1, 1), outerCircle); // added
      val = max(val, outerCircle); // outer circle // changed
      
      float tShift = fract(time * 0.5 + vPhase);
      val = max(val, step(0.4 + (tShift * 0.6), lenUv) - step(0.5 + (tShift * 0.5), lenUv)); // ripple
      
      if (val < 0.5) discard;
      
      vec4 diffuseColor = vec4( col, opacity );` // changed
    );

```

---

<div class="post-metadata">

**Author:** ![danechitoaie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danechitoaie/32/25754_2.png) [@danechitoaie](https://discourse.threejs.org/u/danechitoaie)\
**Post date:** [April 21, 2022, 2:04pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/10 "2022-04-21T14:04:07Z")

</div>

> [@prisoner849](#):
>
> ```javascript
> vec3 col = diffuse; // added
>       
> vec2 lUv = (vUv - 0.5) * 2.;
> float val = 0.;
> float lenUv = length(lUv);
> val = max(val, 1. - step(0.25, lenUv)); // central circle
> float outerCircle = step(0.4, lenUv) - step(0.5, lenUv); // added
> col = mix(col, vec3(0, 1, 1), outerCircle); // added
> val = max(val, outerCircle); // outer circle // changed
>       
> float tShift = fract(time * 0.5 + vPhase);
> val = max(val, step(0.4 + (tShift * 0.6), lenUv) - step(0.5 + (tShift * 0.5), lenUv)); // ripple
>       
> if (val < 0.5) discard;
>       
> vec4 diffuseColor = vec4( col, opacity );
> 
> ```

Thank you. Oh man, you are doing magic. I’ve spent the past few days on bookofshaders but things still don’t make sense for me in regards to how they work and how you manipulate things.

---

<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:** [July 8, 2022, 5:20am UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/11 "2022-07-08T05:20:16Z")

</div>

I stumbled across this website/widget provider:

> **[Live Statistics
 | RevolverMaps - Free 3D Visitor Maps](https://www.revolvermaps.com/livestats/globe/21rjqm157p4/)**
>
> RevolverMaps: Interactive 3D Visitor Globes

What goes beyond what we’ve seen so far in this thread is the “depth stacking” of overlapping labels on concentrical hulls, which you can (to a degree) untangle by zooming in:

 ![Bildschirmfoto 2022-07-08 um 07.18.31](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/0/5017df684cb0400e9558e9aa81346a454292f2f7.jpeg)

---

<div class="post-metadata">

**Author:** ![Dinesh\_Tarphe](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dinesh_tarphe/32/26074_2.png) [@Dinesh\_Tarphe](https://discourse.threejs.org/u/Dinesh_Tarphe)\
**Post date:** [December 7, 2022, 11:34am UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/12 "2022-12-07T11:34:23Z")

</div>

how to add pointer for particular country

---

<div class="post-metadata">

**Author:** ![Dinesh\_Tarphe](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dinesh_tarphe/32/26074_2.png) [@Dinesh\_Tarphe](https://discourse.threejs.org/u/Dinesh_Tarphe)\
**Post date:** [December 7, 2022, 11:35am UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/13 "2022-12-07T11:35:01Z")

</div>

how to add pointer for particular country, please help

---

<div class="post-metadata">

**Author:** ![Shange](https://avatars.discourse-cdn.com/v4/letter/s/46a35a/32.png) [@Shange](https://discourse.threejs.org/u/Shange)\
**Post date:** [December 13, 2022, 3:17pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/14 "2022-12-13T15:17:57Z")

</div>

This is awesome, I’ve been trying to create something like this but for displaying live news and now i can use this, here is what I made:

 ![Screenshot 2022-12-13 at 14.58.18](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/1/a1cd4f735149cc63b349492718c1cddbcc7cfdfc.jpeg)  
I was wondering if you could give mec some advice as the gui isnt fully working so i am unable to switch between globe textures and also the html news widgets do not display correctly within your labelMarker div you created, and one last thing is the globe has no specular map or bump map being shown even though I’ve added both, here is a live link and my code, feel free to edit:  
[https://shange-fagan.neocities.org/globe\_news2/globe-news2.html](https://shange-fagan.neocities.org/globe_news2/globe-news2.html)

since it I couldnt paste the code here, here is a link to the code on the glitch website:([Glitch :･ﾟ✧](https://glitch.com/edit/#!/working-supreme-zebu))

ps - I tried to set the marker locations to the lat and lng of each country using fetch json file containing the latitude and longitude of each country but I get an error in the console that says: Uncaught (in promise) TypeError: dummy.position is not a function

---

<div class="post-metadata">

**Author:** ![Kevin37](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kevin37/32/32257_2.png) [@Kevin37](https://discourse.threejs.org/u/Kevin37)\
**Post date:** [January 3, 2023, 6:33pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/15 "2023-01-03T18:33:32Z")

</div>

Hey @Shange I was trying to open the glitch link provided, but it does not work for me, could you provide me a working link? I like the globe very much 🙂 Thanks.

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [December 4, 2023, 3:48am UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/16 "2023-12-04T03:48:36Z")

</div>

Hi @prisoner849 ,

Here goes a very simple alternative of use of InstancedMesh and dummyes,  
based in Your beautiful creation.  
And with postprocessing effect.  
Maybe usefull for beginners.

the link:

> **[globe\_markers\_alt.html](https://jrlazz.github.io/anim/globe_markers_alt.html)**

Hope You like!

---

<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, 12:13pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/18 "2024-10-08T12:13:39Z")

</div>

@ [Suns](https://discourse.threejs.org/u/Suns)  
How did you change the image?

---

<div class="post-metadata">

**Author:** ![Suns](https://avatars.discourse-cdn.com/v4/letter/s/b9bd4f/32.png) [@Suns](https://discourse.threejs.org/u/Suns)\
**Post date:** [October 8, 2024, 2:12pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/19 "2024-10-08T14:12:48Z")

</div>

Here: [MapTheClouds - Chart Types](https://maptheclouds.com/playground/dataviz/globe-points/)

[Yahoo Mail: Search, organise, conquer](https://mail.onelink.me/107872968?pid=NativePlacement&c=Global_Acquisition_YMktg_315_EmailSignatureGrowth_YahooMail:Search,Organize,Conquer&af_sub1=Acquisition&af_sub2=Global_YMktg&af_sub3=&af_sub4=100000945&af_sub5=OrganizeConquer__Static_)

---

<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:40am UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/20 "2024-10-09T10:40:43Z")

</div>

[Suns](https://discourse.threejs.org/u/Suns)  
Thanks, your example show the globe and the markers but don’t show the popup?

---

<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:08pm UTC](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995/21 "2024-10-10T14:08:11Z")

</div>

[prisoner849](https://discourse.threejs.org/u/prisoner849)  
Can you help me with how to set fix position for the markers and not random and having custom HTML text to each marker? ChatGPT doesn’t helping