How to migrate to an ArcGIS basemap You can use the ArcGIS basemap styles service styles to provide the basemap for your application. There are over 30 different styles to choose from such as streets, navigation, light gray, dark gray, OpenStreetMap, and satellite imagery. You can also create and use your own custom basemap styles by using the Vector tile style editor .
In order to access the basemap styles service , you need to get an API key or implement OAuth 2.0 .
Steps Get an API key or implement OAuth 2.0 . Reference the ol-mapbox-style Remove the layers parameter and its contents from your map. Set the basemap styles service URL, style enumeration, and API key. Learn more in Introduction to basemap layers . Apply the basemap URL to your map using olms. Example OpenStreetMap tile layer to ArcGIS vector basemap layer This example replaces the OSM tile layer with the arcgis/streets basemap style . To do so, you will need to access the ol-mapbox-style
Use dark colors for code blocks
Add line. Remove line Remove line Remove line Remove line Remove line Remove line Remove 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
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@10.5.0/dist/olms.js" > </ script >
< script >
const map = new ol.Map({
target : "map" ,
view : new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
}),
layers : [
new TileLayer({
source : new ol.source.OSM(),
}),
],
});
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 >
To learn more about how to display a basemap with OpenLayers, go to the Display a map tutorial.
How to access and display GeoJSON data You can host your GeoJSON data as a feature layer in a feature service. The advantage of this is that you can use a SQL or spatial query to access a subset of the GeoJSON data.
Example Display GeoJSON data The example below demonstrates how to access GeoJSON from a hosted feature layer versus from a static file.
Use dark colors for code blocks
Remove line Remove line Remove line Remove line Remove line Remove line Remove line Remove line Remove line Remove 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
< script >
const map = new ol.Map({
layers : [
new ol.layer.Vector({
source : new ol.source.Vector({
format : new ol.format.GeoJSON(),
url : "/data/myGeoJSON.geojson"
})
})
],
});
olms.apply(map, basemapURL)
.then( function ( map ) {
const pointLayer = new ol.layer.Vector({
source : new ol.source.Vector({
format : new ol.format.GeoJSON(),
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=geojson"
})
});
map.addLayer(pointLayer);
});
</ script >
To learn more about how to load a feature layer with OpenLayers, go to the Add a feature layer tutorial.