Markers on Zoomable Globe are always visible?

[Unionindesign]

Hello!

Normally I'd spend a little more time debugging, but having fun with the Zoomable globe component and wondering why, if I map through an array of coordinates to generate map markers, these are not hidden if they appear on the backside of the globe? For example, if you are centered on New York, and Map marker for Sydney Australia will still be visible from the otherside of the map?

I've been learning to do maps the hard way ("not simple") in D3, which suggests that you can make the whole globe transparent by setting the clipAngle to 180 instead of 90. Since the map itself is not transparent, except when you add markers, this does not seem to do anything. Any ideas?

[zimrick]

Hi @Unionindesign, Did you try adding a hidden style for the markers?

<Marker
  style={{
    hidden: { opacity: 0 },
  }}
>
  ...
</Marker>

It should apply this style automatically to the markers that are on the back side of the globe. Let me know if this works out for you.

[Unionindesign]

Works like a charm! thanks!

[sasukgan]

Hi @Unionindesign, Did you try adding a hidden style for the markers?

<Marker
  style={{
    hidden: { opacity: 0 },
  }}
>
  ...
</Marker>

It should apply this style automatically to the markers that are on the back side of the globe. Let me know if this works out for you.

I have the same issue and the hidden style doesn't seem to work for me. Looking at the documentation, it specifies only default, hover and pressed in style states.

[sasukgan]

I have the same issue and the hidden style doesn't seem to work for me. Looking at the documentation, it specifies only default, hover and pressed in style states.

For instance, I'm using stream from d3-geo projection:

const newStream = [];
const stream = projection.stream({
     point: (x, y) => {
          newStream.push([x, y]);
     },
});
stream.point(long, lat);
return newStream.length; // empty if the point of [long, lat] is not visible in the projection