Get "source 'cloudsTileLayer-RasterSource' not found" error when I attempt to add a weather tile layer to Azure Maps

Question

I have a React app using the React-Azure-Maps npm package. I am trying to create a weather layer, which I think is quite similar to the code sample from the layer.

My code to add the layer is as follows:

export function addClouds(map: any): void {       
    // Create a tile layer and add it to the map below the label layer.
    // Visible by default
    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);
}

And here is the error that I get in the browser console:

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

For reference, line 44 of LayerHelpers.tsx is:

map.layers.add(weatherTileLayer);

After extensive searching, I have not been able to find any information at all about this particular error message. I don't understand exactly what the problem is with what I have and am not sure exactly where to go with this.

The closest I've been able to find is this post, but using the exact format it suggested didn't make any difference.

I checked the network tab in the F12 tools, but I didn't see any API call going to Azure.

Can anyone point me in the right direction as to what this error message means and how I could go about fixing it?

Edit: I have also opened a related GitHub issue here.

This looks like it might be specific to the React control as I'm unable to reproduce this using the Azure Maps Web SDK directly (nor have I ever seen this kind of error in the Web SDK). It does look curious that the playground project for this library doesn't have any examples for TileLayer or ImageLayer, the only two layers where the data source is built in. So it's possible this isn't currently supported in that project. — rbrundritt
– rbrundritt, Commented Sep 25, 2023 at 22:58

EJoshuaS - Stand with Ukraine · Accepted Answer · 2023-10-01 14:49:40Z

Someone on the GitHub issue suggested adding the layer declaratively. They gave the following example of this:

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>
  );
}

Collectives™ on Stack Overflow

Get "source 'cloudsTileLayer-RasterSource' not found" error when I attempt to add a weather tile layer to Azure Maps

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related