Learn how to change a basemap style in a map using the basemap styles service v2 .
The basemap styles service provides a number basemap layer styles such as topography, streets, and imagery that you can use in maps. The basemap styles service v2 comes with additional styles including: ArcGIS Outdoor, OSM Navigation, and OSM Blueprint. This v2 service is recommended for use in your application, as it will be the primary focus of future development.
In this tutorial, you use a <select> dropdown menu with ol-mapbox-style
Prerequisites You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key .
Steps Create a new pen To get started, either complete the Display a map tutorial or use this pen . Set the API key To access location services , you need an API key or OAuth 2.0 access token . To learn how to create and scope your key, visit the Create an API key tutorial.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
In CodePen , update api to use your key.
Use dark colors for code blocks
Change line
1
2
3
4
5
6
7
8
9
10
11
const apiKey = "YOUR_API_KEY" ;
const basemapId = "arcgis/streets" ;
const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/ ${basemapId} ?token= ${apiKey} ` ;
olms.apply(map, basemapURL);
Remove basemap references Remove the basemap, basemap, and the olms function.
Expand
Use dark colors for code blocks
Remove line Remove line Remove line
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
< script >
const map = new ol.Map({ target : "map" });
map.setView(
new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
})
);
const apiKey = "YOUR_API_KEY" ;
const basemapId = "arcgis/streets" ;
const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/ ${basemapId} ?token= ${apiKey} ` ;
olms.apply(map, basemapURL);
</ script >
Add a basemap selector OpenLayers does not have a basemap layer switching widget , so you will use the a plain HTML <select> element.
In the <head> tag, add CSS that will position the <select> menu wrapper element in the upper right corner and provide styling.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
#basemaps-wrapper {
position : absolute;
top : 20px ;
right : 20px ;
}
#basemaps {
font-size : 16px ;
padding : 4px 8px ;
}
</ style >
In the <body> element, add the wrapper tag with an id of basemaps-wrapper.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
< body >
< div id = "map" > </ div >
< div id = "basemaps-wrapper" >
</ div >
In the wrapper element, add a <select> element with basemap layer enumerations and labels.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
< div id = "basemaps-wrapper" >
< select id = "basemaps" >
< option value = "arcgis/outdoor" > arcgis/outdoor </ option >
< option value = "arcgis/community" > arcgis/community </ option >
< option value = "arcgis/navigation" > arcgis/navigation </ option >
< option value = "arcgis/streets" > arcgis/streets </ option >
< option value = "arcgis/streets-relief" > arcgis/streets-relief </ option >
< option value = "arcgis/imagery" > arcgis/imagery </ option >
< option value = "arcgis/oceans" > arcgis/oceans </ option >
< option value = "arcgis/topographic" > arcgis/topographic </ option >
< option value = "arcgis/light-gray" > arcgis/light-gray </ option >
< option value = "arcgis/dark-gray" > arcgis/dark-gray </ option >
< option value = "arcgis/human-geography" > arcgis/human-geography </ option >
< option value = "arcgis/charted-territory" > arcgis/charted-territory </ option >
< option value = "arcgis/nova" > arcgis/nova </ option >
< option value = "osm/standard" > osm/standard </ option >
< option value = "osm/navigation" > osm/navigation </ option >
< option value = "osm/streets" > osm/streets </ option >
< option value = "osm/blueprint" > osm/blueprint </ option >
</ select >
</ div >
Set the initial basemap layer When the page loads, initialize the basemap layer to the first option in the menu.
Create a function called url that computes the style service URL for a basemap layer.
Expand
Use dark colors for code blocks
Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
< script >
const apiKey = "YOUR_API_KEY" ;
const map = new ol.Map({ target : "map" });
map.setView(
new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
})
);
const baseUrl = "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles" ;
const url = ( style ) => ` ${baseUrl} / ${style} ?token= ${apiKey} ` ;
Create a function called set that will clear existing layers and use olms to instantiate a basemap layer by name.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const baseUrl = "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles" ;
const url = ( style ) => ` ${baseUrl} / ${style} ?token= ${apiKey} ` ;
const setBasemap = ( style ) => {
// Clear out existing layers.
map.setLayerGroup( new ol.layer.Group());
// Instantiate the given basemap layer.
olms.apply(map, url(style));
};
Call set to initialize the basemap layer to the arcgis/outdoor enumeration to match the first basemap in the select element.
Expand
Use dark colors for code blocks
Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const setBasemap = ( style ) => {
// Clear out existing layers.
map.setLayerGroup( new ol.layer.Group());
// Instantiate the given basemap layer.
olms.apply(map, url(style));
};
setBasemap( "arcgis/outdoor" );
Set the selected basemap layer Call set when the user selects an option in the <select> menu.
Extract the <select> DOM element using document.query.
Expand
Use dark colors for code blocks
Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
setBasemap( "arcgis/outdoor" );
const basemapsSelectElement = document .querySelector( "#basemaps" );
Call set in response to change events on the <select> element.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const basemapsSelectElement = document .querySelector( "#basemaps" );
basemapsSelectElement.addEventListener( "change" , ( e ) => {
setBasemap(e.target.value);
});
Run the app In CodePen , run your code to display the map.
Use the layer switcher menu at the top right to select and explore different basemap layer styles.
What's Next? Learn how to use additional ArcGIS location services in these tutorials:
