Add vector tile map in basemap gallery

ADITYAKUMAR1 — Thu, 07 Dec 2023 16:52:32 GMT

Hi,

I am working with ArcGIS JS 4.x. I am trying to add custom basemap layer in Basemap gallery along with the default basemaps.

this.basemapGallery = new BasemapGallery({
view: mapView,
container: this.basemapGalleryDiv,
source: {
query: {
title: "Custom Basemap",
},
updateBasemapsCallback: (items) => {
if (this.map && this.map.config && this.map.config.map && this.map.config.map.baseMapService) {

baseMapservices = this.map.config.map.baseMapService;

array.forEach(baseMapservices, lang.hitch(this, function (mapservice) {
if (mapservice != null) {
var customBasemapServiceUrl = mapservice.MapServiceURL;

esriUtil.addProxyRule({
urlPrefix: customBasemapServiceUrl,
proxyUrl: _globalGISUrl + "Proxy/proxy.ashx"
});
// let text = customBasemapServiceUrl;
let result = ((customBasemapServiceUrl.endsWith("json")) || (customBasemapServiceUrl.endsWith("VectorTileServer")));

if (result) {
customBasemapLayer = new VectorTileLayer({
url: customBasemapServiceUrl
});
}
else {
customBasemapLayer = new BasemapLayer({ url: customBasemapServiceUrl });
}
this.customBasemap = new Basemap({
baseLayers: [
customBasemapLayer
],
title: mapservice.MapServiceName,
id: mapservice.MapServiceName,
thumbnailUrl: customBasemapServiceUrl + '/info/thumbnail'

// });
});
if (this.customBasemap) {
items.push(this.customBasemap);
} // this.customBasemaps.push(this.customBasemap);
}
}));
}

return items;
}
}

});

This code works fine when I have the vector tile layer ending with .json. But when I try to add vector tile layer from arcgis Server I am not getting any basemap on the map. When I checked the error I found there is an extra ".pbf " after the tile url.

Any idea why this is behaving tile this and how to fx it?

Thanks

Aditya Kumar

topic Add vector tile map in basemap gallery in ArcGIS JavaScript Maps SDK Questions

Add vector tile map in basemap gallery