Skip to content

Commit 0e35728

Browse files
lukemckinstrylukemckinstry
authored
Merge pull request #12913 from CesiumGS/google-azure-2d-imagery
Google2D & Azure2D ImageryProvider classes
2 parents 6e3195b + 85eb619 commit 0e35728

40 files changed

+2043
-9
lines changed

‎Apps/Sandcastle/gallery/Google 2D Tiles with Custom Styles.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
9+
/>
10+
<meta
11+
name="description"
12+
content="Imagery tiles from Google Maps with additional parameters to create overlays and custom styles."
13+
/>
14+
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
15+
<title>Cesium Demo</title>
16+
<script type="text/javascript" src="../Sandcastle-header.js"></script>
17+
<script type="module" src="../load-cesium-es6.js"></script>
18+
</head>
19+
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
20+
<style>
21+
@import url(../templates/bucket.css);
22+
</style>
23+
<div id="cesiumContainer" class="fullSize"></div>
24+
<div id="loadingOverlay"><h1>Loading...</h1></div>
25+
<div id="toolbar"></div>
26+
<script id="cesium_sandcastle_script">
27+
window.startup = async function (Cesium) {
28+
"use strict";
29+
//Sandcastle_Begin
30+
const assetId = 3830184;
31+
32+
const base = Cesium.ImageryLayer.fromProviderAsync(
33+
Cesium.Google2DImageryProvider.fromIonAssetId({
34+
assetId,
35+
mapType: "satellite",
36+
}),
37+
);
38+
39+
const overlay = Cesium.ImageryLayer.fromProviderAsync(
40+
Cesium.Google2DImageryProvider.fromIonAssetId({
41+
assetId,
42+
overlayLayerType: "layerRoadmap",
43+
styles: [
44+
{
45+
stylers: [{ hue: "#00ffe6" }, { saturation: -20 }],
46+
},
47+
{
48+
featureType: "road",
49+
elementType: "geometry",
50+
stylers: [{ lightness: 100 }, { visibility: "simplified" }],
51+
},
52+
],
53+
}),
54+
);
55+
56+
const viewer = new Cesium.Viewer("cesiumContainer", {
57+
animation: false,
58+
baseLayer: false,
59+
baseLayerPicker: false,
60+
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
61+
timeline: false,
62+
sceneModePicker: false,
63+
navigationHelpButton: false,
64+
homeButton: false,
65+
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
66+
});
67+
viewer.geocoder.viewModel.keepExpanded = true;
68+
69+
viewer.imageryLayers.add(base);
70+
viewer.imageryLayers.add(overlay);
71+
72+
viewer.scene.camera.flyTo({
73+
duration: 0,
74+
destination: new Cesium.Rectangle.fromDegrees(
75+
//Philly
76+
-75.280266,
77+
39.867004,
78+
-74.955763,
79+
40.137992,
80+
),
81+
});
82+
//Sandcastle_End
83+
Sandcastle.finishedLoading();
84+
};
85+
if (typeof Cesium !== "undefined") {
86+
window.startupCalled = true;
87+
window.startup(Cesium).catch((error) => {
88+
"use strict";
89+
console.error(error);
90+
});
91+
}
92+
</script>
93+
</body>
94+
</html>

‎Apps/Sandcastle/gallery/Google 2D Tiles with Custom Styles.jpg‎

29 KB
Loading

‎Apps/Sandcastle/gallery/Google 2D Tiles.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
9+
/>
10+
<meta name="description" content="Global imagery data from Google Maps." />
11+
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
12+
<title>Cesium Demo</title>
13+
<script type="text/javascript" src="../Sandcastle-header.js"></script>
14+
<script type="module" src="../load-cesium-es6.js"></script>
15+
</head>
16+
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
17+
<style>
18+
@import url(../templates/bucket.css);
19+
</style>
20+
<div id="cesiumContainer" class="fullSize"></div>
21+
<div id="loadingOverlay"><h1>Loading...</h1></div>
22+
<div id="toolbar"></div>
23+
<script id="cesium_sandcastle_script">
24+
window.startup = async function (Cesium) {
25+
"use strict";
26+
//Sandcastle_Begin
27+
const assetId = 3830184;
28+
29+
const google = Cesium.ImageryLayer.fromProviderAsync(
30+
Cesium.IonImageryProvider.fromAssetId(assetId),
31+
);
32+
33+
const viewer = new Cesium.Viewer("cesiumContainer", {
34+
animation: false,
35+
baseLayer: false,
36+
baseLayerPicker: false,
37+
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
38+
timeline: false,
39+
sceneModePicker: false,
40+
navigationHelpButton: false,
41+
homeButton: false,
42+
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
43+
});
44+
viewer.geocoder.viewModel.keepExpanded = true;
45+
46+
viewer.imageryLayers.add(google);
47+
48+
viewer.scene.camera.flyTo({
49+
duration: 0,
50+
destination: new Cesium.Rectangle.fromDegrees(
51+
//Philly
52+
-75.280266,
53+
39.867004,
54+
-74.955763,
55+
40.137992,
56+
),
57+
}); //Sandcastle_End
58+
Sandcastle.finishedLoading();
59+
};
60+
if (typeof Cesium !== "undefined") {
61+
window.startupCalled = true;
62+
window.startup(Cesium).catch((error) => {
63+
"use strict";
64+
console.error(error);
65+
});
66+
}
67+
</script>
68+
</body>
69+
</html>

‎Apps/Sandcastle/gallery/Google 2D Tiles.jpg‎

20.1 KB
Loading

‎Apps/Sandcastle/gallery/Imagery Assets available from ion.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
9+
/>
10+
<meta name="description" content="Global imagery assets available from Cesium ion." />
11+
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
12+
<title>Cesium Demo</title>
13+
<script type="text/javascript" src="../Sandcastle-header.js"></script>
14+
<script type="module" src="../load-cesium-es6.js"></script>
15+
</head>
16+
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
17+
<style>
18+
@import url(../templates/bucket.css);
19+
</style>
20+
<div id="cesiumContainer" class="fullSize"></div>
21+
<div id="loadingOverlay"><h1>Loading...</h1></div>
22+
<div id="toolbar"></div>
23+
<script id="cesium_sandcastle_script">
24+
window.startup = async function (Cesium) {
25+
"use strict";
26+
//Sandcastle_Begin
27+
const viewer = new Cesium.Viewer("cesiumContainer", {
28+
animation: false,
29+
baseLayer: false,
30+
baseLayerPicker: false,
31+
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
32+
timeline: false,
33+
sceneModePicker: false,
34+
navigationHelpButton: false,
35+
homeButton: false,
36+
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
37+
});
38+
viewer.geocoder.viewModel.keepExpanded = true;
39+
40+
const menuOptions = [];
41+
42+
const dropdownOptions = [
43+
{ label: "Google Maps 2D Contour", assetId: 3830186 },
44+
{ label: "Google Maps 2D Labels Only", assetId: 3830185 },
45+
{ label: "Google Maps 2D Roadmap", assetId: 3830184 },
46+
{ label: "Google Maps 2D Satellite", assetId: 3830182 },
47+
{ label: "Google Maps 2D Satellite with Labels", assetId: 3830183 },
48+
{ label: "Bing Maps Aerial", assetId: 2 },
49+
{ label: "Bing Maps Aerial with Labels", assetId: 3 },
50+
{ label: "Bing Maps Road", assetId: 4 },
51+
{ label: "Bing Maps Labels Only", assetId: 2411391 },
52+
{ label: "Sentinel-2", assetId: 3954 },
53+
];
54+
55+
function showLayer(assetId) {
56+
viewer.imageryLayers.removeAll(true);
57+
const layer = Cesium.ImageryLayer.fromProviderAsync(
58+
Cesium.IonImageryProvider.fromAssetId(assetId),
59+
);
60+
viewer.imageryLayers.add(layer);
61+
}
62+
63+
dropdownOptions.forEach((opt) => {
64+
const option = {
65+
text: opt.label,
66+
onselect: function () {
67+
showLayer(opt.assetId);
68+
},
69+
};
70+
menuOptions.push(option);
71+
});
72+
73+
Sandcastle.addToolbarMenu(menuOptions);
74+
75+
showLayer(3830186);
76+
77+
viewer.scene.camera.flyTo({
78+
duration: 0,
79+
destination: new Cesium.Rectangle.fromDegrees(
80+
//Philly
81+
-75.280266,
82+
39.867004,
83+
-74.955763,
84+
40.137992,
85+
),
86+
}); //Sandcastle_End
87+
Sandcastle.finishedLoading();
88+
};
89+
if (typeof Cesium !== "undefined") {
90+
window.startupCalled = true;
91+
window.startup(Cesium).catch((error) => {
92+
"use strict";
93+
console.error(error);
94+
});
95+
}
96+
</script>
97+
</body>
98+
</html>

‎Apps/Sandcastle/gallery/Imagery Assets available from ion.jpg‎

7.91 KB
Loading

‎Apps/Sandcastle/gallery/development/Azure 2D Tiles.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
9+
/>
10+
<meta name="description" content="Global imagery data from Azure Maps." />
11+
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
12+
<title>Cesium Demo</title>
13+
<script type="text/javascript" src="../Sandcastle-header.js"></script>
14+
<script type="module" src="../load-cesium-es6.js"></script>
15+
</head>
16+
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
17+
<style>
18+
@import url(../templates/bucket.css);
19+
</style>
20+
<div id="cesiumContainer" class="fullSize"></div>
21+
<div id="loadingOverlay"><h1>Loading...</h1></div>
22+
<div id="toolbar"></div>
23+
<script id="cesium_sandcastle_script">
24+
window.startup = async function (Cesium) {
25+
"use strict";
26+
//Sandcastle_Begin
27+
Cesium.Ion.defaultServer = "https://api.ion-staging.cesium.com";
28+
Cesium.Ion.defaultAccessToken = "";
29+
30+
const assetId = 1683;
31+
32+
const azure = Cesium.ImageryLayer.fromProviderAsync(
33+
Cesium.IonImageryProvider.fromAssetId(assetId),
34+
);
35+
36+
const viewer = new Cesium.Viewer("cesiumContainer", {
37+
animation: false,
38+
baseLayer: false,
39+
baseLayerPicker: false,
40+
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
41+
timeline: false,
42+
sceneModePicker: false,
43+
navigationHelpButton: false,
44+
homeButton: false,
45+
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
46+
});
47+
viewer.geocoder.viewModel.keepExpanded = true;
48+
49+
viewer.imageryLayers.add(azure);
50+
51+
viewer.scene.camera.flyTo({
52+
duration: 0,
53+
destination: new Cesium.Rectangle.fromDegrees(
54+
//Philly
55+
-75.280266,
56+
39.867004,
57+
-74.955763,
58+
40.137992,
59+
),
60+
}); //Sandcastle_End
61+
Sandcastle.finishedLoading();
62+
};
63+
if (typeof Cesium !== "undefined") {
64+
window.startupCalled = true;
65+
window.startup(Cesium).catch((error) => {
66+
"use strict";
67+
console.error(error);
68+
});
69+
}
70+
</script>
71+
</body>
72+
</html>

‎Apps/Sandcastle/gallery/development/Azure 2D Tiles.jpg‎

22.7 KB
Loading

‎CHANGES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
#### Additions :tada:
2222

23+
- Adds Google2DImageryProvider to load imagery from [Google Maps](https://developers.google.com/maps/documentation/tile/2d-tiles-overview) [#12913](https://github.com/CesiumGS/cesium/pull/12913)
2324
- Adds an async factory method for the Material class that allows callers to wait on resource loading. [#10566](https://github.com/CesiumGS/cesium/issues/10566)
2425

2526
## 1.133.1 - 2025-09-08

‎packages/engine/Source/Core/GoogleMaps.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ GoogleMaps.defaultApiKey = undefined;
2525
* Gets or sets the default Google Map Tiles API endpoint.
2626
*
2727
* @type {string|Resource}
28-
* @default https://tile.googleapis.com/v1/
28+
* @default https://tile.googleapis.com/
2929
*/
3030
GoogleMaps.mapTilesApiEndpoint = new Resource({
31-
url: "https://tile.googleapis.com/v1/",
31+
url: "https://tile.googleapis.com/",
3232
});
3333

3434
GoogleMaps.getDefaultCredit = function () {

0 commit comments

Comments
 (0)