Using HTML Element Layer Removes All Arcs

[dunlavy]

Globe({ animateIn: false, waitForGlobeReady: true })
    .width(width)
    .backgroundColor("#FFFFFF00")
    .globeImageUrl("/assets/earth.jpg")
    .showAtmosphere(false)
    .onPolygonClick((polygon, ev, { lat, lng }) => polyClickHandler(polygon, lat, lng))
    .arcsData(<any>advisorFeatures)
    .arcColor("color")
    .arcDashAnimateTime(3000)
    .arcDashGap(() => getRandomInteger(3, 5))
    .arcDashInitialGap(() => getRandomFloat(1, 5))
    .arcDashLength(0.75)
    .arcStroke(1)
...

The above code works and shows data in the arc layer.

But, is there a bug when we add HTML elements?

Simply appending to the code above; I will see my HTML data layer but not the original arc data to go along with it:

Globe({ animateIn: false, waitForGlobeReady: true })
    .width(width)
    .backgroundColor("#FFFFFF00")
    .globeImageUrl("/assets/earth.jpg")
    .showAtmosphere(false)
    .onPolygonClick((polygon, ev, { lat, lng }) => polyClickHandler(polygon, lat, lng))
    .arcsData(<any>advisorFeatures)
    .arcColor("color")
    .arcDashAnimateTime(3000)
    .arcDashGap(() => getRandomInteger(3, 5))
    .arcDashInitialGap(() => getRandomFloat(1, 5))
    .arcDashLength(0.75)
    .arcStroke(1)
// adding new layer data below
    .htmlElementsData(<any>advisorFeatures)
    .htmlElement((d: any) => {
        const img = document.createElement("img");
        img.style.width = "50px";
        img.src = `/assets/${d.pinURL}`;

        return img;
    })
    .htmlAltitude(0.01)
    .htmlLat((d: any) => d.startLat)
    .htmlLng((d: any) => d.startLng)

Now I have a globe but WITHOUT the arcs.

BTW, thank you for this package.

[vasturiano]

@dunlavy thanks for reaching out.

The cause is that you're using the same data structure (advisorFeatures) for both layers. So the second layer wipes out the first. You should instead clone your data structure objects so that you're passing different ones for each layer. That should get them to work simultaneously.

[dunlavy]

Thank you. I came back to the issue to comment that I can tell the arc data is there because of mouse hover:

I will clone the data to see if the behavior changes. At this point it appears to be a rendering issue.

Furthermore, reversing the order of the layers doesn't produce different behavior (i.e. the arcs override the appearance of the pins). It seems HTML > arcs.

[dunlavy]

After updating the code: .htmlElementsData(<any>advisorFeatures)

with: .htmlElementsData([...<any>advisorFeatures]) // clone array

The issue still persists. Thank you for the feedback on this issue!

[dunlavy]

I even tried slightly mutating the lat / lng in case duplicated points on the map cause for this behavior. No luck with that either.

[dunlavy]

You are correct. My code did not adequately replace all the of the object references within the array. After completely fetching two distinct sets of objects, it works beautifully. Thanks again for this package.

Edit: It's kind of strange I could hover and get the arc path though the rendering was not visible. Anyway, good documentation here in case anyone repeats my mistakes and observes the same things. 😃