Hi @UndralBatsukh Thanks for your reply. I've tried to implement a test page that works but it still doesnt draw the map. Here is the code and a link to jsfiddle. Looking at the dev tools network tab, I can see that it loads required urls with the token but still map doesn't draw. Am I missing something here?
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>VectorTileLayer | Sample | ArcGIS API for JavaScript 4.21</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.21/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/VectorTileLayer",
"esri/config"
], (Map, MapView, VectorTileLayer, esriConfig) => {
// Create a Map
const map = new Map();
// Make map view and bind it to the map
const view = new MapView({
container: "viewDiv",
map: map,
center: [46.897998, 24.598897],
zoom: 5
});
/********************************************************************
* Add a vector tile layer to the map
*
* The url must point to the style or the vector tile service
*********************************************************************/
const tileLayer = new VectorTileLayer({
url: "https://abc.ab.ca/server/rest/services/Hosted/MyMapService/VectorTileServer"
});
const interceptor = {
urls: tileLayer.url,
before: function (params) {
params.requestOptions.query.token =
"Xj9OUDvMFYz3BHd3fcPnHiJdmmae9gWrfT4WL-VFmJjwoeu82JSC4SCzPc18a7Z_c0VaS-xdFD3neOCtAhn0rKIXaSE7ilsN7Z4F0xTclcGYsDNI-E1UyKtL5YmSkgphSRlwfsrAOU9rEqzu4Z_LDo9b6XFUCi00S5glYTv28pE.";
}
};
esriConfig.request.interceptors.push(interceptor);
map.add(tileLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>