diff --git a/assets/clicked-point.png b/assets/clicked-point.png new file mode 100644 index 00000000..efd9f82d Binary files /dev/null and b/assets/clicked-point.png differ diff --git a/examples/index.md b/examples/index.md index 379035f5..1973a03f 100644 --- a/examples/index.md +++ b/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/) ## Integrations diff --git a/lonboard/_map.py b/lonboard/_map.py index a1f42575..1b9abad5 100644 --- a/lonboard/_map.py +++ b/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 diff --git a/src/index.tsx b/src/index.tsx index 293496ec..9e1382b4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -104,6 +104,7 @@ function App() { ); const [parameters] = useModelState("parameters"); const [customAttribution] = useModelState("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",