Migration

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

  1. Get an API key or implement OAuth 2.0.
  2. Reference the ol-mapbox-style library.
  3. Remove the layers parameter and its contents from your map.
  4. Set the basemap styles service URL, style enumeration, and API key. Learn more in Introduction to basemap layers.
  5. 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 library.

Use dark colors for code blocks
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/npm/ol@v8.2.0/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@10.6.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>

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
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>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.