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
                                                                                 
Add line.Remove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineAdd 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://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&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 lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineAdd 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.

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