Community
Select to view content in your preferred language

Failed to load layer - Ordnance Survey API

162
1
12-12-2024 09:07 AM
Labels (1)
Labels
VaniBhaskaran
by
New Contributor
‎12-12-2024 09:07 AM

Hi,

 

I am trying to implement ARC GIS maps with Ordnance survey base map by calling API using API key. I am calling the Ordnance survey API throw WMTSLayer function. However I get error as below: 

4.31/:132 [esri.layers.WMTSLayer] #load() Failed to load layer (title: 'Layer', id:

 

Would like to know what is causing this error.

Below is the code I am testing.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WMTS Layer with Ordnance Survey</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.31/"></script>
    <style>
        html, body, #viewDiv {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="viewDiv"></div>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/WMTSLayer"
        ], function(Map, MapView, WMTSLayer) {
           
            // Define the WMTS layer using the OS API
            const wmtsLayer = new WMTSLayer({
                url: "https://api.os.uk/maps/wmts/v1?key=API_KEY", 
                activeLayer: "OS Outdoor 27700", 
                tileMatrixSet: "BritishNationalGrid", 
                spatialReference: {
                    wkid: 27700 // EPSG:27700
                }
            });

            // Create a map and add the WMTS layer
            const map = new Map({
                basemap: {
                    baseLayers: [wmtsLayer]
                }
            });

            // Create a MapView for the map
            const view = new MapView({
                container: "viewDiv", // Div element id
                map: map,
                center: [400000, 400000],
                zoom: 10,
                spatialReference: {
                    wkid: 27700
                }
            });
        });
    </script>
</body>
</html>

 

 

0 Kudos
1 Reply
David_McRitchie
by Esri Regular Contributor
Esri Regular Contributor
‎12-17-2024 09:30 AM

Hey Vani,

For this since there is a key within the WMTS you won't be able to put this in with the WTMS URL request, instead you will need to add the key as a Custom Parameter.

For example

 

 const wmtsLayer = new WMTSLayer({
                url: "https://api.os.uk/maps/raster/v1/wmts", 
                customParameters: { 
                  key: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"
                },
                activeLayer: "OS Outdoor 27700", 
                tileMatrixSet: "BritishNationalGrid", 
                spatialReference: {
                    wkid: 27700 // EPSG:27700
                }
            });

I would also check the URL you are using for the WMTS.

 

Hope that helps!

David

Esri UK -Technical Support Analyst
0 Kudos