Mapbox Component #267
Mapbox Component #267
Conversation
src/components/Mapbox.tsx
Outdated
| if (markerLocation) { | ||
| const { latitude, longitude } = markerLocation; | ||
| const el = document.createElement('div'); | ||
| PinComponent && ReactDOM.render(<PinComponent result={result} />, el); |
There was a problem hiding this comment.
why are you using ReactDOM.render here?
There was a problem hiding this comment.
This was one of the things that I wanted to go back and revisit-- I took this small 2 line snippet from davish's example since he implemented it in a way that we can use imported pin components-- Looks like renders the pin to a div, then we insert that div into the Map. Is there a better way to do that? I'll of course look around.
There was a problem hiding this comment.
I didn't find a good way to do this as Mapbox's marker option takes in HTMLElement only for the DOM element to use as a marker, so this needs to be pre-rendered before passing into new Marker()
|
Hello!! For whoever is working on this after I leave-- thank you! Also, I was thinking about another aspect users might want to configure is the area on the map where pins can show. For example, if for some reason, the user wanted to have a floating window with results, they may want pins to only show on the right side of the window since any pins on the left would be covered by the overlay.
Or, if users had different sized pins, they might need to configure the marker margins to make sure no markers get cut off. Also if the map is large, having pins too spread out makes the map hard to read. Overall, I feel like if the marker margins are off, it makes the map look off. |
|
Another thing that I might want to consider is adding some sort of size styling? Right now, the map fills whatever space it has-- so if the user wants to make a map of a certain size, they have to place it in a div with a specified size. But not necessary, since we're trying to prune prop interfaces. |
|
The pin component was just something that I added in to test compatibility with a custom React component. It is a simplified version of the pin component in Davish's search-locator-starter. It can be removed, and the location page can be refactored when the final PR is ready. |
|
The part with the generic |
yen-tt
force-pushed
the
dev/mapbox-component
branch
from
b5f4032
to
6dd7f69
Compare
yen-tt
force-pushed
the
dev/mapbox-component
branch
from
936c8c6
to
f4f6900
Compare
|
rewrote history to remove LocationsPage and deleted a comment point to it. Adding it back in another commit. |
yen-tt
force-pushed
the
dev/mapbox-component
branch
from
c9a9d0f
to
9d02047
Compare
|
is the failing Snyk license approved by legal? |
Not sure if alex discussed with Product / run through with legal before using v2 in the pr. Looks like v2 of mapbox is under a different license and pricing model from v1 so I will double check with product |
Product approved the usage of Mapbox GL JS Version 2.0 and its pricing model, but is still working on the license approval. They gave permission with cutting a beta version -- I will merge this into a feature branch instead for now. |
This PR introduces the Mapbox Component. This lays the basic foundation for the component, with the interfaces constructed through discussion with Product.
Here are two relevant slack threads:
https://yext.slack.com/archives/C032CKFARGS/p1658322867803349 (inception)
https://yext.slack.com/archives/C032CKFARGS/p1659449732357219 (more recent)
J=SLAP-2221
TEST=manual
Tested through LocationsPage
Later items will add jest tests and storybook for further testing
NOTE: as of now, local test-site requires an
envvariable REACT_APP_MAPBOX_API_KEY for map to work properlyFor github workflow to work (in future test items), some changes may be needed in the workflow: facebook/create-react-app#9064 (comment)