using reactmap layers still generates 2 canvases and fails to render properly

[pr1ntr]

I am attempting to use the new reactmap integration. I am passing the gl context object to the StaticMap but the rendering appears to be messed up. What seems to happening is that Deck.GL is still rendering to its own context and the StaticMap, I assume is rendering to the react-map context. However, I can only see the StaticMap while panning. When I stop panning it starts rendering the Deck.GL layers, except it does not render alpha.

Here are a couple of screen shots:
This is what the Deck.gl layers output:

The background is a png, the white jagged stuff markers are the layers.

When I start panning I get the actual map that seems intact.

These things should be overlayed and have alpha.

Here are the relevant parts of the code:

static defaultProps = {
    iconMapping: {
      dot: {
        x: 64,
        y: 64,
        width: 64,
        height: 64,
      },
      shape: {
        x: 128,
        y: 64,
        width: 64,
        height: 64,
        anchorX: 32,
        anchorY: 64,
        mask: true,
      },
      [CONTENT_STORY]: {
        x: 128,
        y: 0,
        ...ICON_MAPPING,
      },
      [CONTENT_VIDEO]: {
        x: 0,
        y: 64,
        ...ICON_MAPPING,
      },
      [CONTENT_AUDIO]: {
        x: 0,
        y: 0,
        ...ICON_MAPPING,
      },
      [CONTENT_STATISTIC]: {
        x: 64,
        y: 0,
        ...ICON_MAPPING,
      },
      [CONTENT_FEATURED]: {
        x: 0,
        y: 128,
        ...ICON_MAPPING,
        anchorY: 64,
      },
    },
    iconAtlas: require('../../assets/images/icon-atlas.png'),
  }

state = {
    time: 0,
    selectedStory: null,
    highlightPin: 0,
    activateHotspot: false,
    transitionDuration: 0,
    mapState: { ...DEFAULT_STATE },
    zoomScale: 1,
    filtered: [],
    prevZoomLevel: MAX_ZOOM,
    gl: null,
    data: [],
    cursor: 'grab',
  }

_onWebGLInitialized = (gl) => {
    this.setState({ gl })
  }

_onMapLoad = () => {

    const map = this._mapRef
    const deck = this._deckRef

    map.addLayer(new MapboxLayer({ id: 'marker-layer', deck }), 'marker-label')
    map.addLayer(new MapboxLayer({ id: 'marker-icon-layer', deck }), 'marker-icon-label')
    map.addLayer(new MapboxLayer({ id: 'points-layer', deck }), 'points-label')
}

_renderLayers() {
    const { iconAtlas, iconMapping, onClickHotspot, stories, mapRef } = this.props
    const { data } = this.state

    const markers = new IconLayer({
      transitions: {
        getColor: {
          duration: 150,
          ease: easing.linear,
        },
        getPosition: {
          duration: 150,
          ease: easing.linear,
        },
      },
      data,
      id: 'marker-layer',
      iconAtlas,
      iconMapping,
      pickable: true,
      onClick: d => !(d.visible || d.selected) && this._handleOpenHotspot(stories[d.index])(),
      onHover: ({ object }) => {
        if (object && !object.visible && !object.selected) {
          this._setHover(object.id)
        } else {
          this._setHover()
        }
      },
      sizeScale: 1,
      getIcon: () => 'shape',
      getSize: 64,
      getColor: d => {
        return [...this._setHoverColor(d.hover), d.visible || d.selected ? 0 : 255]
      },
    })

    const markerIcons = new IconLayer({
      transitions: {
        getColor: {
          duration: 150,
          ease: easing.linear,
        },
      },
      data,
      id: 'marker-icon-layer',
      iconAtlas,
      iconMapping,
      pickable: false,
      sizeScale: 1,
      getIcon: d => (d.featured ? CONTENT_FEATURED : d.type),
      getSize: 64,
      getColor: d => {
        return [35, 56, 93, d.visible || d.selected ? 0 : 255]
      },
    })

    const dots = new IconLayer({
      transitions: {
        getSize: {
          duration: 300,
          ease: easing.anticipate,
        },
      },
      data,
      id: 'points-layer',
      iconAtlas,
      iconMapping,
      pickable: false,
      sizeScale: 16,
      getIcon: () => 'dot',
      getSize: d => {
        if (d.visible) {
          return (d.currentlyFiltered ? 3 : 1) + d.twinkleSeed
        } else {
          return 0
        }
      },
    })

    return [markers, markerIcons, dots]
  }

render() {
    const { dimensions, stories, onFeaturedGalleryClick, hideFilterBar, prevNextDisabled, mapStyle } = this.props
    const { selectedStory, transitionDuration, mapState, activateHotspot, gl } = this.state
    const activeOverlay = activateHotspot && !!selectedStory
    const enableMove = !!(hideFilterBar && !activeOverlay)

    this._toggleZoom(activeOverlay)

    return (
      <MapContainer
        onContextMenu={event => event.preventDefault()}
      >
        <DeckGL
          onWebGLInitialized={this._onWebGLInitialized}
          viewState={{
            ...mapState,
            transitionDuration: transitionDuration,
            transitionInterpolator: new FlyToInterpolator(),
            transitionInterruption: TRANSITION_EVENTS.IGNORE,
            onTransitionEnd: this._handleMapTransitionEnd,
            onTransitionInterrupt: this._handleMapTransitionInterrupt,
          }}
          controller
          view={dimensions}
          layers={this._renderLayers()}
          getCursor={this._getCursor}
          ref={ref => {
            // save a reference to the Deck instance
            this._deckRef = ref && ref.deck
          }}
          onViewStateChange={this._handleMapState}


        >

          { gl && (
            <StaticMap
              dragRotate={enableMove}
              dragPan={enableMove}
              scrollZoom={enableMove}
              touchZoom={enableMove}
              touchRotate={enableMove}
              gl={gl}
              ref={ref => this._mapRef = ref && ref.getMap()}
              mapboxApiAccessToken={REACT_APP_MAPBOX_TOKEN}
              mapStyle={mapStyle}
              {...mapState}
              {...dimensions}
              onLoad={this._onMapLoad}
            >
              <ToggleVisible hide={activeOverlay || !hideFilterBar}>
                <StyledMapNavigation onChangeViewport={this._handleMapState} onCenterMap={this._centerMapToUserGeo} mapState={mapState} />
                <ViewFeaturedButton onClick={onFeaturedGalleryClick} />
              </ToggleVisible>
              <BackgroundOverlay show={activeOverlay} />
              <Transition timeout={250} appear in={hideFilterBar}>
                {state => {
                  return <StyledContentFilterBar onSelectFilter={this._handleFilterHotspot} transitionState={state} />
                }}
              </Transition>
              <HotspotLayer stories={stories} mapState={mapState} activateHotspot={activateHotspot} selectedStory={selectedStory} onClose={this._handleCloseHotspot()} />
            </StaticMap>
          )}
        </DeckGL>


        {!!selectedStory && (
          <ContentControls stretch justifySpaceBetween>
            <FadeWhenDisabled disabled={prevNextDisabled}>
              <ArrowGroup>
                <DirectionButton disabled={prevNextDisabled} direction={DIRECTIONS.LEFT} onClick={this._moveToNextFilteredStory(DIRECTIONS.LEFT)} />
                <DirectionButton disabled={prevNextDisabled} direction={DIRECTIONS.RIGHT} onClick={this._moveToNextFilteredStory(DIRECTIONS.RIGHT)} />
              </ArrowGroup>
            </FadeWhenDisabled>
            <CloseButton onClick={this._handleCloseHotspot()} />
          </ContentControls>
        )}
        {/*<ScreenBlend />*/}
      </MapContainer>
    )
  }

This works fine if I don't try to mix the contexts, but this is some weird behavior.

[pr1ntr]

This is what its supposed to look like:

[Pessimistress]

Can you confirm that you're using react-map-gl@^4.0.0?

[pr1ntr]

my package.json has: "react-map-gl": "4.0.0", and thats what is in node modules, mapbox-gl is 0.50.0

my whole package.json:

  "name": "onstar-experience-hub",
  "version": "0.7.0",
  "private": true,
  "lint-staged": {
    "*.{js,json,css,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "dependencies": {
    "@deck.gl/mapbox": "6.2.4",
    "@glidejs/glide": "3.2.3",
    "@mapbox/mapbox-sdk": "0.4.1",
    "@mapbox/react-geocoder": "2.5.0",
    "@turf/turf": "5.1.6",
    "axios": "0.18.0",
    "bowser": "2.0.0-beta.3",
    "classnames": "2.2.6",
    "deck.gl": "6.2.4",
    "lodash": "4.16.2",
    "luma.gl": "6.2.0",
    "particles.js": "2.0.0",
    "polished": "1.9.3",
    "popmotion-pose": "3.1.0",
    "react": "16.5.2",
    "react-autocomplete": "1.8.1",
    "react-dom": "16.5.2",
    "react-map-gl": "4.0.0",
    "react-pose": "3.1.0",
    "react-pose-text": "3.1.0",
    "react-redux": "5.0.7",
    "react-transition-group": "2.4.0",
    "react-video-renderer": "2.1.1",
    "recompose": "0.27.1",
    "redux": "4.0.0",
    "redux-saga": "0.16.0",
    "redux-thunk": "2.3.0",
    "styled-components": "4.0.2",
    "viewport-mercator-project": "5.2.0",
    "vtt.js": "0.13.0"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public",
    "precommit": "lint-staged"
  },
  "devDependencies": {
    "@quickbaseoss/babel-plugin-styled-components-css-namespace": "0.0.10",
    "@sambego/storybook-state": "^1.0.7",
    "@storybook/addon-actions": "^3.4.8",
    "@storybook/addon-links": "^3.4.8",
    "@storybook/addons": "^3.4.8",
    "@storybook/react": "^3.4.8",
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-plugin-styled-components": "^1.5.1",
    "babel-plugin-styled-components-named": "^0.1.1",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.7",
    "dotenv": "5",
    "dotenv-expand": "4.2.0",
    "eslint": "4.10.0",
    "eslint-config-prettier": "^3.0.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-config-standard-react": "^6.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "7.4.0",
    "exports-loader": "^0.7.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "3.0.1",
    "html-webpack-plugin": "2.29.0",
    "husky": "^1.0.0-rc.13",
    "jest": "20.0.4",
    "lint-staged": "^7.2.2",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "prettier": "^1.14.2",
    "prettier-eslint": "^8.8.2",
    "promise": "8.0.1",
    "raf": "3.4.0",
    "react-dev-utils": "^5.0.1",
    "react-hot-loader": "^4.3.4",
    "resolve": "1.8.1",
    "style-loader": "0.19.0",
    "stylelint": "^9.4.0",
    "stylelint-config-recommended": "^2.1.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.3.2",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node",
      "mjs"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

[Pessimistress]

What is your MapContainer component?

[pr1ntr]

const MapContainer = styled.div`
  ${absoluteFill};
`

It is a styled-component div.

Additionally, all the stuff that is the children of StaticMap has no effect on the result.

[Pessimistress]

Nothing immediately jumps out at me. Do you see any console errors? Can you check if _onMapLoad is actually called?

[pr1ntr]

I get no console errors and it definitely calls _onMapLoad. It is strange, I should run the example and see what happens.

[pr1ntr]

Ok so I realized the second parameter is what the layer should be before, these layers should not be before anything. So now it renders altogether. However, its still rendering weird:

All the sprites are jagged and do not have transparency.

[Pessimistress]

This one I actually know why. Mapbox's custom layer implementation does not support anti-aliasing: mapbox/mapbox-gl-js#7543

Looks like you're not rendering anything 3d. You can try this trick:

const markerIconLayer = new MapboxLayer({ id: 'marker-icon-layer', deck });
markerIconLayer.renderingMode = '2d';
map.addLayer(markerIconLayer);

[pr1ntr]

Hmm, that doesn't seem to help. still jagged and no transparency. The iconAtlas is a png with transparency.
I'm starting to think that this feature is still too experimental to use for anything substantial. Revised code:

    const map = this._mapRef
    const deck = this._deckRef

    const layers = [
      new MapboxLayer({ id: 'points-layer', deck }),
      new MapboxLayer({ id: 'points-layer', deck }),
      new MapboxLayer({ id: 'marker-icon-layer', deck }),
    ]

    layers.forEach(layer => {
      layer.renderingMode = '2d'
      map.addLayer(layer)

    })

  }```

[Pessimistress]

I'm starting to think that this feature is still too experimental to use for anything substantial.

I agree. I'd suggest you chime in on the Mapbox issue, it may help them prioritize a fix.