Geo Components: 2d map, 3d globe, and geolocation util

Community resources Show & Tell
1

https://webflow.com/website/Geo-Components-for-Webflow

The script doesn’t require editing… you just have to add data attributes in 3 places, explained in the site.

  • 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

The library that I’m using doesn’t have great touch support. You can navigate the globe by tapping the place elements though, so it’s somewhat usable on mobile.

I want to do more globe/mapping components as part of this project. Next might be a lat/lon input for forms, bound to a draggable map.

Let me know if you do something with this!

Tangential: making globes by hand in 1955.

5 Likes
2

mmmm ideas…

Thanks for this!

3

:new: :new:

Todo: address to coordinates (geocoding)? Coordinates form input?

4

Have you figured out the Coordinates form input? That would be a great help. Cheers.

5

Hi @forresto! Thanks for sharing this project! It’s been a long time since I’m asking how to order latitude/longitude CMS items by distance from the website visitor location, and you seem to have found a solution! Your sample project doesn’t seem to find my geolocation when I press the button, would it be possible that you have a fresh look on the project? Maybe there are some things to update since it was created?
Thanks in advance!

6

Folks, make sure you access the HTTPS version of the demo site by @forresto ( https://geo-components.webflow.io ), or modern browser security will silently not prompt you for HTML5 geolocation permission.
CC @WebflowUser

7

Hi @forresto, two years after your post I’m planning to use your tutorial to order geo-located CMS items by distance, it is the only solution that I have found so far (and it’s awesome many thanks for sharing it :pray:). I just wanted to ask you before reusing the scripts: if you would re-do it now after two years, would you use the same API and code? Thanks!

8

Hi @forresto I’m transferring my old site to webflow and leaflet custom map that I had made before. In the old one I had all the images and zoom levels saved in separate folders but when trying to incorporate leaflet to webflow I’m not sure if that is possible. Is it? And if it is could you point me in the direction of making it happen? Thanks.

for reference my old site is: steffancross.com