vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.99k stars 298 forks source link

Stop rotation onPolygonHover #68

Closed paco020295 closed 2 years ago

paco020295 commented 2 years ago

I am using this code. How can I stop rotation of the globe onPolygonHover?

const world = Globe()
          .globeImageUrl('{% static 'cvApp/images/world-blue.jpg' %}')
          .lineHoverPrecision(0)
          .width(document.getElementById("globeContainer").offsetWidth)
          .height([window.innerHeight/1.5])
          .backgroundColor("rgba(0,0,0,0)")
          .polygonsData(countries.features.filter(d => d.properties.count > 0))
          .polygonAltitude(0.02)
          .polygonCapColor(feat => colorScale(getVal(feat)))
          .polygonSideColor(() => 'rgba(0, 100, 0, 0.15)')
          .polygonStrokeColor(() => '#111')
          .polygonLabel(({ properties: d }) => `
            <div class="info-board"><b style="color:green;">${d.admin} (${d.iso_a2}):</b> <br />
            Reviews: <i>${d.count}</i></div>
          `)
          .onPolygonHover(hoverD => world
            .polygonAltitude(d => d === hoverD ? 0.12 : 0.06)
            .polygonCapColor(d => d === hoverD ? 'green' : colorScale(getVal(d)))
          )
          .onPolygonClick(ShowConsole)
          .polygonsTransitionDuration(300)
        (document.getElementById('globeViz'))
        world.controls().autoRotate = true;
vasturiano commented 2 years ago

@paco020295 something like this in your onPolygonHover method:

world.controls().autoRotate = !hoverD;
paco020295 commented 2 years ago

Got it. Thank you very much