I want to create a globe news website using three js where a user can view the worlds globe and hover over a label for each country to see a widget of the top news story from that country for that day, I have already started using globe.gl for the globe and labels but I am unsure how to implement Add BBC News to Your Website with HTML and RSS feed Widgets rss bbc news widgets into the labels so they are displayed when hovering over them, I assume I would need to create a json file with data of the latitude, longitude, country name and html widget embed, although I am unsure what a html widget embed actually looks like so far I am using vs code as the Integrated development environment and have cloned the repo for globe.gl from GitHub, I am going to use the moon landing sites https://globe.gl/example/moon-landing-sites/index.html globe.gl example https://globe.gl as a starting base, I know how to replace the moon texture with an earth texture, I know how to re label each landing site to the labels of each country, I can’t find a good json file with the latitude and longitude for each country, I found country-codes-lat-long/country-codes-lat-long-alpha3.json at e20f140202afbb65addc13cad120302db26f119a · eesur/country-codes-lat-long · GitHub on google but unsure if
{
“ref_country_codes” : [
{
“country” : “Albania”,
“alpha2” : “AL”,
“alpha3” : “ALB”,
“numeric” : 8,
“latitude” : 41,
“longitude” : 20
},
is the correct latitudes as they usually look like
“lat”: -3.64450,
“lng”: -17.47753,
or at least that’s how they appear in the moon landing sites json file from globe gl
lastly I don’t know how to isolate each rss widget from Add BBC News to Your Website with HTML and RSS feed Widgets and append it to the would-be json file for the country data so each news widget displays when you hover over a country label.
It seems like 41 20 as lat long values land in Albania, these must be localised /normalised values that suit both the api and common lat long conventions
Can you rephrase this question with some reference to your use case (image / live example) does the BBC news api require the lat long values to deliver a localised news feed based on said values?
Alright here is a live example of what I am trying to create: https://globe.gl/example/moon-landing-sites/ here is the source code: globe.gl/index.html at 7dc68f5a3338efea883b5a64fcbc4ab5668a68f1 · vasturiano/globe.gl · GitHub I have cloned this GitHub repository into visual studio code so this is what I am working with at the moment, the only thing that’s missing from the live example are the news widgets that I would want to be displayed when the mouse is hovering over the label and of course instead of the moon texture and moon labels it would be the earth texture and country labels, the news api is from the rss feed website it does not require lat and long values to deliver a localised news feed, its actually just a news wall that you can paste into your website using “” I want to isolate each widget from that wall and make it display for each country in the country json file, that way when my makes a call to the json file for all the label information i.e - position, text to be displayed, etc, it can just display the news widget as well, here is the json file for the live example: globe.gl/moon_landings.json at 7dc68f5a3338efea883b5a64fcbc4ab5668a68f1 · vasturiano/globe.gl · GitHub
I hope I understand what you mean and will give a try at answering
To start, you would need to find the embedded country of each news widget (not sure how on this part)
To update the relative json entry you would parse and filter your json to return the json country in question, appending the result simply with yourFilterResult.newsWidget = yourReferenceToTheRelativeNewsWidget.
Ok, I have managed to embed a ticker widget from Embed BBC Widget Demo RSS feed to the top of my page, I have also added an earth texture with atmosphere to replace the moon texture, all that’s left is to change the labels to the labels of each country and display the widgets when mouse is hovering over these labels view here https://shange-fagan.github.io/globe.news/ or see image , for the country labels I’m thinking of using country-codes-lat-long/country-codes-lat-long-alpha3.json at e20f140202afbb65addc13cad120302db26f119a · eesur/country-codes-lat-long · GitHub and changing it to the format of the original json file from the moon landings example, for some reason I think this format is needed for
src=“//unpkg.com/d3-array”>
src=“//unpkg.com/d3-scale”> which is called when allocating each label to its location on the globe:
.labelLabel(d => <div><b>${d.label}</b></div> <div>${d.agency} - ${d.program} Program</div> <div>Landing on <i>${new Date(d.date).toLocaleDateString()}</i></div> )
.onLabelClick(d => window.open(d.url, ‘_blank’))
(elem);
thanks, I get that now, I am unsure what to put in “fetch(‘./country_codes.json’).then(r => r.json()).then(whatdoIputhere => {
moon.labelsData(whatdoIoputhere);” I am also unsure what to put in “.labelsData()” I have seen the documentation and examples: globe.gl/index.html at 7dc68f5a3338efea883b5a64fcbc4ab5668a68f1 · vasturiano/globe.gl · GitHub but since the json file in the example is geojson I cannot see what .labelsData(places.features) actually does. in the example they have put “places” in the fetch code: “fetch(‘…/datasets/ne_110m_populated_places_simple.geojson’).then(res => res.json()).then(places => {” but as mentioned the geojson format prevents me from viewing the properties of that particular json file, and in the moon landing example globe.gl/index.html at 7dc68f5a3338efea883b5a64fcbc4ab5668a68f1 · vasturiano/globe.gl · GitHub they have put “landingSites” in the fetch code: fetch(‘./moon_landings.json’).then(r => r.json()).then(landingSites => {
moon.labelsData(landingSites); but I can see no where has landingSites been used in the moon_landings.json file, lastly I have checked the json object structure JSON Object Structure and I cannot see where I would put the embed code for my widget into the key value pairs, they accept strings, numbers, floats, arrays, boolean, and object, I am not sure if the embed code would count as an object
No, the request headers are send with the xhr request, in your case you’re using fetch which uses similar nexwork requests, landingSites is a mere variable name to reference the returned result, I did try to plug in your secondary json file with an error that the array of objects is not itterable, this says to me that the globe.gl api requires a certain formatted type of itterable array of objects, I’m not sure what the method would be but can you try to reformat just one entry in your required json to match the moon landings one and try with that one json result, if this doesn’t work it may be something to do with the geojson format you mentioned before
so I can just change LandingSites variable to any word and it will put the correct latitude and longitude labels for each country as long as I use “fetch(‘https://raw.githubusercontent.com/eesur/country-codes-lat-long/e20f140202afbb65addc13cad120302db26f119a/country-codes-lat-long-alpha3.json’)” and “.then(r => r.json())”? Also I thought the formatting might be highly specific so it might be worth me asking in the issues section on the globe gl GitHub page if its actually possible to add an embed link as one of the parameters in each section of the json file
I am a bit confused with how to use codepen, when I run the code I am unable to see any errors in the console? https://codepen.io/forerunrun/pen/YzayQbg
Edit- I think I found a fix for the incorrect formatting issue with the new json file, you can manually set .labelLat(d => d.properties.latitude)
.labelLng(d => d.properties.longitude) I am trying but I cannot see any errors in the console
