Add map-util buttons such as the geocode search bar, zoom buttons etc

[GarrySan]

No description provided.

[ivanoats]

Hey, it's awesome that you're forging ahead on this, but I wanted to plan out some architecture before the features. Have a look at https://xstate.js.org/viz/ - this is what I wanted to use. I can lay out more of the planning thinking in a separate issue, and also jump into #orcmap-react channel on Slack please.

[GarrySan]

Sure thing @ivanoats . xstate looks super cool!

[parthsarthiprasad]

@ivanoats I was thinking something like a sidebar to acess all the buttons. following react-hooks and https://xstate.js.org/viz/ . Can i go forward with this approach? Will try to open a PR for this.

[ivanoats]

neat stuff but what features is this being driven by? The buttons from the original map? We need a more complete user story before deciding to work on it, I think.

[parthsarthiprasad]

From the original Map

• Clear New marker( can be recreated by removing the mapoints from the mapcontext as per useEffect logic added in mapcontainer.jsx and integrated with google spreadsheets also made another vector layer and map for googlesheets coords #26
• Add raw observations ( similarly add new points in the already created mapcontext)
• Refresh ( just plotting new points using useEffect already in place? )
• Pull from google sheet ( here i wanted to raise another major issue of whether we shall use spreadsheet as a database? Will a better SQL query be better as number of potential hydrophones increase( if they do)?

In both ways this is the task which will require some work, using sheets API to acquire new data and plot those points on the graph

• Open google sheet (can be done easily with an href)

Further functionality can be added into this after completing these basic blocks

Expected time : 2-3 hours

Do let me know about your suggestions @ivanoats thanks.

[DhananjayPurohit]

A state machine for the above case can be :-

link to above visualization.

I am new to XState, but we can bring out more ideas through discussion. Any suggestions? @ivanoats

[ivanoats]

Makes sense 👍🏼 Thanks for diagramming that.

What service provides Authorization?

[DhananjayPurohit]

I think Authorizing a user with Google's OAuth 2.0 with giving access to writing into spreadsheet will hold good instead of setting a service account(a bot to write into spreadsheet) to ensure authenticated entries only. It can be easily implemented using google-spreadsheet(the same package we are using for getting data from spreadsheet). Here's the link to the documentation of implementation(https://theoephraim.github.io/node-google-spreadsheet/#/getting-started/authentication).
Authorization is only for the users who want to add markers(observations) to spreadsheet.

[Devesh21700Kumar]

Makes sense 👍🏼 Thanks for diagramming that.

What service provides Authorization?

Oauth 2 pipeline by google would be the best case for authorization.
The server side for the applications that might control the Google sheets can use JWT or some other middleware suitable for the tech stack used for it to verify the token generated in the OAUTH pipeline and frontend could receive it as response and maneuver it by setting it in localstorage.

This can also lead to addition of extra features i suppose