add clicked_point to map

examples/index.md

@@ -12,7 +12,7 @@
 -  [Rivers in Asia ![](../assets/rivers-asia.jpg)](../examples/map_challenge/6-asia/) using [`PathLayer`](../api/layers/path-layer)
 -  [Inflation Reduction Act Projects ![](../assets/column-layer.jpg)](../examples/column-layer/) using [`ColumnLayer`](../api/layers/column-layer)
 -  [Linked Maps ![](../assets/linked-maps.gif)](../examples/linked-maps/)
-
+-  [Clicked Point ![](../assets/clicked-point.png)](../examples/clicked-point/)
 </div>
 
 ## Integrations

lonboard/_map.py

@@ -209,6 +209,20 @@ def __init__(
         ```
     """
 
+    clicked_point = t.Tuple(
+        t.Float(allow_none=True),
+        t.Float(allow_none=True),
+        allow_none=True,
+    ).tag(sync=True)
+    """
+    The last point where a user clicked on the map.
+
+    - Type: `Tuple[Float]`
+    - Default: `None`
+
+    The first item in the tuple is the x coordinate and the second is the y coordinate.
+    """
+
     # TODO: We'd prefer a "Strict union of bool and float" but that doesn't
     # work here because `Union[bool, float]` would coerce `1` to `True`, which we don't
     # want, and `Union[float, bool]` would coerce `True` to `1`, which we also don't

src/index.tsx

@@ -104,6 +104,7 @@ function App() {
   );
   const [parameters] = useModelState<object>("parameters");
   const [customAttribution] = useModelState<string>("custom_attribution");
+  const [clickedPoint] = useModelState<[number,number]>("clicked_point");
 
   // initialViewState is the value of view_state on the Python side. This is
   // called `initial` here because it gets passed in to deck's
@@ -178,6 +179,18 @@ function App() {
   const onMapClickHandler = useCallback((info: PickingInfo) => {
     // We added this flag to prevent the hover event from firing after a
     // click event.
+    if (typeof(info.coordinate) !== 'undefined'){
+      var x = info.coordinate[0];
+      var y = info.coordinate[1];
+      while(x < 180){
+        x+=360;
+      }
+      while(x > 180){
+        x-=360;
+      }
+      model.set("clicked_point", [x, y]);
+      model.save_changes();
+    }
     setJustClicked(true);
     actorRef.send({
       type: "Map click event",