The globe is populated with places from the collection

The globe element has the custom attribute data-geo-globe="1"

The collections list item has the custom attribute data-geo-place="1"

The element with the coordinates in each item has the custom attribute data-geo-coordinates="1"

View the script block source below for the magic, or copy the embed element if you've cloned the site 👇

The script:

• loads the WebGL Earth library and starts the globe with Open Street Map tiles
• copies the html for each data-geo-place element to a marker for the globe
• adds click listeners to those place elements to open the marker and pan to it