Skip to content

Commit e7f2927

Browse files
authored
Merge branch 'main' into dependabot/npm_and_yarn/loaders.gl/kml-4.4.3
2 parents 02058e9 + cdda205 commit e7f2927

33 files changed

Lines changed: 6862 additions & 1819 deletions

File tree

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": [
3+
"plugin:@typescript-eslint/recommended"
4+
],
5+
"parser": "@typescript-eslint/parser",
6+
"rules": {
7+
"@typescript-eslint/ban-ts-comment": 0,
8+
"@typescript-eslint/no-this-alias": 1,
9+
"@typescript-eslint/no-empty-function": 1,
10+
"@typescript-eslint/explicit-module-boundary-types": 1,
11+
"@typescript-eslint/no-unused-vars": 1
12+
}
13+
}
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Google Maps JavaScript Sample
2+
3+
## 3d-hero-showcase
4+
5+
Add a meaningful description for 3d-hero-showcase here...
6+
7+
## Setup
8+
9+
### Before starting run:
10+
11+
`npm i`
12+
13+
### Run an example on a local web server
14+
15+
`cd samples/3d-hero-showcase`
16+
`npm start`
17+
18+
### Build an individual example
19+
20+
`cd samples/3d-hero-showcase`
21+
`npm run build`
22+
23+
From 'samples':
24+
25+
`npm run build --workspace=3d-hero-showcase/`
26+
27+
### Build all of the examples.
28+
29+
From 'samples':
30+
31+
`npm run build-all`
32+
33+
### Run lint to check for problems
34+
35+
`cd samples/3d-hero-showcase`
36+
`npx eslint index.ts`
37+
38+
## Feedback
39+
40+
For feedback related to this sample, please open a new issue on
41+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2026 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_3d_hero_showcase] -->
8+
<html>
9+
<head>
10+
<title>Amsterdam 3D Explorer</title>
11+
<meta charset="utf-8" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
14+
<!-- Google Fonts -->
15+
<link rel="preconnect" href="https://fonts.googleapis.com" />
16+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap"
19+
rel="stylesheet" />
20+
21+
<link rel="stylesheet" type="text/css" href="./style.css" />
22+
<script type="module" src="./index.js"></script>
23+
<script>
24+
// prettier-ignore
25+
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
26+
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
27+
});
28+
</script>
29+
</head>
30+
<body>
31+
<!-- Googly minimal floating control card -->
32+
<div id="control-panel" class="google-card">
33+
<header class="card-header">
34+
<div class="logo-area">
35+
<span class="logo-text">
36+
<span class="g-blue">A</span>
37+
<span class="g-red">m</span>
38+
<span class="g-yellow">s</span>
39+
<span class="g-blue">t</span>
40+
<span class="g-green">e</span>
41+
<span class="g-red">r</span>
42+
<span class="g-blue">d</span>
43+
<span class="g-green">a</span>
44+
<span class="g-red">m</span>
45+
</span>
46+
<span class="badge-3d">3D</span>
47+
</div>
48+
<p class="subtitle">Rijksmuseum & attractions</p>
49+
</header>
50+
51+
<div class="scrollable-content">
52+
<!-- Tour Actions -->
53+
<div class="action-block">
54+
<button id="btn-start-tour" class="google-btn primary-btn">
55+
<span class="btn-icon"></span> Start Guided Tour
56+
</button>
57+
<button
58+
id="btn-stop-tour"
59+
class="google-btn danger-btn hidden">
60+
<span class="btn-icon"></span> Stop Tour
61+
</button>
62+
63+
<div id="tour-nav" class="tour-nav hidden">
64+
<button
65+
id="btn-prev-stop"
66+
class="nav-arrow"
67+
title="Previous Stop">
68+
69+
</button>
70+
<span id="tour-progress" class="progress-text"
71+
>Stop 1 of 4</span
72+
>
73+
<button
74+
id="btn-next-stop"
75+
class="nav-arrow"
76+
title="Next Stop">
77+
78+
</button>
79+
</div>
80+
</div>
81+
82+
<!-- Map Mode -->
83+
<div class="option-block">
84+
<h3>Map Mode</h3>
85+
<div class="segmented-control">
86+
<button id="mode-satellite" class="segment-btn active">
87+
Satellite
88+
</button>
89+
<button id="mode-hybrid" class="segment-btn">
90+
Hybrid
91+
</button>
92+
</div>
93+
</div>
94+
95+
<!-- Layer Options -->
96+
<div class="option-block">
97+
<h3>Map Layers</h3>
98+
<div class="toggle-list">
99+
<label class="switch-row">
100+
<span class="switch-label"
101+
><span class="emoji">📍</span> Point-of-interest
102+
Markers
103+
</span>
104+
<div class="switch-control">
105+
<input
106+
type="checkbox"
107+
id="toggle-markers"
108+
checked />
109+
<span class="lever"></span>
110+
</div>
111+
</label>
112+
113+
<label class="switch-row">
114+
<span class="switch-label"
115+
><span class="emoji">🏢</span> Rijksmuseum 3D
116+
Buildings
117+
</span>
118+
<div class="switch-control">
119+
<input
120+
type="checkbox"
121+
id="toggle-salesforce-mesh"
122+
checked />
123+
<span class="lever"></span>
124+
</div>
125+
</label>
126+
127+
<label class="switch-row">
128+
<span class="switch-label"
129+
><span class="emoji">📐</span> Park Boundaries
130+
(Polygons)
131+
</span>
132+
<div class="switch-control">
133+
<input
134+
type="checkbox"
135+
id="toggle-polygons"
136+
checked />
137+
<span class="lever"></span>
138+
</div>
139+
</label>
140+
141+
<label class="switch-row">
142+
<span class="switch-label"
143+
><span class="emoji"></span> Canal Route
144+
(Polyline)
145+
</span>
146+
<div class="switch-control">
147+
<input
148+
type="checkbox"
149+
id="toggle-polyline"
150+
checked />
151+
<span class="lever"></span>
152+
</div>
153+
</label>
154+
155+
<label class="switch-row">
156+
<span class="switch-label"
157+
><span class="emoji"></span> De Gooyer 3D Model
158+
</span>
159+
<div class="switch-control">
160+
<input
161+
type="checkbox"
162+
id="toggle-model"
163+
checked />
164+
<span class="lever"></span>
165+
</div>
166+
</label>
167+
</div>
168+
</div>
169+
</div>
170+
171+
<div class="card-footer">Google Maps 3D Platform</div>
172+
</div>
173+
174+
<!-- Welcome Floating Alert -->
175+
<div id="welcome-banner" class="google-card welcome-toast">
176+
<div class="toast-content">
177+
<h3>Explore Amsterdam in 3D</h3>
178+
<p>
179+
Start the tour to fly around the Rijksmuseum, Vondelpark,
180+
Prinsengracht, and De Gooyer Windmill.
181+
</p>
182+
<button id="btn-welcome-dismiss" class="google-btn text-btn">
183+
Dismiss
184+
</button>
185+
</div>
186+
</div>
187+
</body>
188+
</html>
189+
<!-- [END maps_3d_hero_showcase] -->

0 commit comments

Comments
 (0)