Will html news widget embed work for html markers example?

Shange-Fagan commented 1 year ago

I want to create a webpage that displays html news widgets on a globe, I have the globe and I have the html news widget but I don't know how to implement the widget into the code so that it displays on the globe.

the globe I have so far:

the widget:

the embed:

my code:

        <head>
          <style> body { margin: 0; } </style>

  <script src="//unpkg.com/globe.gl">        </script>
<!--  <script src="../../dist/globe.gl.js"></script>-->
</head>

<body>
 <div id="globeViz"></div>
    <rssapp-wall id="tszZCksFzEB4w9UN"></rssapp-wall>
<script> 
//this is where I have chosen to put the html embed
  var my_awesome_script = document.createElement('script');

    my_awesome_script.setAttribute('src','https://widget.rss.app/v1/wall.js');
     my_awesome_script.async = true;

    document.head.appendChild(my_awesome_script);

   // Gen random data
  const N = 30;
  const gData =         [...Array(N).keys()].map(() => ({
    lat: (Math.random() - 0.5) * 180,
    lng: (Math.random() - 0.5) * 360,
    size: 7 + Math.random() * 30,
    color: ['red', 'white', 'blue',   'green'][Math.round(Math.random() * 3)],
    url: "https://widget.rss.app/v1/wall.js"
  }));

  Globe()
   .globeImageUrl('//unpkg.com/three-  globe/example/img/earth-blue-marble.jpg')
    .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')   
    .backgroundImageUrl('//unpkg.com/three-  globe/example/img/night-sky.png')
   .htmlElementsData(gData)
    .htmlElement(d => {
    const el =   document.createElement('div');
      el.innerHTML = my_awesome_script;
      el.style.color = d.color;
      el.style.width = `${d.size}px`;

          el.style['pointer-events'] = 'auto';
        el.style.cursor = 'pointer';
        el.onclick = (d => window.open(d.url, '_blank'));
       return el;
     })
     (document.getElementById('globeViz'));
</script>
</body>

currently with the code like this I am getting no errors but as you can see the news widget is not being displayed, any advice on how I can make this thing work?

vasturiano commented 1 year ago

@Shange-Fagan I believe the issue is that you're setting the innerHTML of your element to a script object. The innerHTML attribute should be set to a string instead, as you can see here: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Shange-Fagan commented 1 year ago

@Shange-Fagan I believe the issue is that you're setting the innerHTML of your element to a script object. The innerHTML attribute should be set to a string instead, as you can see here: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

What do I set if I don't want it to be a string? what if I want to display a html page instead of a marker?

vasturiano commented 1 year ago

@Shange-Fagan you can set the content to any html you like. It's just that if you populate your elements using innerHTML, the assignment needs to be a string. This is not globe.gl specific, it's standard Javascript.

But essentially, you can include any html content you'd like in those items.

Shange-Fagan commented 1 year ago

I have tried populating the html element using

    .htmlElement(d => {my_awesome_script});

and

    .htmlElement(my_awesome_script)

but with no success, does it not work if the content of the html element is a url? for example my_awesome_script is simply:

       var my_awesome_script = document.createElement('script');

        my_awesome_script.setAttribute('src','https://widget.rss.app/v1/wall.js');
        my_awesome_script.async = true;
        my_awesome_script.style.display = "flex";

Edit: still trying to no success, seems weird because I have followed all the instructions for properly embedding the news feed and setting the content of my htmlElemement yet I am unable to get the content to display

I was thinking maybe if I set the background to transparent the widget will appear on the globe is there something wrong with this code?:

    <head>
      <style> body { margin: 0; } </style>

      <script src="//unpkg.com/globe.gl"></script>
    <!--  <script src="../../dist/globe.gl.js"></script>-->
    </head>

    <body>
    <div id="globeViz"></div>
    <rssapp-wall id="tszZCksFzEB4w9UN"></rssapp-wall>

    <script>

      var my_awesome_script = document.createElement('script');
        my_awesome_script.type = 'text/javascript';
        my_awesome_script.async = true;
        my_awesome_script.setAttribute('src','https://widget.rss.app/v1/wall.js');
        my_awesome_script.style.background = 'transparent';
         my_awesome_script.style.position = 'static';

      // Gen random data
      const N = 30;
      const gData = [...Array(N).keys()].map(() => ({
        lat: 54, //latitude and longitude for london
        lng: -2,
        width: (24),
        height: (30),
      }));

      const elem = document.getElementById('globeViz');
      Globe()
        .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
        .htmlElementsData(gData)
        .htmlElement(d => {

    return my_awesome_script

    })

        (elem);

    </script>
    </body>

vasturiano / globe.gl

Will html news widget embed work for html markers example? #129