Adding custom tilelayer

[Jinnified]

I wonder if react-map-gl can accept third-party tile layer? I was looking at adding a raster tile layer example on mapbox: https://www.mapbox.com/mapbox-gl-js/example/map-tiles/

so In the react-map-gl place when i configure the map, i have the following:

const rasterStyle = {
      "version": 8,
      "sources": {
          "raster-tiles": {
              "type": "raster",
              "url": "http://webrd02.is.xxxx.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
              "tileSize": 256
          }
      },
      "layers": [{
          "id": "simple-tiles",
          "type": "raster",
          "source": "raster-tiles",
          "minzoom": 0,
          "maxzoom": 22
      }]
    }

and provided this style to the react map gl

<MapGL { ...viewport } mapStyle={rasterStyle} onChangeViewport={ this._onChangeViewport }>
          <SVGOverlay { ...viewport } redraw={ this._redrawSVGOverlay }/>,
          <CanvasOverlay { ...viewport } redraw={ this._redrawCanvasOverlay }/>
        </MapGL>

However, I am getting resource not found error

fit-bounds.js:27 Warning: Failed prop type: Invalid prop `mapStyle` supplied to `MapGL`.
    in MapGL (created by RouteOverlay)
    in RouteOverlay (created by Connect(RouteOverlay))
    in Connect(RouteOverlay) (created by WebglRoute)
    in div (created by WebglRoute)
    in WebglRoute (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by App)
    in App
    in Provider

Failed to load resource: the server responded with a status of 404 (Not Found)

but this particular tilelayer works fine in my leaflet project.

any help would be appreciated

[vicapow]

mapStyle is expected to be an ImmutableJS object or a url string. Wrapping your style first in an ImmutableJS object with Immutable.fromJS(mapStyle) should resolve the issue.

[Jinnified]

thank you for your help, the error is gone, however the tile layer is not rendering, i had a test static page using mapbox gl rendering the same tile layer which works fine, it;s something like this:

var map = new mapboxgl.Map({
        container: 'map',
        style: {
          "version": 8,
          "sources": {
            "raster-tiles": {
                "type": "raster",
                'tiles': [
                  'http://webrd02.is.xxx.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
                ],
                "tileSize": 256
            }
          },
          "layers": [{
              "id": "test",
              "type": "raster",
              "source": "raster-tiles",
              "minzoom": 0,
              "maxzoom": 22
          }]
        },
center: [120, 30], // starting position
        zoom: 9 // starting zoom
      })

so I was throwing the same 'style' object into the react-map-gl as i did in the original post with Immutable js around it, but the tile didn;t render at all and there is no error, did i miss something obvious?

I can see 200 for all my raster tiles over the network, and i assume they are all getting back fine, but it seems something is stopping it from show up in the canvas?

[Jinnified]

the map just looks like a layer of light gray

[vicapow]

Can you post here the minimum code example that demonstrates the issue you're seeing?

[Jinnified]

sorry, i made a stupid mistake, i didn't set the center and zoom correctly, as the map zoomed in very close in the middle of no where, so it looks like a gray screen, -__-!

[vicapow]

no worries. glad you figured it out!

[Jinnified]

thanks again for your help, much appreciated :))

[kennetpostigo]

@Jinnified I'm trying this out get that my container is undefined. How did you get around this from happening. The container is a div wrapping around the <DeckGL /> component with the id on the div set to mapboxcontainer