I found a JavaScript library to create a spinning globe that will highlight given countries, US states, and world regions. We're using it to spruce up our mission trips page.

I've got it working from a shortcode, so hopefully it can be easily set up on any Rock instance. Here's a sample lava script calling the shortcode:

{[ globe ]}

    [[ location name:'Kenya' lat:'0.0236' lng:'37.9062' ]][[ endlocation ]]
    [[ location name:'Texas' lat:'31.9686' lng:'-99.9018' ]][[ endlocation ]]


    [[ detail location:'Kenya' title:'Summer 2026 - Medical Mission' dates:'July 12 - July 20, 2026' link:'https://yourchurch.org/missions/kenya-medical' description:'Providing medical and dental services in rural villages.' ]][[ enddetail ]]
    [[ detail location:'Texas' title:'Texas Border Relief Trip' dates:'March 1 - March 5, 2026' link:'https://yourchurch.org/missions/texas-relief' description:'Supporting local partners with humanitarian aid and infrastructure repair.' ]][[ enddetail ]]
    [[ detail location:'Texas' title:'Dallas Inner City Outreach' dates:'September 8, 2026 (Weekend)' link:'https://yourchurch.org/missions/dallas' description:'Local outreach supporting homeless ministry and school events.' ]][[ enddetail ]]

{[ endglobe ]}

Here's the shortcode markup: Spinning_Globe.lava

It's configured as Block type shortcode with tag name "globe". I also included parameters "startlat" and "startlng", defaulted to our church's longitude and latitude (so the globe starts there on page load) and a "tripterm" parameter (which I defaulted to "Trip").

This shortcode uses 2 sets of configurations, one called "location" which stores the locations that will load on the sidebar (and the long/lat they will move to):

[[ location name:'Kenya' lat:'0.0236' lng:'37.9062' ]][[ endlocation ]]

The second called "detail, stores the information/trips related to each location:

[[ detail location:'Kenya' title:'Summer 2026 - Medical Mission' dates:'July 12 - July 20, 2026' link:'https://yourchurch.org/missions/kenya-medical' description:'Providing medical and dental services in rural villages.' ]][[ enddetail ]]

A couple things to note:

• This code was adapted using Gemini from a demo at https://observablehq.com/@d3/world-tour. We've got it live on our mission trips page, but it may take some playing with the CSS to fit your page's styling.
• I moved the css color variables to the top of the style block to make it a little easier to style.
• The script should have access to every country and US state. There's some additional code for it to recognize some regions (Middle East, Central Asia, North Africa, etc) that you might want to highlight instead of a specific country. If you look at the script, it lets you set a list of those regions with the corresponding countries. If you follow the pattern you should be able to add to/modify any of those.
• Feel free to reach out on RocketChat with any improvement/suggestions: @david.axelson