Geo Components 🌐💙

Globes and stuff for Webflow!

FeedbackPreviewClone

Demo:

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

Non Atque Ut

42.2989285,41.1149143

Ab Et

40.2787362,125.1925713

Voluptas Non Sint Et

53.7028257,-2.2424925

Sint

40.959722,140.483056

Omnis Quo Magni

-8.4225669,-37.0550104

Quas Necessitatibus

40.6181915,-105.3126025

Debitis Blanditiis

33.5,36.3

Voluptatem Ipsa

18.533333,-72.333333

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)

#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

Demo

Share location

State chart

geolocation api available
Share location
not available
Location not available
click
Getting location...
success
Location found
error
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.

Requires

Script (vanilla js)

#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

Script (leaflet library & vanilla js)

#component-geo-map demo

Non Atque Ut

42.2989285,41.1149143

Ab Et

40.2787362,125.1925713

Voluptas Non Sint Et

53.7028257,-2.2424925