# Simple dotted map texture with map markers

**URL:** <https://discourse.threejs.org/t/simple-dotted-map-texture-with-map-markers/82693>\
**Category:** Questions\
**Tags:** textures, geometry\
**Created:** [May 16, 2025, 6:36pm UTC](https://discourse.threejs.org/t/simple-dotted-map-texture-with-map-markers/82693 "2025-05-16T18:36:33Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![thejessewinton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thejessewinton/32/59380_2.png) [@thejessewinton](https://discourse.threejs.org/u/thejessewinton)\
**Post date:** [May 16, 2025, 6:36pm UTC](https://discourse.threejs.org/t/simple-dotted-map-texture-with-map-markers/82693/1 "2025-05-16T18:36:33Z")

</div>

I want to create a map like this in Three.js; ideally, it would use geojson, create the base map points, and then allow me to pass in markers with a lat/long and render the markers on an equirectangular map. I’m working in Threlte, so I’d like to render the markers with `interactivity()` so I could add a tooltip with details about the marker. Any suggestions, or a good place to start? I’m newish to this, so still learning the ins and outs.

Thanks!

 ![Screenshot 2025-05-16 at 8.44.54 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/a/ca7318e05508cd21651383fed44b3a8cd10fb9a1.png)

---

<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:** [May 16, 2025, 6:57pm UTC](https://discourse.threejs.org/t/simple-dotted-map-texture-with-map-markers/82693/2 "2025-05-16T18:57:32Z")

</div>

Do you really need Three.js/WebGL for that?

Demo: [https://codepen.io/prisoner849/full/EaxmVxq](https://codepen.io/prisoner849/full/EaxmVxq)

---

<div class="post-metadata">

**Author:** ![thejessewinton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thejessewinton/32/59380_2.png) [@thejessewinton](https://discourse.threejs.org/u/thejessewinton)\
**Post date:** [May 16, 2025, 7:45pm UTC](https://discourse.threejs.org/t/simple-dotted-map-texture-with-map-markers/82693/3 "2025-05-16T19:45:16Z")

</div>

Maybe not, I’ve got a working version just drawing dots on a canvas, but the API feels very clunky to me.

---

<div class="post-metadata">

**Author:** ![thejessewinton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thejessewinton/32/59380_2.png) [@thejessewinton](https://discourse.threejs.org/u/thejessewinton)\
**Post date:** [May 16, 2025, 8:35pm UTC](https://discourse.threejs.org/t/simple-dotted-map-texture-with-map-markers/82693/4 "2025-05-16T20:35:10Z")

</div>

Digging into the code, this is very cool. My main concern, and why I was reaching for Three is some of the stylization features that I need/want to have, and the need for interactivity/markers on a specific point. I suppose there would be a way to translate a latitude and longitude that’s passed in to a specific point, and then add a tooltip- ideally as well, the tooltip would be independent of the scene, the map marker would just talk to a state machine and render the tooltip that way. I already have all of those pieces set up, my main concern was the map texture, solved here (thank you) and the markers.

---

<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:** [May 16, 2025, 10:57pm UTC](https://discourse.threejs.org/t/simple-dotted-map-texture-with-map-markers/82693/5 "2025-05-16T22:57:19Z")

</div>

Hi @thejessewinton …

My first thought was to adapt this @prisoner849 work:

> [@Globe with markers and label: thoughts, ideas, approaches, solutions](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995):
>
> Hi community! Picture: 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 slight_smile There are comments i…

[https://codepen.io/prisoner849/full/oNopjyb](https://codepen.io/prisoner849/full/oNopjyb)

to a flat surface.

PS: Other example:

> **[quadified\_git.html](https://jrlazz.github.io/anim/quadified_git.html)**
>
> World Lat & Long

---

<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:** [May 17, 2025, 4:36pm UTC](https://discourse.threejs.org/t/simple-dotted-map-texture-with-map-markers/82693/6 "2025-05-17T16:36:08Z")

</div>

Hi @thejessewinton …

Maybe this helps too…

> **[sprite\_click.html](https://jrlazz.github.io/anim/sprite_click.html)**
>
> Click on balls to bring sprites