Research spike: using nebula.gl for front end geospatial drawing and selection

[TylerMatteo]

We'll use this Issue to track work related to experimenting with nebula.gl in the front end proof of concept app. Nebula.gl is a library for geojson-based drawing and selection that is part of the same ecosystem as Deck.gl and built on React.

Nebula's docs also reference another drawing library -react-map-gl-draw that has similar functionality but relies on mapbox-gl-js and it's associated libraries. For this research spike, we want to avoid using those libraries in favor of seeing what functionality we can get using only nebula.gl

Here are some things we want to experiment with doing with nebula:

• [ ] The user can draw an arbitrary polygon on the map and edit, move, or rotate it
• [ ] The user can measure the distance between two points on the map and see the distance in feet or meters
• [ ] The user can download the polygon they've drawn in the form of geojson
• [ ] The user can draw a polygon while the tax lot layer is visible and then see a list showing the addresses of all lots within their selection

This would be a great Issue for two engineers to pair on. Once some basic set up is done, the above tasks could be split between more than one engineer.

We do not have designs or wireframes for this because the goal is just experimentation. Engineers can add to the UI as the see fit with simple buttons using the existing Streetscape components.

[pratishta]

Tracking this here: https://github.com/NYCPlanning/ae-zoning-map-poc/discussions/66

[TangoYankee]

I played around with making a custom drawing tool. Code is on https://github.com/NYCPlanning/ae-remix-template/tree/bespoke-drawing

https://github.com/NYCPlanning/ae-zoning-map-poc/assets/11068062/d8120e83-ab49-40dc-9f27-709c1ccc2fc1

[TangoYankee]

I extended the custom drawing tool. There are changes to both the functionality and the code structure. Changes are on: bespoke-drawing-store

For functionality, there are now modes specific to drawing points and linestrings (...with the intent to support squares, right triangles, and/or free-hand polygons, etc). There are also multiple ways to end/cancel drawing. 1) Clicking again on the selector buttons 2) Pressing "Enter" 3) clicking again on the last drawn point or 4) Reaching the maximum number of allowed points in a linestring.

For structural changes, it now relies on the reducer pattern outlined in this client state discussion. It also uses Immer to isolate and control changes to the store, improving rendering predictability and performance. I chose to use the reducer and context hooks because Zustand seems to obfuscate much of the state update control, hampering the ability to reason about and control state changes.

Cross-post to discussion #66