Geo Components 🌐💙

Globes and stuff for Webflow!



Share location, and sort by distance
loading globe...

Non Atque Ut


Ab Et


Voluptas Non Sint Et




Omnis Quo Magni


Quas Necessitatibus


Debitis Blanditiis


Voluptatem Ipsa


Voluptatum Assum

50.433948, 30.516080

Velit Impedit Incidunt

-30.433948, 30.516080

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:

Script (uses jQuery)


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



Share location

State chart

geolocation api available
Share location
not available
Location not available
Getting location...
Location found
Could not get location

Script (vanilla js)

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.

Script (vanilla js)

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.


Script (vanilla js)


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


Script (leaflet library & vanilla js)

#component-geo-map demo

Non Atque Ut


Ab Et


Voluptas Non Sint Et