🏠 back to Observable

Change @jashkenas/inputs value from click event in Leaflet map?

I am attempting to update the value of a @jashkenas/inputs text form using a value derived from a click event in a Leaflet map. The idea here is that a user could either provide the coordinates manually or from clicking on a map.

I am able to get the value I need from the click event, but I am having trouble passing it into the text form. The text form value is apparently a constant. As such it appear I cannot just assign the value from the click event to the variable containing the initial text form value. I’ve included a basic example of what I’ve been trying to. Does anyone have any suggestions for how I can pass the value from a click event into a @jashkenas/inputs text form?

Here’s something that works:

(I think I learned this trick from the Linked Inputs example.)

The “assigning to a constant” error occurs because Observable cells are in strict mode, and inside the cell newCoordinates hasn’t been defined yet. You don’t actually need a new view cell for what you’re trying to do, so I just placed the code defining the event handler directly inside the map cell.

There’s also a fancier technique in Synchronized Views that I’ve also used from time-to-time.

1 Like

This is great. There are a few concepts I think I need to dig into a bit more, but this approach on the whole makes sense. Thanks for the suggestions and explanation!

1 Like

Specifically for Jeremy’s inputs collection there’s also

which automatically handles most of the widgets.


@mootari — Is Mutable Forms a feature that you’d like (and think would be appropriate) to merge back into the Inputs notebook?

It seems generally useful, and safe — as long as we keep it in mind when adding any new input types.

@jashkenas I’d love to, but right now I’m getting a 500 server error when I try to fork the changes that I added.

Edit: It worked after I reloaded the original notebook and reapplied the changes.