feat: use @opensystemslab/map web component #597
Conversation
|
🚀 Deployed on https://611e4199a6a44f1523ed8856--planx-new.netlify.app |
|
✔️ Storybook 🔨 Explore the source changes: 1fa676d 🔍 Inspect the deploy log: https://app.netlify.com/sites/planx-storybook/deploys/611e40fa31514b0007144b86 😎 Browse the preview: https://deploy-preview-597--planx-storybook.netlify.app |
…ss/osl-map-integration
| // only a single polygon can be drawn, so get first feature in geojson "FeatureCollection" | ||
| setBoundary(geojson.features[0]); | ||
| }); | ||
| } |
There was a problem hiding this comment.
Curious if there are more react-y ways to approach this rather than event listeners?
There was a problem hiding this comment.
I don't know enough about Web Components to say, but if it was a react component I'd imagine we'd be passing in callbacks (e.g. onChange, onSelect) and those are really just glorified event listeners anyway 🤷♀️
There was a problem hiding this comment.
The idiomatic way to do it in react-land would be to create a reference with React.createRef then pass it down to <my-map> but I don't know if that would work or even make sense with web components (I need to learn more about web components).
There was a problem hiding this comment.
ok event listeners seem to be the way to go with web components
i just realized you'll need to remove those event listeners too on the cleanup stage of the effect hook
There was a problem hiding this comment.
Agreed, so much to learn about web components! I've been liking this guide so far for navigating between concepts: https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs
There was a problem hiding this comment.
good catch, updated to include cleanup function 🧹
editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
Outdated
Show resolved
Hide resolved
|
This is coming along so nicely!! Do you want to update the hectares string bit before merging or should we review this as-is? |
| // only a single polygon can be drawn, so get first feature in geojson "FeatureCollection" | ||
| setBoundary(geojson.features[0]); | ||
| }); | ||
| } |
There was a problem hiding this comment.
The idiomatic way to do it in react-land would be to create a reference with React.createRef then pass it down to <my-map> but I don't know if that would work or even make sense with web components (I need to learn more about web components).
editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
Outdated
Show resolved
Hide resolved
editor.planx.uk/src/@planx/components/DrawBoundary/DrawBoundary.stories.tsx
Show resolved
Hide resolved
…in FindProperty yet
We've been working on a web component map over here & it has feature-parity with planx requirements now!
Now using in:
property.boundary.site& displaying areaOther updates:
@turf/helpersfor Geometry type