search

NYCPlanning / ae-zoning-map-poc

This mapping application shows zoning and other related data on a map of NYC. It is intended as a proof of concept for using React, Deck.gl, Chakra, and other related technologies.
0 stars 0 forks source link

Switch to controlled Deck viewState with custom zoom in and out controls #42

Closed TylerMatteo closed 10 months ago

TylerMatteo commented 10 months ago

This PR updates how we manage Deck.gl's viewState so that it is managed externally via React. This is opposed to the previous implementation that passed initialViewState to Deck and Maplibre and had each of them manage the state internally. This change also resolves a bug where the NavigationControl component wasn't actually working.

This change also moves us towards relying on the Maplibre/Mapbox-gl ecosystem as little as possible, which I think is good in the long run. The AttributionControl and ScaleControl components still work as expected but I implemented a custom control for zooming in and our using some Button components from our Design System.

One issue worth noting has to do with the typescript typings for viewState. The viewState prop on the <DeckGL> components appears to be any which is odd and making enforcing typing difficult. I want to do some more research on this eventually but, for now, I just implemented my own type with the properties I needed.

The logic in onViewStateChange updates the viewState as a user moves/pans/zooms the map, while also enforcing min/max lat and long. The onClick functions show how to programmatically update the viewState. In that case, I am incrementing and decrementing zoom. The transitionEasing and transitionDuration props make use of Deck's View State Transition API. I got the function in transitionEasing from a site linked in Deck's docs - https://easings.net. Specifically, the function I'm using is "easeOutQuart"

netlify[bot] commented 10 months ago

Deploy Preview for remarkable-travesseiro-08255c ready!

Name Link
Latest commit 91ea18a8693ee9549c85aabfd6be3cfaec6c4594
Latest deploy log https://app.netlify.com/sites/remarkable-travesseiro-08255c/deploys/65a00ea9d64c57000817336f
Deploy Preview https://deploy-preview-42--remarkable-travesseiro-08255c.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.