topic How to set vactorTile Layer as costum basemap? in ArcGIS JavaScript Maps SDK Questions

How to set vactorTile Layer as costum basemap?

SebastianBosbach — Wed, 12 Oct 2016 11:30:44 GMT

Hi everyone,

how can I set a custom vector tile layer as a basemap, so it will appear in the basemap dijit?

When I try to add vector layer as a basemap, it doesn't work because it seems a BaseMapLayer only works with tile based services.

Greetings Sebastian

Re: How to set vactorTile Layer as costum basemap?

SebastianBosbach — Mon, 27 Mar 2017 14:04:58 GMT

Dose nobody have a solution or suggestion to this problem?

I waited some api versions and as I see, there is still not way to ad a vector layer as a basemap.

Greetings Sebastian

Re: How to set vactorTile Layer as costum basemap?

UndralBatsukh — Tue, 28 Mar 2017 18:15:02 GMT

Hi there,

You can add VectorTileLayer as a basemap to the basemapGallery as shown below. You need to specify styleUrl and type properties of the BasemapLayer.

var vtlayer = new BasemapLayer({

styleUrl: "https://www.arcgis.com/sharing/rest/content/items/dfcb45f8a2ad4b58a1a7547188a0a00c/resources/styles/root.json",

type: "VectorTileLayer"

});

var vtlBasemap = new Basemap({

layers: [vtlayer],

title: "Xmas Template",

thumbnailUrl:"images/basemap.png"

});

Please use this working app to see how this is done.

JS Bin - Collaborative JavaScript Debugging

We will update the BasemapLayer documentation to show how to add VectorTileLayer as a basemap to the basemapGallery.

Hope this helps,

-Undral

Re: How to set vactorTile Layer as costum basemap?

SebastianBosbach — Sat, 11 Dec 2021 21:05:36 GMT

Hi, thank you so much Undral.

Your code works very well. The problem was, that this isn't documented in the api reference.

Also the above code only adds the layer to the Gallery, but not to the static "basemaps" object, which I also wanted to do. Because I also want to set my vector tile layer as the initial basemap.

So if anyone else got this problem, her is an example code to do this.

basemaps[basemap.id] = {
    baseMapLayers: [
        {url: basemap.url, type: "VectorTile"}
    ],
    title: basemap.title,
    thumbnailUrl: basemap.thumbnailUrl,
};

The important part is, that you have to set the type to "VectorTile" instead of "VectorTileLayer", wich is needed in the BasemapLayer object.

@Undral

I think it would be good to add this to the api reference. If this is somewhere in the reference, please show me where I could have found this, thanks.

best regards,

Sebastian