Add street labels over nearmap (raster) tiles in Mapbox GL + react-map-gl

Map.js

import MapGL, { Source, Layer } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

const nearMapToken = "some.env.var";
const mapBoxToken = "some.env.var";
const rasterSource = {
  id: "raster-tiles",
  type: "raster",
  tiles: [
    `https://api.nearmap.com/tiles/v3/Vert/{z}/{x}/{y}.jpg?apikey=${nearMapToken}`,
  ],
  tileSize: 256,
};

const rasterLayer = {
  id: "simple-tiles",
  type: "raster",
  source: "raster-tiles",
  minzoom: 0,
  maxzoom: 22,
};

const streetLabelsLayer = {
  // borrowed from mapbox mapbox streets v11 style
  type: "symbol",
  metadata: {
    "mapbox:featureComponent": "road-network",
    "mapbox:group": "Road network, road-labels",
  },
  source: "composite",
  "source-layer": "road",
  minzoom: 12,
  filter: [
    "all",
    ["has", "name"],
    [
      "match",
      ["get", "class"],
      [
        "motorway",
        "trunk",
        "primary",
        "secondary",
        "tertiary",
        "street",
        "street_limited",
      ],
      true,
      false,
    ],
  ],
  layout: {
    "text-size": [
      "interpolate",
      ["linear"],
      ["zoom"],
      10,
      [
        "match",
        ["get", "class"],
        ["motorway", "trunk", "primary", "secondary", "tertiary"],
        10,
        9,
      ],
      18,
      [
        "match",
        ["get", "class"],
        ["motorway", "trunk", "primary", "secondary", "tertiary"],
        16,
        14,
      ],
    ],
    "text-max-angle": 30,
    "text-font": ["DIN Pro Regular", "Arial Unicode MS Regular"],
    "symbol-placement": "line",
    "text-padding": 1,
    "text-rotation-alignment": "map",
    "text-pitch-alignment": "viewport",
    "text-field": ["coalesce", ["get", "name_en"], ["get", "name"]],
    "text-letter-spacing": 0.01,
  },
  paint: {
    "text-color": "#fff",
    "text-halo-color": "#000",
    "text-halo-width": 1,
  },
};

export default function Map() {
  return (
    <MapGL
      style={{ width: 1000, height: 700 }}
      mapStyle={{
        version: 8,
        glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        sources: {
          composite: {
            url: "mapbox://mapbox.mapbox-streets-v8",
            type: "vector",
          },
        },
        // with no layers specified, the "basemap" will be blank
        layers: [],
      }}
      mapboxAccessToken={mapBoxToken}
    >
      <Source {...rasterSource} />
      <Layer {...rasterLayer} />
      <Layer {...streetLabelsLayer} />
    </MapGL>
  );
}

if you're looking to toggle rasters + labels on/off, and don't mind having the full streets basemap "on" all the time, you could do this:

<MapGL
  style={{ width: 1000, height: 700 }}
  mapStyle="mapbox://styles/mapbox/streets-v11"
  mapboxAccessToken={mapBoxToken}
>
    <Source {...rasterSource} />
    <Layer {...rasterLayer} />
    <Layer {...streetLabelsLayer} />
</MapGL>