From 6fc373ae77c77b526cf0622c1dd7248d7ee0ed88 Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 26 Apr 2024 12:14:11 -0700 Subject: [PATCH 1/2] feat: Adds two examples to demo 3d maps. Change-Id: I630d1e419d9180c129248d82cba1dc48dda9bbb4 --- samples/map-3d-events/index.njk | 18 ++++++++++ samples/map-3d-events/index.ts | 33 ++++++++++++++++++ samples/map-3d-events/map-3d-events.json | 14 ++++++++ samples/map-3d-events/style.scss | 44 ++++++++++++++++++++++++ samples/map-3d-simple/index.njk | 9 +++++ samples/map-3d-simple/index.ts | 19 ++++++++++ samples/map-3d-simple/map-3d-simple.json | 17 +++++++++ samples/map-3d-simple/style.scss | 13 +++++++ 8 files changed, 167 insertions(+) create mode 100644 samples/map-3d-events/index.njk create mode 100644 samples/map-3d-events/index.ts create mode 100644 samples/map-3d-events/map-3d-events.json create mode 100644 samples/map-3d-events/style.scss create mode 100644 samples/map-3d-simple/index.njk create mode 100644 samples/map-3d-simple/index.ts create mode 100644 samples/map-3d-simple/map-3d-simple.json create mode 100644 samples/map-3d-simple/style.scss diff --git a/samples/map-3d-events/index.njk b/samples/map-3d-events/index.njk new file mode 100644 index 0000000000..6654c0899f --- /dev/null +++ b/samples/map-3d-events/index.njk @@ -0,0 +1,18 @@ + + +{% extends '../../src/_includes/layout.njk'%} {% block html %} + + +{% endblock %} diff --git a/samples/map-3d-events/index.ts b/samples/map-3d-events/index.ts new file mode 100644 index 0000000000..09f5c35d17 --- /dev/null +++ b/samples/map-3d-events/index.ts @@ -0,0 +1,33 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_map_3d_event] +async function initMap() { + // Request needed libraries. + //@ts-ignore + await google.maps.importLibrary("maps3d") as google.maps.Maps3DLibrary; + //@ts-ignore + const mapElement = document.querySelector('gmp-map-3d') as google.maps.maps3d.Map3DElement; + + const events = + [...document.querySelectorAll('aside > p')].map(i => i.textContent); + + customElements.whenDefined(mapElement.localName).then(() => { + for (const event of events) { + mapElement.addEventListener(event, () => { + const eventElement = document.querySelector(`#${event}`); + eventElement?.classList.add('active'); + setTimeout(() => { + eventElement?.classList.remove('active'); + }, 1000); + }); + } + }); +} + +initMap(); +// [END maps_map_3d_event] +export { }; \ No newline at end of file diff --git a/samples/map-3d-events/map-3d-events.json b/samples/map-3d-events/map-3d-events.json new file mode 100644 index 0000000000..08080988e3 --- /dev/null +++ b/samples/map-3d-events/map-3d-events.json @@ -0,0 +1,14 @@ +{ + "title": "Map 3D Events", + "dynamic_import": "true", + "version": "alpha", + "tag": "map_3d_events", + "name": "map-3d-events", + "pagination": { + "data": "mode", + "size": 1, + "alias": "mode" + }, + "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}" + } + \ No newline at end of file diff --git a/samples/map-3d-events/style.scss b/samples/map-3d-events/style.scss new file mode 100644 index 0000000000..7cfbfaa080 --- /dev/null +++ b/samples/map-3d-events/style.scss @@ -0,0 +1,44 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +@use "sass:meta"; // To enable @use via meta.load-css and keep comments in order + +/* [START maps_map_3d_events] */ +@include meta.load-css("../../shared/scss/sidebar.scss"); + +html, body { + height: 100%; + margin: 0; + padding: 0; + width: 100%; +} +body, main { + display: flex; + flex-direction: column; +} +main { + padding: 30px; +} +main { + display: flex; + flex-direction: row; + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; +} +gmp-map-3d { + flex-basis: 75%; + height: 100%; +} +aside { + flex-basis: 25%; + font-family: Droid Sans Mono, monospace; + font-size: 14px; +} +aside > p.active { + background-color: #9cf; +} +/* [END maps_map_3d_events] */ \ No newline at end of file diff --git a/samples/map-3d-simple/index.njk b/samples/map-3d-simple/index.njk new file mode 100644 index 0000000000..619324c28c --- /dev/null +++ b/samples/map-3d-simple/index.njk @@ -0,0 +1,9 @@ + + +{% extends '../../src/_includes/layout.njk'%} {% block html %} + +{% endblock %} diff --git a/samples/map-3d-simple/index.ts b/samples/map-3d-simple/index.ts new file mode 100644 index 0000000000..370aaa1fc5 --- /dev/null +++ b/samples/map-3d-simple/index.ts @@ -0,0 +1,19 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_3d_map_simple] +async function initMap(): Promise { + console.log('Maps JavaScript API loaded.'); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END maps_3d_map_simple] +export { }; diff --git a/samples/map-3d-simple/map-3d-simple.json b/samples/map-3d-simple/map-3d-simple.json new file mode 100644 index 0000000000..5607b2ced2 --- /dev/null +++ b/samples/map-3d-simple/map-3d-simple.json @@ -0,0 +1,17 @@ +{ + "title": "Map 3D Simple Example", + "libraries": [ + "maps3d" + ], + "callback": "initMap", + "version": "alpha", + "tag": "map_3d_simple", + "name": "map-3d-simple", + "pagination": { + "data": "mode", + "size": 1, + "alias": "mode" + }, + "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}" + } + \ No newline at end of file diff --git a/samples/map-3d-simple/style.scss b/samples/map-3d-simple/style.scss new file mode 100644 index 0000000000..62cc16f779 --- /dev/null +++ b/samples/map-3d-simple/style.scss @@ -0,0 +1,13 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + + @use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order + + /* [START maps_3d_map_simple] */ + @include meta.load-css("../../shared/scss/default.scss"); + + /* [END maps_3d_map_simple] */ + \ No newline at end of file From 7f499a0dfc4d66fe011c78fcf99bfd95b0ed780a Mon Sep 17 00:00:00 2001 From: William French Date: Mon, 29 Apr 2024 11:16:44 -0700 Subject: [PATCH 2/2] Update style.scss Fixes the CSS so that the column displays correctly. --- samples/map-3d-events/style.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/samples/map-3d-events/style.scss b/samples/map-3d-events/style.scss index 7cfbfaa080..25c2a5c005 100644 --- a/samples/map-3d-events/style.scss +++ b/samples/map-3d-events/style.scss @@ -9,15 +9,8 @@ /* [START maps_map_3d_events] */ @include meta.load-css("../../shared/scss/sidebar.scss"); -html, body { - height: 100%; - margin: 0; - padding: 0; - width: 100%; -} body, main { display: flex; - flex-direction: column; } main { padding: 30px; @@ -37,8 +30,9 @@ aside { flex-basis: 25%; font-family: Droid Sans Mono, monospace; font-size: 14px; + padding-left: 10px; } aside > p.active { background-color: #9cf; } -/* [END maps_map_3d_events] */ \ No newline at end of file +/* [END maps_map_3d_events] */