Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Arc dash animation stops when labels are implemented #182

Open
dangrunebaum opened this issue Oct 27, 2023 · 5 comments
Open

Arc dash animation stops when labels are implemented #182

dangrunebaum opened this issue Oct 27, 2023 · 5 comments

Comments

@dangrunebaum
Copy link

dangrunebaum commented Oct 27, 2023 •
edited
Loading

Describe the bug
Arc dash animation halts when labels are implemented. (BTW thanks for your awesome library!)

To Reproduce

<script>
  import { getContext } from 'svelte'
  import { Html } from 'layercake'
  import Globe from 'globe.gl' //https://github.com/vasturiano/three-globe
  import { scalePow, scaleSequentialSqrt } from 'd3-scale'
  import connectionData from '../data/singapore-connections.csv'
  const { data, width, height } = getContext('LayerCake')

  let newData = []

  connectionData.forEach(d => {
    let startLat = +d.lat1
    let startLng = +d.long1
    let endLat = +d.lat2
    let endLng = +d.long2
    let count = +d.count
    let label = d.target
    let color = 'teal'
    newData.push({ startLat, startLng, endLat, endLng, count, label, color })
  })
  //   console.log(newData)

  let globeElm
  let world

  const powScale = scalePow().domain([0, 100]).range([0, 3]).exponent(0.5)

  const createGlobe = () => {
    if (globeElm) {
      world = Globe()
        // globe
        .globeImageUrl('./img-globe/color-version1.jpg')
        .bumpImageUrl('./img-globe/bump-map3.jpg')
        .backgroundColor('rgba(255,255,255,0)')
        .atmosphereColor('#222222')
        .atmosphereAltitude(0.01)(globeElm)
        .pointOfView({ lat: 1.29027, lng: 103.851959, altitude: 2 }) // aim at continental US centroid

        // arcs
        .arcsData(newData)
        .arcColor('color')
        .arcDashLength(0.9)
        .arcDashGap(0.01)
        .arcDashAnimateTime(4000)
        .arcStroke(d => powScale(d.count))
        .arcAltitude(d => (d.label === 'United States' || d.label === 'Iceland' || d.label === 'Canada' ? 0.35 : 0.15))
        .arcLabel(d => `${d.label}`)

        // labels
        .labelsData(newData)
        .labelLat(d => d.endLat)
        .labelLng(d => d.endLng)
        .labelText(d => d.label)
        .labelSize(1)
        .labelColor('black')

      // wait 1s for scene to be populated
      setTimeout(() => {
        // const ambientLight = scene.children.find(obj3d => obj3d.type === 'AmbientLight')

        // Controls
        const controls = world.controls()

        controls.enableZoom = false
        controls.enablePan = false
        controls.minDistance = 150
        controls.maxDistance = 250

        controls.rotateSpeed = 1
        controls.zoomSpeed = 0

        // controls.autoRotate = true
        controls.autoRotateSpeed = 1.0

        controls.minPolarAngle = Math.PI / 3.5
        controls.maxPolarAngle = Math.PI - Math.PI / 3

        // Material
        const globeMaterial = world.globeMaterial()
        globeMaterial.bumpScale = 12
        globeMaterial.transparent = true
        globeMaterial.opacity = 1

        const labelMaterial = world.scene()

        requestAnimationFrame(() =>
          (function animate() {
            requestAnimationFrame(animate)
          })()
        )
      }, 1000)
    }
  }

  const updateGlobe = () => {
    if (world) {
      world.width($width).height($height)
    }
  }

  $: globeElm, createGlobe()
  $: $width, $data, updateGlobe()
</script>

<Html>
  <div id="globe" bind:this={globeElm} style="width:{$width}px; height:{$height}px" />
</Html>

Expected behavior
Labels are expected to coexist with arc animation.

Screenshots
(https://github.com/dangrunebaum/dangrunebaum.github.io/blob/master/label-issue.mp4)

Desktop (please complete the following information):

  • OS: [MacOS]
  • Browser: [Chrome]
  • Version: [118.0.5993.88 ]
@vasturiano
Copy link
Owner

@dangrunebaum thanks for reaching out.

The issue here is that you're passing the same data object to two different layers. I.e. newData is being passed to the arcs and labels layer.

In order to avoid conflicts between the two layers it's better if you clone each of your data objects and pass them as separate items.

@dangrunebaum
Copy link
Author

Thanks that did the trick!

@dangrunebaum
Copy link
Author

And by the way, do you happen to know of any other globe images aside from the ones on Natural Earth? Specifically, I'm looking for one that simply shows oceans and land masses in different colors (e.g. blue for oceans, gray for land)?

@vasturiano
Copy link
Owner

@dangrunebaum NASA has a Blue Marble collection that might have something like that:
https://visibleearth.nasa.gov/collection/1484/blue-marble

@dangrunebaum
Copy link
Author

@vasturiano Thanks, very helpful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vasturiano @dangrunebaum