Seeking help to create toggle views of `kml` data in Google Maps

Dear Observable Community,

I would like to learning how to add groups of vector data (stored as kml file) to a Google map so that it can be clicked on and off through a user interface. Bram Van den Bulcke created a tutorial showing how to accomplish this with Google Maps. I am currently struggling to port the example to Observable.

Bram’s working web example using Kml layers is available here. My attempt to port it to Observable (based on Tom’s example) is here:

The map is working and I am not getting error message with the JavaScript code. On the face of it, everything appears connected in the same way as in Bram’s example, yet the HTML toggles don’t effect any changes in the map.

I assume that I am missing some connection between the HTML toggles and the JavaScript. Would you be willing to show me how to accomplish this?

Thanks in advance for your time and guidance!

Sincerely,

Aaron

Hi Aaron.

Here’s a quick 3-minute tweak to get your map working:

It breaks things out into separate cells, and uses the “checkbox” input from the bazaar to provide a quick way to turn a set of HTML checkboxes into a reactive array of JS values.

Then we just need a cell (in this case, setRoutes) that observes the array of routes, and calls setMap() on each layer whenever the array is updated.

Cheers.

2 Likes

Wow! You do this stuff with lightening speed!

Thank you, Jeremy, for your time and help on this. I’ll study your work and then see if I can adapt it in the context of another notebook with a similar input ‘connection’ challenge. :slight_smile:

Thank you for your generous mentoring!