Hexed polygon is too slow to render up.

[sourabpramanik]

Describe the bug I am using the hexed polygon example and modified it a bit but for some reason, it is prolonged to render in the browser and the browser may crash sometimes. On safari, it always crashes. What am I doing wrong?

import { countries as data } from "./countries.js";
import { handleGlobeClick } from "./index.js";

const colorScale = d3.scaleSequentialSqrt(
  d3.interpolateRgbBasis(["#C3CABD", "#F6F1D1", "#70A9A1", "#40798C"])
);

// GDP per capita (avoiding countries with small pop)
const getVal = (feat) =>
  feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);

let canvasWidth = window.innerWidth/2;
if(window.innerWidth<=768){
  canvasWidth=window.innerWidth*0.8;
}

fetch("./dataset.geojson")
  .then((res) => res.json())
  .then((countries) => {
    const maxVal = Math.max(...countries.features.map(getVal));

    colorScale.domain([0, maxVal]);

    const world = Globe()
      .globeImageUrl("/static/images/globe-texture.png")
      .backgroundColor("#ffffff00")
      .lineHoverPrecision(0)
      .polygonsData(
        countries.features.filter((d) => d.properties.ISO_A2 !== "AQ")
      )
      .polygonAltitude(0.06)
      .polygonCapColor((feat) => colorScale(getVal(feat)))
      .polygonSideColor(() => "rgba(0, 6, 17, 0)")
      .polygonStrokeColor(() => "#111")
      .polygonLabel(
        ({ properties: d }) => `
  <h4 class="label">${d.ADMIN}</h4>
`
      )
      .onPolygonClick((d1) => {
        const value = data.find(
          (d2) => d1.properties.ISO_A2.toLowerCase() === d2.code
        );
        if (value) {
          handleGlobeClick(value.country, value.code, value.flag);
          document.getElementById("compare-section").scrollIntoView({
            behavior: "smooth",
          });
        }
      })
      .onPolygonHover((hoverD) =>
        world.polygonAltitude((d) => (d === hoverD ? 0.12 : 0.06))
      )
      .polygonsTransitionDuration(300)(document.getElementById("globe"))
      .pointOfView({ altitude: 2 })
      .width(canvasWidth)
      .height(window.innerHeight * 0.8);

    world.onGlobeReady(() => {
      document.querySelector(".loading").classList.add("hide");
      world.controls().autoRotate = true;
      world.controls().autoRotateSpeed = 1.8;
      // world.controls().enableZoom = false;
      setTimeout(() => {
        world.controls().autoRotate = false;
        world.controls().autoRotateSpeed = 0;
      }, 7000);
    });

  });

To Reproduce Steps to reproduce the behavior: NONE

Expected behavior It should be loading up as fast as the example does.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: All
• Browser: All
• Version: [e.g. 22]

Smartphone (please complete the following information):

• Device: All
• OS: All
• Browser: All
• Version: [e.g. 22]

Additional context Add any other context about the problem here.

[vasturiano]

@sourabpramanik thanks for reaching out.

It seems you are using the standard polygons layer, not the hexed polygons layer in your example, is that correct?

Do you also experience your issue with the built-in example for polygons? https://globe.gl/example/choropleth-countries/

In any case if you are still experiencing an issue, it's better to create a reproducible example on https://codepen.io/ so that we can have a closer look.

[sourabpramanik]

The problem was because of the texture which got sorted, so closing the issue.