How Can I Use Observable to Display Real-Time Location Data Like 'What County Am I In Right Now'?

Community Help
1

I’ve been exploring ways to use Observable for interactive data visualizations, and I recently came across a tool called “what county am.i in right now” This tool detects your current location and tells you which county you’re in, which is quite handy for anyone needing real-time geographical information.

My goal is to understand how I can replicate or visualize similar real-time location data within an Observable notebook. Specifically, I’d like to know how to pull location data, like the user’s current county, and display it dynamically using Observable’s features.

I’m curious about the following aspects:

  1. Accessing Location Data: What are the best practices for pulling real-time geolocation data into Observable? Should I rely on external APIs, or does Observable have built-in features that could facilitate this process? I’m aware that JavaScript has navigator.geolocation, but how does that integrate with Observable’s reactive framework?
  2. Handling Data in Observable: Once the location data is obtained, what’s the most efficient way to manage and display this data in Observable? I want the notebook to update automatically as the user’s location changes. Are there specific techniques or tools within Observable that are particularly well-suited for this kind of dynamic data visualization?
  3. Privacy Concerns: Given that location data is sensitive, what should I consider when displaying this information in a public notebook? Are there ways to anonymize or restrict the sharing of specific location details while still providing useful insights to the user?
  4. Visual Representation: How would you suggest visualizing the current county information in an engaging way? For example, should I create a map that highlights the county the user is in, or is there a more creative approach that I haven’t considered? I’m interested in using Observable’s rich visualization capabilities to make the data not just informative but also visually appealing.
  5. Real-World Applications: Finally, what are some potential use cases for displaying real-time county data in an Observable notebook? Whether it’s for personal use, educational purposes, or something else, I’d love to hear thoughts on how this type of visualization could be beneficial or interesting to others.

thanks!

2

Easily. Throw this into a notebook cell or framework code block and you should get your longitude and latitude, if you allow your browser to do so:

loc = new Promise((resolve, reject) => {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      let [lon, lat] = [position.coords.longitude, position.coords.latitude];
      resolve({ lon, lat });
    },
    (error) => {
      reject(error);
    }
  );
}).catch((error) => error)

If you’re using Mapbox or Maptiler or one of several other general mapping APIs, they’ve probably got their own tools built in.

If you want to know what county/state that’s in or what street it’s on, you should use a reverse geocoder. There’s lots of choices. One free one that I use some is Nominatim. A Nominatim URL built from the loc object defined above looks like so:

`https://nominatim.openstreetmap.org/reverse?lat=${loc.lat}&lon=${loc.lon}&format=json`