"source '[layer name]-RasterSource" not found" when using Tile Layer

[ethansudman]

Related Stack Overflow question is posted here.

When I try to create a Tile Layer like this:

let weatherTileLayer = new layer.TileLayer({
        tileUrl: 'https://{azMapsDomain}/map/tile?api-version=2.0&tilesetId=microsoft.weather.infrared.main&zoom={z}&x={x}&y={y}',
        opacity: 0.8,
        tileSize: 128,
        maxSourceZoom: 17
    }, 'cloudsTileLayer');

    // Error occurs on this line
    map.layers.add(weatherTileLayer);

I get the following exception:

react-azure-maps.es5.js:55  Error: layers.cloudsTileLayer: source "cloudsTileLayer-RasterSource" not found
    at Object.Or [as emitValidationErrors] (react-azure-maps.es5.js:55:1)
    at mr (react-azure-maps.es5.js:55:1)
    at wr._validate (react-azure-maps.es5.js:55:1)
    at wr.addLayer (react-azure-maps.es5.js:55:1)
    at o.addLayer (react-azure-maps.es5.js:55:1)
    at Xf._addMapboxLayers (react-azure-maps.es5.js:55:1)
    at Xf._addLayer (react-azure-maps.es5.js:55:1)
    at Xf.add (react-azure-maps.es5.js:55:1)
    at addClouds (LayerHelpers.tsx:44:1)
    at MapController.tsx:712:1

Line 44 is map.layers.add(weatherTileLayer); by the way.

[yulinscottkang]

Please refer to the following example on how to add a TileLayer.

import {
  AzureMap,
  AzureMapDataSourceProvider,
  AzureMapsProvider,
  AzureMapLayerProvider
} from "react-azure-maps";
import { AuthenticationType } from "azure-maps-control";

const option = {
  authOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey: ""
  },
  center: [-73.985708, 40.75773],
  zoom: 2
};

export default function MapWithTileLayer() {
  return (
    <div style={{ height: "300px" }}>
      <AzureMapsProvider>
        <AzureMap options={option}>
          <AzureMapDataSourceProvider id={"TileLayer DataSource "}>
            <AzureMapLayerProvider
              id={"TileLayer Layer"}
              options={{
                tileUrl:
                  "https://{azMapsDomain}/map/tile?api-version=2.0&tilesetId=microsoft.weather.infrared.main&zoom={z}&x={x}&y={y}",
                opacity: 0.8,
                tileSize: 256
              }}
              type={"TileLayer"}
            />
          </AzureMapDataSourceProvider>
        </AzureMap>
      </AzureMapsProvider>
    </div>
  );
}