Create GL Support wrapper #166
Conversation
There was a problem hiding this comment.
Hmmm I don't love this pattern, but I don't have a good reason why:
<GLWrapper map={<DemoIframe src="/help/demos/how-mapbox-works/map-design.html" />} />
If we pulled DemoIframe out of /help into /dr-ui could we add this functionality as a prop of DemoIframe instead? What are the other use cases for GLWrapper?
|
@colleenmcginnis Unfortunately, adding
We load Mapbox GL JS maps across Help, Vector tiles, Studio Manual, Android, API Playground, and iOS. As described above, we load maps from a few different methods: sometimes DemoIframe other times a component. A slight alternativeWe could pass children instead of a |
|
I guess my main concern is that if this wrapper needs to be added at the Markdown file level for every instance, I'm not sure it will always happen. Maybe we should have a dr-ui-based solution for both use cases: iframes and components. The iframe component would probably be pretty straightforward (very similar to what we're already using in /help). For Mapbox GL JS maps that are being loaded directly via a component, maybe we should create a basic map component that adds the support wrapper by default. Maybe that's a follow-up task, though? Let me know what you're thinking! |
I see what you're saying now and agree!
I started scoping this out and I think a map component can get pretty complex and would require us to rework all existing GL JS components to use the new component. I think for now, to fix the original issue, adding the GLWrapper around each component is the best option. Suggested actions:
|
There was a problem hiding this comment.
This is a great approach @katydecorah! I left one comment below.
| } | ||
| } | ||
|
|
||
| DemoIframe.propTypes = { |
There was a problem hiding this comment.
I think we should add another prop here like requiresGl, which defaults to true and adds the GL wrapper, but can be turned off for the few mapbox.js demos we have and the odd demo like Create a timezone finder with Mapbox Tilequery API that doesn't display a GL map. What do you think?
💯 thanks so much for catching that use case. I just added the new prop.
|
* master: (24 commits) 0.20.1 Prepare 0.20.1 0.20.0 Prepare 0.20.0 Prevent src/components/syntax-highlighters from being adding to pkg Update WarningImage in GLWrapper Update CHANGELOG.md Add syntax highlighting functions (#172) Add `GLWrapper` and `DemoIframe` components. (#166) compress svg update *-image themes and clean up svg, make IE11 friendly, set default `size` & make it a number [babel] Add babel config to helpers and plugins, add eslint plugins (#164) [Search] Enable babel polyfill on `Search` component (#165) [BackToTopButton] use `window.scroll(x-coord, y-coord)` (#167) Create a note "flavor" for new products or features (#162) [docs] Update webhook staging urls (#161) 0.19.3 Update CHANGELOG.md [Note] replace Object.assign with a function (#159) 0.19.2 ...
* master: Add Browser component (#177) [test-cases app] create `npm run start-legacy` to test in IE11 (#178) Create a video component (#176) 0.20.1 Prepare 0.20.1 0.20.0 Prepare 0.20.0 Prevent src/components/syntax-highlighters from being adding to pkg Update WarningImage in GLWrapper Update CHANGELOG.md Add syntax highlighting functions (#172) Add `GLWrapper` and `DemoIframe` components. (#166) compress svg update *-image themes and clean up svg, make IE11 friendly, set default `size` & make it a number [babel] Add babel config to helpers and plugins, add eslint plugins (#164)
This component is a wrapper where we can pass HTML/Component to it as a prop. The wrapper will decide if the browser supports webgl. If it does then it'll show whatever code you passed to it, if it doesn't then it'll display a note with a warning.
Refs https://github.com/mapbox/documentation/issues/236
WebGL supported:
WebGL unsupported:
How to test:
OR!
/help/how-mapbox-works/on staging🐌 No rush on review 🐌