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:
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:
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.
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.
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.)