# viewof map coordinates on click

**URL:** <https://talk.observablehq.com/t/viewof-map-coordinates-on-click/7319>\
**Category:** Help\
**Created:** [November 23, 2022, 3:03pm UTC](https://talk.observablehq.com/t/viewof-map-coordinates-on-click/7319 "2022-11-23T15:03:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![neocarto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/neocarto/32/6554_2.png) [@neocarto](https://talk.observablehq.com/u/neocarto)\
**Post date:** [November 23, 2022, 3:03pm UTC](https://talk.observablehq.com/t/viewof-map-coordinates-on-click/7319/1 "2022-11-23T15:03:01Z")

</div>

There is something I don’t understand. I’m trying to get the coordinates of my cursor from an svg map. It’s OK in the console. But I don’t have anything in output. What is the right way to do this?  
Find here a draft unlisted notebook: [Draft / neocarto / Observable](https://observablehq.com/d/dce26bf221b86f4f)

---

<div class="post-metadata">

**Author:** ![roelandschoukens](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/roelandschoukens/32/7196_2.png) [@roelandschoukens](https://talk.observablehq.com/u/roelandschoukens)\
**Post date:** [November 23, 2022, 9:06pm UTC](https://talk.observablehq.com/t/viewof-map-coordinates-on-click/7319/2 "2022-11-23T21:06:06Z")

</div>

I have a widget like that on one of my notebooks.

> **[Inputs](https://observablehq.com/@roelandschoukens/inputs)**
>
> Some inputs used in the Astronomical clock notebook location Give a location as a point on a map. Set a default with \`{value: \[lon, lat\]}\`. Other propererties to customize the control: Field | meaning
> \------|--------
> \`label\` | label for this...

I think you have to generate an input event when the coordinate is set. For an HTML element this is something like `div.dispatchEvent(new CustomEvent("input"))` (where the console.log is), but I’m not sure whether you can do this with an SVG.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [November 23, 2022, 9:56pm UTC](https://talk.observablehq.com/t/viewof-map-coordinates-on-click/7319/3 "2022-11-23T21:56:28Z")

</div>

@neocarto You need to make two changes. First, you need to dispatch “input” events to let Observable’s Runtime know that your data has changed:

```auto
svg.on("click", function (ev) {
    // ...
    svg.dispatch("input");
  });

```

You’re also currently reassigning `coords`, which means that your initially assigned value becomes stale after the first update. Instead define a getter:

```auto
  return Object.defineProperty(svg.node(), "value", {
    get: () => coords
  });

```

I recommend to take a look at this short introduction to `viewof`:

> **[What has viewof ever done for us?!](https://observablehq.com/@mootari/what-has-viewof-ever-done-for-us)**
>
> A short introduction to \\\`viewof\\\`, in response to this post. \\\`viewof\\\` is an Observable macro (i.e., a "magic word") that allows you to create user interfaces for your values. Observable cells by themselves are rather boring: they can only store...

---

<div class="post-metadata">

**Author:** ![neocarto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/neocarto/32/6554_2.png) [@neocarto](https://talk.observablehq.com/u/neocarto)\
**Post date:** [November 24, 2022, 8:21am UTC](https://talk.observablehq.com/t/viewof-map-coordinates-on-click/7319/4 "2022-11-24T08:21:51Z")

</div>

Thanks 👍