2

Using react-map-gl I'm unable to overlay my custom sources/layers on top of a predefined style template. When passing the style prop to the map component I am able to add either the template or my custom sources/layers, but not both at once. Here's a quick example:

mapStyle='mapbox://styles/mapbox/streets-v9'
mapStyle={mapStyle}

Individually either will work when I comment out the other. Is there a way to easily extend the mapbox style with my own sources/layers? Below is the full component:

const Map = () => {
  const [viewport, setViewport] = React.useState({
    width: '100%',
    height: '100%',
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  })

  const mapStyle = {
    version: 8,
    sources: {
      states: {
        type: 'geojson',
        data: 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
      }
    },
    layers: [
      {
        id: 'states-fill',
        type: 'fill',
        source: 'states',
        paint: {
          'fill-color': '#627BC1'
        }
      }
    ]
  }

  return (
    <ReactMapGL
      mapboxApiAccessToken={TOKEN}

      /* Here's the problem */
      mapStyle='mapbox://styles/mapbox/streets-v9'
      // mapStyle={mapStyle}

      {...viewport}
      onViewportChange={v => setViewport(v)}
    />
  )
}

0 Answers0