You will learn: how to build an app that displays a vector basemap with custom styles.
Applications can access and display vector tile basemaps and basemaps that have custom styles. You can create your own custom styles with the
In this tutorial, you will build a mapping app that displays a custom vector basemap called Forest and Parks Canvas.
Open the JavaScript Starter App on CodePen.
In CodePen, click Fork and save the pen as ArcGIS API for JavaScript Tutorials: Display a styled vector basemap
.
In the main function
, update the zoom
level to 3
.
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543,34.02700],
//*** UPDATE ***//
zoom: 3
});
Run the code and you should see the southwest area of the United States.
In the require
statement, add a reference to the Basemap
and VectorTileLayer
module.
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/VectorTileLayer"
], function(Map, MapView, Basemap, VectorTileLayer) {
At the beginning of the code in the main function
, create a new Basemap
and then add a VectorTileLayer
as a baseLayer
to the basemap. Set the portalItem
ID to d2ff12395aeb45998c1b154e25d680e5. Update the code to remove the reference to topo-vector
and replace it with basemap
.
var basemap = new Basemap({
baseLayers: [
new VectorTileLayer({
portalItem: {
id: "d2ff12395aeb45998c1b154e25d680e5" // Forest and Parks Canvas
}
})
]
});
var map = new Map({
//*** UPDATE ***//
// basemap: "topo-vector",
basemap: basemap
});
Run the code and explore the Forest and Parks Canvas basemap.
Your app should look something like this.
Basemaps
can contain multiple baseLayers
. To enhance the vector styles with terrain, visit TileLayer
to the baseLayers
property.
Add the TileLayer
module and then add the Hillshade and Forest and Parks Canvas layers to the baseLayers
array.
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/VectorTileLayer",
//*** ADD ***//
"esri/layers/TileLayer"
], function(Map, MapView, Basemap, VectorTileLayer, TileLayer) {
var basemap = new Basemap({
baseLayers: [
//*** ADD ***//
new TileLayer({
portalItem: {
id: "1b243539f4514b6ba35e7d995890db1d" // World Hillshade
}
}),
new VectorTileLayer({
portalItem: {
id: "d2ff12395aeb45998c1b154e25d680e5" // Forest and Parks Canvas
},
opacity: 0.5
})
]
});
Try the Style a Vector Basemap tutorial and create your own basemap style. When you are done, find the ID for the basemap and load your own custom basemap into the app.