WebTileLayer not loading in ESRI map

Question

I am trying to add a WebTileLayer to my ESRI map and the code runs without any problems. I can see the protobuf files being received by looking at the network inspector, however they do not appear on the map.

<script>
require([
 "esri/Map",
 "esri/views/MapView",
 "esri/layers/WebTileLayer",
 "esri/layers/support/TileInfo",
 "dojo/domReady!"
], function(Map, MapView, WebTileLayer, TileInfo) {
 var map = new Map({
 basemap: "streets"
 });
 var view = new MapView({
 container: "viewDiv",
 map: map,
 zoom: 18,
 center: [-89.37318187952042, 45.61155180826724]
 });
 var vtlayer = new WebTileLayer("http://localhost:3000/featurelayers/{level}/{col}/{row}.pbf");
 map.add(vtlayer);
 vtlayer.visible = true;
});
</script>

I have tried styling the layer hoping that they might just be hidden but that didnt seem to help. I am using ArcGIS API for JavaScript 4.

Answer 1

I would check out the Leaflet ESRI plug-in for Javascript. See the following link and the other examples in the GitHub repo for different options on loading your basemap: https://esri.github.io/esri-leaflet/examples/. Hope it helps.