Skip to content

feat(samples): add Cloud-Based Map Styling demo #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dkhawk wants to merge 1 commit into
base: feature/new_features_with_0.2.2_sdk
Choose a base branch
from
Draft

feat(samples): add Cloud-Based Map Styling demo #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions Maps3DSamples/ApiDemos/common/src/main/res/layout/activity_cloud_styling.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2026 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:map3d="http://schemas.android.com/apk/res-auto"
android:id="@+id/map_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<!-- Top AppBar with Navigation Toolbar -->
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#80BB86FC"
app:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>

<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/top_bar"
style="@style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:title="@string/feature_title_cloud_styling"
app:titleTextColor="@android:color/white"
/>
</com.google.android.material.appbar.AppBarLayout>

<!-- Fullscreen 3D Map View configured with custom Cloud Map ID -->
<com.google.android.gms.maps3d.Map3DView
android:id="@+id/map3dView"
android:layout_width="0dp"
android:layout_height="0dp"
map3d:mapId="9a35234a36da44d2c47bf626"
map3d:mode="roadmap"
map3d:centerLat="37.7915"
map3d:centerLng="-122.4010"
map3d:centerAlt="250"
map3d:heading="45"
map3d:tilt="65"
map3d:range="800"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>

<!-- Bottom Map Mode Selection Card Overlay -->
<androidx.cardview.widget.CardView
android:id="@+id/control_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="12dp"
app:cardCornerRadius="16dp"
app:cardElevation="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:orientation="vertical"
>

<TextView
style="@style/TextAppearance.Material3.LabelLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Map Mode"
android:textStyle="bold"
/>

<RadioGroup
android:id="@+id/rg_map_mode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center_vertical"
android:orientation="horizontal"
>

<RadioButton
android:id="@+id/rb_roadmap"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="Roadmap"
/>

<RadioButton
android:id="@+id/rb_hybrid"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hybrid"
/>

<RadioButton
android:id="@+id/rb_satellite"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Satellite"
/>
</RadioGroup>
</LinearLayout>
</androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>
82 changes: 82 additions & 0 deletions Maps3DSamples/ApiDemos/common/src/main/res/layout/control_panel_cloud_styling.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2026 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/control_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="8dp"
app:cardCornerRadius="16dp"
android:layout_margin="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:orientation="vertical"
>

<TextView
style="@style/TextAppearance.Material3.LabelLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/map_mode"
android:textStyle="bold"
/>

<RadioGroup
android:id="@+id/rg_map_mode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_marginTop="8dp"
>

<RadioButton
android:id="@+id/rb_roadmap"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/roadmap"
/>

<RadioButton
android:id="@+id/rb_hybrid"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="@string/hybrid"
/>

<RadioButton
android:id="@+id/rb_satellite"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="@string/satellite"
/>
</RadioGroup>

</LinearLayout>
</androidx.cardview.widget.CardView>
79 changes: 79 additions & 0 deletions ...ApiDemos/java-app/src/androidTest/java/com/example/maps3djava/CloudStylingVisualTest.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*
* Copyright 2026 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.example.maps3djava;

import static org.junit.Assert.assertTrue;

import android.content.Intent;
import android.graphics.Bitmap;

import androidx.test.ext.junit.runners.AndroidJUnit4;
import androidx.test.uiautomator.By;
import androidx.test.uiautomator.Until;

import com.example.maps3djava.cloudstyling.CloudStylingActivity;

import org.junit.Test;
import org.junit.runner.RunWith;

/**
* A premium visual regression test for the View-based Java Cloud-Based Map Styling sample.
*
* Demonstrates robust programmatic testing of custom cloud-styled 3D map features by launching the Java-based
* [CloudStylingActivity], waiting for cloud-styled map tiles over San Francisco to load, capturing a screenshot of the
* active map scene, and verifying visual correctness using the Gemini API.
*/
@RunWith(AndroidJUnit4.class)
public class CloudStylingVisualTest extends BaseVisualTest {

@Test
public void verifyCloudStylingRenders() {
// Launch CloudStylingActivity
Intent intent = new Intent(context, CloudStylingActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(intent);

// Wait for the activity to be displayed in the foreground
uiDevice.wait(Until.hasObject(By.pkg(context.getPackageName()).depth(0)), 10000);

// Wait for Cloud-styled 3D map tiles to render and feature styling to settle
waitForMapRendering(15);

// Capture high-resolution screenshot of the active 3D map scene
Bitmap screenshotBitmap = captureScreenshot("cloud_styling_screenshot.png");

// Define the verification prompt for the visual testing agent
String prompt = "Please act as a UI tester and analyze this screenshot.\n" +
"1. Confirm that a 3D map view is visible over San Francisco.\n" +
"2. Confirm that custom cloud-based stylized map tiles / elements are displayed on the 3D map scene.\n" +
"3. Confirm that the Map Mode selector card (with radio options for Roadmap, Hybrid, and Satellite) is visible at the bottom of the screen.\n" +
"\n" +
"If and ONLY IF you can clearly see the 3D Cloud-styled map view and bottom Map Mode selection card, reply with \"PASSED\".\n" +
"If you cannot see the 3D map scene or control card, reply with \"FAILED: 3D map scene or Map Mode controls not visible\".\n" +
"Report what you see in detail.";

// Analyze the image using Gemini (using blocking wrapper)
String geminiResponse = helper.analyzeImageBlocking(screenshotBitmap, prompt, geminiApiKey);
System.out.println("Gemini's analysis: " + geminiResponse);

// Assert on Gemini's response
assertTrue(
"Visual verification failed. Gemini response: " + geminiResponse,
geminiResponse != null && geminiResponse.toUpperCase().contains("PASSED")
);
}
}
85 changes: 79 additions & 6 deletions ...emos/java-app/src/main/java/com/example/maps3djava/cloudstyling/CloudStylingActivity.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,88 @@

package com.example.maps3djava.cloudstyling;

import static com.example.maps3d.common.UtilitiesKt.toValidCamera;

import android.os.Bundle;
import android.widget.RadioGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.example.maps3dcommon.R;
import com.example.maps3djava.common.BaseSkeletonActivity;
import com.example.maps3djava.sampleactivity.SampleBaseActivity;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps3d.GoogleMap3D;
import com.google.android.gms.maps3d.model.Camera;
import com.google.android.gms.maps3d.model.LatLngAltitude;
import com.google.android.gms.maps3d.model.Map3DMode;
import com.google.android.material.appbar.MaterialToolbar;

/**
* Skeleton activity for CloudStylingActivity.
* Showcases **Cloud-Based Map Styling** in Google Maps 3D SDK (Java implementation). Uses
* standalone layout [R.layout.activity_cloud_styling] with declarative custom Map ID.
*/
public class CloudStylingActivity extends BaseSkeletonActivity {
@Override
protected int getTitleResId() {
return R.string.feature_title_cloud_styling;
public class CloudStylingActivity extends SampleBaseActivity {

public static final LatLng SF_LOCATION = new LatLng(37.7915, -122.4010);

private int currentMapMode = Map3DMode.ROADMAP;

@NonNull
@Override
public String getTAG() {
return getClass().getSimpleName();
}

@NonNull
@Override
public Camera getInitialCamera() {
return toValidCamera(new Camera(
new LatLngAltitude(SF_LOCATION.latitude, SF_LOCATION.longitude, 250.0),
45.0,
65.0,
0.0,
800.0
));
}

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// Set dedicated standalone layout with declarative mapId="9a35234a36da44d2c47bf626"
setContentView(R.layout.activity_cloud_styling);

@kikoso kikoso Aug 20, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are extending SampleBaseActivity, and inside SampleBaseActivity we are already setting the content view.


MaterialToolbar topBar = findViewById(R.id.top_bar);
if (topBar != null) {
topBar.setTitle(R.string.feature_title_cloud_styling);
topBar.setNavigationOnClickListener(v -> finish());
}

map3DView = findViewById(R.id.map3dView);
if (map3DView != null) {
map3DView.onCreate(savedInstanceState);
map3DView.getMap3DViewAsync(this);
}

RadioGroup rgMapMode = findViewById(R.id.rg_map_mode);
if (rgMapMode != null) {
rgMapMode.setOnCheckedChangeListener((group, checkedId) -> {
int newMode = Map3DMode.ROADMAP;
if (checkedId == R.id.rb_hybrid) {
newMode = Map3DMode.HYBRID;
} else if (checkedId == R.id.rb_satellite) {
newMode = Map3DMode.SATELLITE;
}
currentMapMode = newMode;
if (googleMap3D != null) {
googleMap3D.setMapMode(newMode);
}
});
}
}

@Override
public void onMap3DViewReady(@NonNull GoogleMap3D googleMap3D) {
super.onMap3DViewReady(googleMap3D);
googleMap3D.setMapMode(currentMapMode);
}
}
Loading