Giter Site home page Giter Site logo

Cannot Update Arcs Data about globe.gl HOT 7 CLOSED

vasturiano avatar vasturiano commented on May 13, 2024
Cannot Update Arcs Data

from globe.gl.

Comments (7)

vasturiano avatar vasturiano commented on May 13, 2024 1

@ttK5050 thanks for reporting this!

Would you mind making a simple reproducible example with your case on https://codepen.io/ . That'll make it easier to debug the issue. 👍

from globe.gl.

lslzl3000 avatar lslzl3000 commented on May 13, 2024 1

@ttK5050 please try to use codepan or something to show the full demo.
I have tested changing arcStroke dynamically in my code. It works fine with my data or the demo data. It should not have any problems.
My best guess is that there is something wrong with your data format... anyway, please give us a full demo to test.

from globe.gl.

ttK5050 avatar ttK5050 commented on May 13, 2024 1

@vasturiano Thanks very much for your help - just solved the issue after working a bit with your example!

As @lslzl3000 pointed out, it was in fact some sort of data issue. I'm using Django as a backend framework, and I pass a JSON "dump" string to my frontend webpage where I parse it into a data structure using JSON.parse(). I'm still not sure why this particular instance of receiving and parsing JSON data caused such distress (and if it will to anyone else), especially because it worked without trouble when used statically.

In any case, I used a snippet of your code to take my (faulty?) JSON data and put what I need in a new data structure...

const arcsData = [...Array(usersJSONObjects.length).keys()].map(x => ({
          startLat: 42.98,
          startLng: -70.94,
          endLat: usersJSONObjects[x].loc_lat,
          endLng: usersJSONObjects[x].loc_lon
}));

...and it works! I should have thought to look into this deeper earlier, so thanks so much for your patience! Your framework rocks 😄!

from globe.gl.

ttK5050 avatar ttK5050 commented on May 13, 2024

Hi @vasturiano, thanks for the reply! Attached below is a simple example of the problem: if you would like, I could try to put it on code sandbox or codepen but I'm not very familiar with them. Hope this is okay, and thanks again for maintaining this!

<!DOCTYPE html>
<html>
  <head>
    <title>Arc Issue Demo</title>
    <!-- IMPORT GLOBE.GL -->
  </head>

  <body>
    <div id="globeViz"></div>

    <script>
      //some sample data: two objects with some basic attributes
      var sampleJSONData = [
        {
          first_name: "Mexico City",
          loc_lat: "19.4326",
          loc_lon: "-99.1332"
        },
        {
          first_name: "Seattle",
          loc_lat: "47.6062",
          loc_lon: "-122.3321"
        }
      ];

      //create a basic globe
      var world = Globe({ waitForGlobeReady: true });
      world = world(document.getElementById("globeViz"))
        .globeImageUrl(
          "https://unpkg.com/[email protected]/example/img/earth-night.jpg"
        )
        .pointOfView({ lat: 0, lng: 0, altitude: 0.1 }, 3000)
        .showGraticules(true);

      //add the objects as labels to the globe
      //this is to show how the feature should work
      //note that the label size is set to 0.3
      world
        .labelsData(sampleJSONData)
        .labelLat(labels => labels.loc_lat)
        .labelLng(labels => labels.loc_lon)
        .labelText(labels => labels.first_name)
        .labelAltitude(() => 0.001)
        .labelColor(labels => "white")
        .labelSize(() => 0.3)
        .labelDotRadius(() => 0.3)
        .labelDotOrientation(() => "bottom");

      //now, we add add arcs from a predifined "hub" to these cities
      //note that the stroke is set to 0.005
      world
        .arcsData(sampleJSONData)
        .arcLabel(() => "")
        .arcStartLat(() => "42.9814")
        .arcStartLng(() => "-70.9478")
        .arcColor(() => ["#ff0000", "#cfcfcf"])
        .arcEndLat(arcs => arcs.loc_lat)
        .arcEndLng(arcs => arcs.loc_lon)
        .arcStroke(() => 0.005);

      //great, setup is complete!

      //now, 5 seconds after load, let's try to change the size of the labels
      setTimeout(function() {
        alert("changing label size");
        world.labelSize(() => 0.06);
        alert("finished changing label size");
      }, 5000);

      //then, 10 seconds after load, try to change the arc stroke
      setTimeout(function() {
        alert("changing ARC STROKE size");
        world.arcStroke(() => 0.1);
        alert("finished changing ARC STROKE");
      }, 10000);
			
    </script>
  </body>
</html>

from globe.gl.

ttK5050 avatar ttK5050 commented on May 13, 2024

Hi @lslzl3000, thanks for the feedback. I suppose the main trouble for me is how to import and get all the dependencies to work on Codepen... if you could give me a quick pointer on how best to do that I'd much appreciate it 🙂 and get it done right away.

I have to admit, the sample code I posted actually does seem to work on my system as well. I should have tested it better, my bad. Some explanation about my actual setup. I create a new var globe object upon the loading of the page. I immediately create a set of arcs data and a set of labels data. I then bind an onZoom function to the globe so that I can dynamically scale the size of my labels and the user zooms in and out. Here's the simple function:

function updateSizes(pos){
            if (pos.altitude>0.4) {
                world.labelSize(() => (0)).labelDotRadius(() => (0.06+pos.altitude/2.5));
                
                //world.arcStroke(() => 1);
                //above line should work, but causes error shown in OP
            } else if (pos.altitude<0.07) {
                world.labelSize(() => 0.06).labelDotRadius(() => 0.02).labelAltitude(() => 0.001);
            } else {
                 world.labelSize(() => 0.06+pos.altitude/2.5).labelDotRadius(() => 0.06+pos.altitude/2.5);
            }
        }

I tweaked around with my code and tried changing the arc stroke at a different point in my code (say, right after initializing the arc objects) - and it worked as you said it would. That made me further confused about what was causing the error because when I try changing the arc stroke of the world object right next to where I'm changing the label size in the onZoom function, it gives me the error I mentioned.

But I must be missing something or doing something wrong elsewhere that isn't clear through snippets, so I'll post a full code example when I can and after a helping hand 😉. Thanks so much for all your help!

from globe.gl.

ttK5050 avatar ttK5050 commented on May 13, 2024

Sorry for the lack of a working example, still am unsure of how to do so properly - but I noticed something interesting that may help in pinning down the problem.

I am using both Arcs data and Labels Data in my project, something I don't think I saw in the examples (i.e. using multiple forms of objects at the same time). The first static initialization of both forms work great, something like this:

            world.labelsData(finalJSON)
            .labelLng(labels => labels.loc_lon)
            .labelText(labels => labels.first_name)
            .labelAltitude(() => 0.001)
            .labelColor(labels => setColor(labels))
            .labelSize(() => 0.3)
            .labelDotRadius(() => 0.3)
            .labelDotOrientation(() => "bottom")
            .onLabelHover(onHover)
            .onLabelClick(onClick).arcLabel(() => '');
            

            world.arcsData(usersJSONObjects)
            .arcStartLat(arcs => +arcs.start_lat)
            .arcStartLng(arcs => +arcs.start_lon)
            .arcEndLat(arcs => +arcs.loc_lat)
            .arcEndLng(arcs => +arcs.loc_lon)
            .arcColor(() => ['#ff0000', '#cfcfcf'])
            .arcStroke(() => 0.015);

Editing them on the fly is where the issue arises. Oddly, if I only include arcs objects and leave out the labels objects, the arcs respond just fine to having their properties change later (e.g. onZoom() function). Likewise for the labels objects, when initialized on their own without arcs, there is no problem in adjusting them later.

       world.onZoom(function onZoom (pos) {

            //this line works fine - only when the labels don't exist
            world.arcStroke(() => (pos.altitude/8.5));

            //changing the label size seems to work with or without arcs data being present, adding to the mystery... :)
            if (pos.altitude>0.4) {
                world.labelSize(() => (0)).labelDotRadius(() => (0.06+pos.altitude/2.5));
            } else if (pos.altitude<0.07) {
                world.labelSize(() => 0.06).labelDotRadius(() => 0.02).labelAltitude(() => 0.001);
            } else {
                 world.labelSize(() => 0.06+pos.altitude/2.5).labelDotRadius(() => 0.06+pos.altitude/2.5);
            }

        });

It's only when I have two types of objects on the Globe that the framework has a problem.

Note that I set the initial arc stroke to 0.015. Here, in my onZoom function, I try to scale it up to 0.5 for the sake of testing. It seems to work, changing the stroke to 0.5. However, after that first change to the stroke size from the onZoom function, every call after begins to throw the 'Uncaught TypeError' as before and refuses to adjust the arc stroke further.

Again, I understand that you can't provide proper assistance without a working example, as my case may be unique to my setup or data, etc. But I thought that I would let you know that it seems to only fail when I have two different types of objects (arcs and labels), so it might have some roots in the underlying framework...

Thanks so much!

from globe.gl.

vasturiano avatar vasturiano commented on May 13, 2024

@ttK5050 thanks for looking deeper into this.

I've tested the two layers together (arcs and labels) and am unable to reproduce the issue.
I've actually put together a codepen for it: https://codepen.io/vasturiano/pen/gOPNVdO

It would be great if you could extend that codepen to a point that it reproduces the problem, otherwise it's quite difficult to troubleshoot it.

from globe.gl.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.