vasturiano / react-globe.gl

React component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/react-globe.gl/example/world-population/
MIT License
866 stars 155 forks source link

Cannot use ARCs with HexPolygonData #103

Open amandugar opened 1 year ago

amandugar commented 1 year ago

II am trying to use arcs with hexpolygonsdata and the arcs are not visible then

image

 <Globe
          globeImageUrl="//unpkg.com/three-globe/example/img/earth-dark.jpg"
          arcsData={arcsData}
          arcColor={"color"}
          arcDashLength={1}
          arcDashGap={1}
          arcDashAnimateTime={() => Math.random() * 4000 + 3000}
          backgroundColor={"white"}
          height={630}
          width={630}
          animateIn={true}
          hexPolygonsData={globeData.features}
          hexPolygonResolution={3}
          hexPolygonMargin={0.7}
          showAtmosphere={true}
          atmosphereColor={"#3a228a"}
          atmosphereAltitude={0.25}
          hexPolygonColor={e => {
            if (
              ["KGZ", "KOR", "THA", "RUS", "UZB", "IDN", "KAZ", "MYS"].includes(
                e.properties.ISO_A3
              )
            ) {
              return "rgba(255,255,255, 1)";
            } else return "rgba(255,255,255, 0.7)";
          }}

Otherwise its working perfectly fine

image

<Globe
          globeImageUrl="//unpkg.com/three-globe/example/img/earth-dark.jpg"
          arcsData={arcsData}
          arcColor={"color"}
          arcDashLength={1}
          arcDashGap={1}
          arcDashAnimateTime={() => Math.random() * 4000 + 3000}
          backgroundColor={"white"}
          height={630}
          width={630}
          animateIn={true}
          //hexPolygonsData={globeData.features}
          hexPolygonResolution={3}
          hexPolygonMargin={0.7}
          showAtmosphere={true}
          atmosphereColor={"#3a228a"}
          atmosphereAltitude={0.25}
          hexPolygonColor={e => {
            if (
              ["KGZ", "KOR", "THA", "RUS", "UZB", "IDN", "KAZ", "MYS"].includes(
                e.properties.ISO_A3
              )
            ) {
              return "rgba(255,255,255, 1)";
            } else return "rgba(255,255,255, 0.7)";
          }}
        />
amandugar commented 1 year ago

@vasturiano

vasturiano commented 1 year ago

@amandugar could you please make an online example on codesandbox, that shows the issue?

Jack-G-T commented 1 year ago

Has there been any progress on this issue? I'm encountering the same thing with a HexPolygon layer and attempting to render some arcs.

It seemed as though certain coordinates were preventing it from rendering as it worked initially with one configuration of 4 arcs, then failed when i changed the lat/long position of a couple of the starting points. It eventually failed altogether and the original positions don't work any more!

Also, not sure if it's worth creating another issue as I think it's more likely a problem with the way i've set it up but the arc layer coordinates don't seem to match up with the html element layer coordinates.