RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/cesiumjs/scenes/change-language-labels-for-static-basemap-tiles/ below:

Tutorial: Change language labels for static basemap tiles | CesiumJS

Learn how to change language labels for static basemap tiles service.

Change language labels for static basemap tiles using API key authentication Change language labels for static basemap tiles using user authentication

The ArcGIS Static Basemap Tiles service provides access to raster basemap tiles for the world. The service supports a number of ArcGIS styles such as navigation, streets, outdoor, and light-gray. The tiles are returned as PNG files.

In this tutorial, you use the dropdown menu to toggle between different languages for the static basemap tiles.

Mapping and location services guide

To learn more, go to Introduction to the Static Basemap Tiles service.

Prerequisites

An ArcGIS Location Platform account.

Steps Get the starter app

Select a type of authentication below and follow the steps to create a new application.

You can choose one of the following to create a new CodePen:

Option 1: Complete the Display a scene tutorial; or,
Option 2: Start from the Display a scene tutorial .

Go to the Display a scene tutorial and download the solution.
Unzip the folder and open it in a text editor of your choice, such as Visual Studio Code. The starter app includes the following:
- callback.html: This contains callback as part of the authentication process.
- index.html: This contains app logic and the OAuth 2.0 code necessary to perform the authentication.

Set up authentication

Create developer credentials in your portal for the type of authentication you selected.

Create a new API key credential with the correct privileges to access the resources used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
  - Location services > Basemaps > Static basemap tiles
Copy the API key access token to your clipboard when prompted.

Create a new OAuth credential to register the application.

Go to the Create OAuth credentials for user authentication tutorial to create an OAuth credential.
Copy the Client ID and Redirect URL from your OAuth credentials item and paste them to a safe location. They will be used in a later step.

Note

To use this application, users must have an ArcGIS account with the necessary privileges to access all resources and services.

Set developer credentials

Use the API key or OAuth developer credentials created in the previous step in your application.

Add <script> elements in the HTML <body> and create an accessToken variable to store your access token. Set YOUR_ACCESS_TOKEN with the access token you previously copied from your API key credentials.

Expand

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

    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";

  </script>

In both the index.html and callback.html files, set the properties of clientId and redirectUri with the client ID and redirect URL of your OAuth credentials.

index.html

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
    /* Use for user authentication */
    const clientId = "YOUR_CLIENT_ID"; // Your client ID from OAuth credentials
    const redirectUri = "YOUR_REDIRECT_URI"; // The redirect URL registered in your OAuth credentials
    const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
      clientId,
      redirectUri,
      portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
    })

    const accessToken = session.token;

callback.html

Use dark colors for code blocks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    arcgisRest.ArcGISIdentityManager.completeOAuth2({
      clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
      redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
      portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
    })

Run the app and ensure you can sign in successfully.

If you are unable to sign in, make sure you have the correct redirect URL and port. This URL varies based on your application and typically takes the format of https://<server>[:port]/callback.html or http://my-arcgis-app:/auth. For example, if you are running an application on http://127.0.0.1:5500/, set http://127.0.0.1:5500/callback.html as your redirect URL in the index.html and callback.html file and your developer credential. They all have to match!

Set the defaultAccessToken included with Cesium to authenticate requests to the ArcGIS services used in this tutorial.

index.html

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
    Cesium.ArcGisMapService.defaultAccessToken = accessToken;

Get a Cesium ion access token

All Cesium applications must use an access token provided through Cesium ion. This token allows you to access assets such as Cesium World Terrain in your application.

Go to your Cesium ion dashboard to generate an access token. Copy the key to your clipboard.

Create a cesiumAccessToken variable and replace YOUR_CESIUM_ACCESS_TOKEN with the access token you copied from the Cesium ion dashboard.

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

    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";

    // or

    /* Use for user authentication */
    // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
    //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
    //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
    //   portal: "YOUR_PORTAL_URL" // Your portal URL
    // })

    // const accessToken = session.token;

    Cesium.ArcGisMapService.defaultAccessToken = accessToken;

    const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

  </script>

Configure Cesium.Ion.defaultAccessToken with the Cesium access token to validate the application.

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

    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";

    // or

    /* Use for user authentication */
    // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
    //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
    //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
    //   portal: "YOUR_PORTAL_URL" // Your portal URL
    // })

    // const accessToken = session.token;

    Cesium.ArcGisMapService.defaultAccessToken = accessToken;

    const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

    Cesium.Ion.defaultAccessToken = cesiumAccessToken;

  </script>

Add a language selector

Add a menu that allows users to change the display language of your map. CesiumJS does not have a built-in selector widget, so you will create an HTML <select> element.

In the <body> element, add a select element, which you will populate in a later step.

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

<body>
  <div id="cesiumContainer"></div>

  <div id="language-wrapper">
    <select id="language"></select>
  </div>

</body>

ArcGIS REST API

Go to the REST API reference for the service endpoint, requests, parameters, and supported languages.

In the <head> tag, add CSS that will position the <select> menu element and its wrapper in the upper right corner and provide styling.

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
  <style>
    html,
    body,
    #cesiumContainer {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }


    #language-wrapper {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(255, 255, 255, 0);
    }

    #language {
      font-size: 16px;
      padding: 4px 8px;
    }


  </style>

Update the camera's viewpoint

Change the camera's destination to 8.20, 46.90, 300000. This will focus the camera on Switzerland.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    viewer.camera.setView({

      destination: Cesium.Cartesian3.fromDegrees(8.20, 46.90, 250000),

      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-90.0),
      }
    });

Remove base layer references

Remove arcGisImagery, terrain, and the baseLayer properties from the viewer.

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
82
    const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

    const viewer = new Cesium.Viewer("cesiumContainer", {

      baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

      terrain: Cesium.Terrain.fromWorldTerrain(),

      timeline: false,
      animation: false,
      geocoder: false

    });

Set the basemap

When the scene loads, initialize the app to display the static basemap tiles in English.

Create a constant variable called basemapEnum to define the default basemap style and set the value to arcgis/outdoor.

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    const basemapEnum = 'arcgis/outdoor';

Create a function called url that takes a language as a parameter. This will create the URL of the static basemap tiles for that specified language.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    const basemapEnum = 'arcgis/outdoor';

    const baseUrl = `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1`
    const url = (language) => `${baseUrl}/${basemapEnum}/static/tile/{z}/{y}/{x}?token=${accessToken}&language=${language}`;

Create a defaultLanguage variable for the basemap, which is en for English.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    const basemapEnum = 'arcgis/outdoor';

    const baseUrl = `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1`
    const url = (language) => `${baseUrl}/${basemapEnum}/static/tile/{z}/{y}/{x}?token=${accessToken}&language=${language}`;

    const defaultLanguage = "en";

Import arcgisRest.request() to make a request to the Static Basemap Tiles service. This dynamically fetches the available basemap languages and populates the select element.

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
   <!-- ArcGIS REST JS -->
   <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    const selector = document.querySelector("#language");

    arcgisRest.request(`${baseUrl}/self`, {
      httpMethod: "GET",
      authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
    }).then(response => {
      response.languages.forEach(language => {
        const option = document.createElement("option");
        option.value = language.code
        option.textContent = language.name
        selector.appendChild(option)
      })
    })

Fetch the service URL to retrieve the basemap JSON. Then, create an UrlTemplateImageryProvider object from the JSON.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    arcgisRest.request(`${baseUrl}/${basemapEnum}/static`, {
        httpMethod: "GET",
        authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
    }).then(data => {

        const imageryProvider = new Cesium.UrlTemplateImageryProvider({
          url: url(defaultLanguage),
          tileHeight: 512,

        });

      });

Create a basemapCredit and instantiate a Credit object from the copyrightText string of the JSON. CesiumJS does not provide attribution automatically for Static Basemap Tiles service. Therefore, you are required to add this attribution manually.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    let basemapCredit;

    const selector = document.querySelector("#language");

    arcgisRest.request(`${baseUrl}/self`, {
      httpMethod: "GET",
      authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
    }).then(response => {
      response.languages.forEach(language => {
        const option = document.createElement("option");
        option.value = language.code
        option.textContent = language.name
        selector.appendChild(option)
      })
    })

    arcgisRest.request(`${baseUrl}/${basemapEnum}/static`, {
        httpMethod: "GET",
        authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
    }).then(data => {

        basemapCredit = data.copyrightText

        const imageryProvider = new Cesium.UrlTemplateImageryProvider({
          url: url(defaultLanguage),
          tileHeight: 512,

          credit: basemapCredit

        });

      });

Mapping and location services guide

To learn more about attribution requirements, go to Attribution

Add the imageryProvider to the viewer.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    arcgisRest.request(`${baseUrl}/${basemapEnum}/static`, {
        httpMethod: "GET",
        authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
    }).then(data => {

        basemapCredit = data.copyrightText

        const imageryProvider = new Cesium.UrlTemplateImageryProvider({
          url: url(defaultLanguage),
          tileHeight: 512,

          credit: basemapCredit

        });

        viewer.imageryLayers.addImageryProvider(imageryProvider);

      });

Run the code to ensure that the <select> element contains different language enumerations.

Add an event listener

Add an event listener for the selector.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    selector.addEventListener("change", (e) => {

    });

Create a new UrlTemplateImageryProvider using the selected language.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    selector.addEventListener("change", (e) => {

      const newImageryProvider = new Cesium.UrlTemplateImageryProvider({
        url: url(e.target.value),
        tileWidth: 512,
        tileHeight: 512,
        credit: basemapCredit
      });

    });

Update the viewer with the new language.

Expand

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    selector.addEventListener("change", (e) => {

      const newImageryProvider = new Cesium.UrlTemplateImageryProvider({
        url: url(e.target.value),
        tileWidth: 512,
        tileHeight: 512,
        credit: basemapCredit
      });

      viewer.imageryLayers.removeAll();
      viewer.imageryLayers.addImageryProvider(newImageryProvider);

    });

Run the app

Run the app.

The map should be displayed in English and you should be able to use the controls to switch between language labels.

What's next?

Learn how to use additional ArcGIS Location Services in these tutorials:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4