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

#component-geo-get-current-position

The button asks the browser for location

It has custom attribute data-geo-get-current-position="1"

Once the location is known, it emits a geo-get-current-position event.

TBD: How can we wire event listeners without custom code?

State chart POC: each state's style and button text are defined as a separate buttons inline here.

This one is testing a concept to be able to style all of the states of an interactive component in the designer:

1. Copy the whole #component-geo-get-current-position div to your page
   
2. Style the 5 states of the button as you like
3. Copy the demo button to your design
4. Hide the #component-geo-get-current-position div

Requires

• https
• button with custom attribute data-geo-get-current-position

Place data is parsed and saved to each place el.value

To make other place-based scripts easier, we'll parse the coordinates from the DOM of elements with data-geo-place attribute, and save them to el.value (and data-geo-value attribute).

TBD: standard way to make CMS data available to scripts. Stringy DOM stuff and JSON parsing are not the interesting bits of programming, and Webflow has a nice interface for typed data modeling.

Sort a list of locations by distance from x

TBD: how to generalize this? For now it is just custom code that listens to the custom event from the (Geo--getCurrentPosition) button above, and sorts the locations in the list by the globe. It would be cool if the globe could also provide the center location, or another component with address input → geocoding service. Starting to feel like a dataflow wiring viz would make sense.

Requires

• #component-geo-get-current-position
• Place data is parsed and saved to each place el.value
• A list of places

#component-geo-map

Leaflet (2d) map

Gets locations with the same pattern as the globe above: data-geo-map="2" for the map div and data-geo-place="2" for the places.

(We're using 2 in the demo below to keep this map and locations separate from the 3d globe demo at the top of the page.)

Requires

• Place data is parsed and saved to each place el.value