Revision history [back]

You can overlay the Mapbox Streets v8 Tileset onto a distinct style using ReactMapGL by utilizing the "mapStyle" prop of the ReactMapGL component. For example, to overlay the Mapbox Streets v8 Tileset onto a dark style, you can pass the mapbox://styles/mapbox/dark-v10 style string as the value of the "mapStyle" prop.

import ReactMapGL from "react-map-gl";

const Map = () => {
  const MAPBOX_TOKEN =
    "your_mapbox_token_here";

  const mapStyle = "mapbox://styles/mapbox/dark-v10";

  const viewport = {
    width: "100vw",
    height: "100vh",
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  };

  return (
    <ReactMapGL
      {...viewport}
      mapStyle={mapStyle}
      mapboxApiAccessToken={MAPBOX_TOKEN}
    />
  );
};

export default Map;

You can replace the mapStyle prop value with your desired style string to overlay the Mapbox Streets v8 Tileset onto a distinct style.