Display a styled vector basemap
Build an app that displays a vector basemap with custom styles.
Overview
You will learn: how to display a vector basemap with custom styles.
With the ArcGIS API for JavaScript you can build mapping applications that use Esri vector basemaps with custom styles. Esri vector basemaps are multi-scale vector tile layers you can create, style and save with the new ArcGIS Vector Tile Style Editor. Each custom style is stored as Tile Layer on ArcGIS Online with a unique portal id. To add the layer as a basemap to your application, you first have to create the vector tile layer (by id), add it to a new basemap, and then add it to your application. Additional tile layers can be also be added to a basemap to enhance it further e.g. hillshade. To learn more about how to create your own custom vector styles, see the Style a Vector Basemap lab.
In this lab, you will build a mapping app that displays a custom vector basemap called Forest and Parks Canvas.
Steps
Create a starter app
-
Go to the JavaScript Starter App.
-
In CodePen, click Fork and save the pen as
ArcGIS DevLabs: Display a styled vector basemap.
Add a styled vector tile layer as a basemap
-
In the
requirestatement, add a reference to the Basemap and VectorTileLayer module.require([ "esri/Map", "esri/views/MapView", //*** ADD ***// "esri/Basemap", "esri/layers/VectorTileLayer", "dojo/domReady!" //*** ADD ***// ], function(Map, MapView, Basemap, VectorTileLayer) { -
In the
function, create a new Basemap and then add a VectorTileLayer as a baseLayer to the basemap. Set the portalItem id to d2ff12395aeb45998c1b154e25d680e5. Remove the reference totopo-vectorand replace it with thebasemap.//*** ADD ***// var basemap = new Basemap({ baseLayers: [ new VectorTileLayer({ portalItem: { id: "d2ff12395aeb45998c1b154e25d680e5" // Forest and Parks Canvas } }) ] }); var map = new Map({ //*** ADD ***// // basemap: "topo-vector", basemap: basemap }); -
Run the code and explore the Forest and Parks Canvas basemap.
Congratulations, you're done!
Your app should look something like this.
Next labs
Display a web map
Build an app that loads and displays a web map.
Add layers to a 3D scene
Build an app that displays feature layers in 3D.
Display a web scene
Build an app that loads and displays a web scene.
Display point, line, and polygon graphics
Create geometries and graphics from coordinates and add them to a map.
Challenge
Add hillshade as a basemap layer
Basemaps can contain multiple baseLayers. To enhance the vector styles with terrain, visit ArcGIS Online and find the id for the World Hillshade layer and add it as a TileLayer to the baseLayers property.
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/VectorTileLayer",
//*** ADD ***//
"esri/layers/TileLayer",
"dojo/domReady!"
//*** ADD ***//
], 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
}
})
]
});
Add your own custom vector basemap
Try the Style a Vector Basemap lab 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.