diff --git a/dist/samples/advanced-markers-animation/app/.eslintsrc.json b/dist/samples/advanced-markers-animation/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/advanced-markers-animation/app/.eslintsrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} diff --git a/dist/samples/advanced-markers-animation/app/README.md b/dist/samples/advanced-markers-animation/app/README.md new file mode 100644 index 00000000..385d8923 --- /dev/null +++ b/dist/samples/advanced-markers-animation/app/README.md @@ -0,0 +1,33 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps-samples/js-api-samples. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +First `cd` to the folder for the sample to run, then: + +`npm start` + +### Build an individual example + +From `samples/`: + +`npm run build --workspace=sample-name/` + +### Build all of the examples. + +From `samples/`: + +`npm run build-all` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/dist/samples/advanced-markers-animation/app/index.html b/dist/samples/advanced-markers-animation/app/index.html new file mode 100644 index 00000000..08bb0943 --- /dev/null +++ b/dist/samples/advanced-markers-animation/app/index.html @@ -0,0 +1,25 @@ + + + + + + Advanced Markers CSS Animation + + + + + +
+
+
+ + + + + + diff --git a/dist/samples/advanced-markers-animation/app/index.ts b/dist/samples/advanced-markers-animation/app/index.ts new file mode 100644 index 00000000..c11f3b56 --- /dev/null +++ b/dist/samples/advanced-markers-animation/app/index.ts @@ -0,0 +1,109 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_advanced_markers_animation] +/** + * Returns a random lat lng position within the map bounds. + * @param {!google.maps.Map} map + * @return {!google.maps.LatLngLiteral} + */ + function getRandomPosition(map) { + const bounds = map.getBounds(); + const minLat = bounds.getSouthWest().lat(); + const minLng = bounds.getSouthWest().lng(); + const maxLat = bounds.getNorthEast().lat(); + const maxLng = bounds.getNorthEast().lng(); + + const latRange = maxLat - minLat; + + // Note: longitude can span from a positive longitude in the west to a + // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large + // span that covers the whole USA. + let lngRange = maxLng - minLng; + if (maxLng < minLng) { + lngRange += 360; + } + + return { + lat: minLat + Math.random() * latRange, + lng: minLng + Math.random() * lngRange, + }; + } + + const total = 100; + const intersectionObserver = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + entry.target.classList.add('drop'); + intersectionObserver.unobserve(entry.target); + } + } + }); + + async function initMap(): Promise { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + + const position = {lat: 37.4242011827985, lng: -122.09242296450893}; + + const map = new Map(document.getElementById("map") as HTMLElement, { + zoom: 14, + center: position, + mapId: '4504f8b37365c3d0', + }); + + // Create 100 markers to animate. + google.maps.event.addListenerOnce(map, 'idle', () => { + for (let i = 0; i < 100; i++) { + createMarker(map, AdvancedMarkerElement); + } + }); + + // Add a button to reset the example. + const controlDiv = document.createElement("div"); + const controlUI = document.createElement("button"); + + controlUI.classList.add("ui-button"); + controlUI.innerText = "Reset the example"; + controlUI.addEventListener("click", () => { + // Reset the example by reloading the map iframe. + refreshMap(); + }); + controlDiv.appendChild(controlUI); + map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv); + } + + function createMarker(map, AdvancedMarkerElement) { + const advancedMarker = new AdvancedMarkerElement({ + position: getRandomPosition(map), + map: map, + }); + const content = advancedMarker.content as HTMLElement; + content.style.opacity = '0'; + content.addEventListener('animationend', (event) => { + content.classList.remove('drop'); + content.style.opacity = '1'; + }); + const time = 2 + Math.random(); // 2s delay for easy to see the animation + content.style.setProperty('--delay-time', time +'s'); + intersectionObserver.observe(content); + } + + function refreshMap() { + // Refresh the map. + const mapContainer = document.getElementById('mapContainer'); + const map = document.getElementById('map'); + map!.remove(); + const mapDiv = document.createElement('div'); + mapDiv.id = 'map'; + mapContainer!.appendChild(mapDiv); + initMap(); + } + +initMap(); +// [END maps_advanced_markers_animation] +export { }; \ No newline at end of file diff --git a/dist/samples/advanced-markers-animation/app/package.json b/dist/samples/advanced-markers-animation/app/package.json new file mode 100644 index 00000000..e592f669 --- /dev/null +++ b/dist/samples/advanced-markers-animation/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/advanced-markers-animation", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh advanced-markers-animation && bash ../app.sh advanced-markers-animation && bash ../docs.sh advanced-markers-animation && npm run build:vite --workspace=. && bash ../dist.sh advanced-markers-animation", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/dist/samples/advanced-markers-animation/app/style.css b/dist/samples/advanced-markers-animation/app/style.css new file mode 100644 index 00000000..5bdd67f2 --- /dev/null +++ b/dist/samples/advanced-markers-animation/app/style.css @@ -0,0 +1,91 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_advanced_markers_animation] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* set the default transition time */ +:root { + --delay-time: .5s; +} + +#map { + height: 100%; +} + +#mapContainer { + height: 100%; +} + +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +@keyframes drop { + 0% { + transform: translateY(-200px) scaleY(0.9); + opacity: 0; + } + 5% { + opacity: 0.7; + } + 50% { + transform: translateY(0px) scaleY(1); + opacity: 1; + } + 65% { + transform: translateY(-17px) scaleY(0.9); + opacity: 1; + } + 75% { + transform: translateY(-22px) scaleY(0.9); + opacity: 1; + } + 100% { + transform: translateY(0px) scaleY(1); + opacity: 1; + } +} +.drop { + animation: drop 0.3s linear forwards var(--delay-time); +} + +.ui-button { + background-color: #fff; + border: 0; + border-radius: 2px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 0 0.5em; + font: 400 18px Roboto, Arial, sans-serif; + overflow: hidden; + height: 40px; + cursor: pointer; +} + +.ui-button:hover { + background: rgb(235, 235, 235); +} + +/* [END maps_advanced_markers_animation] */ \ No newline at end of file diff --git a/dist/samples/advanced-markers-animation/app/tsconfig.json b/dist/samples/advanced-markers-animation/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/advanced-markers-animation/app/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} diff --git a/dist/samples/advanced-markers-animation/dist/assets/index-0OEaV1k-.css b/dist/samples/advanced-markers-animation/dist/assets/index-0OEaV1k-.css new file mode 100644 index 00000000..7b0e8c6f --- /dev/null +++ b/dist/samples/advanced-markers-animation/dist/assets/index-0OEaV1k-.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */#map{height:100%}:root{--delay-time: .5s}#map,#mapContainer{height:100%}html,body{height:100%;margin:0;padding:0}@keyframes drop{0%{transform:translateY(-200px) scaleY(.9);opacity:0}5%{opacity:.7}50%{transform:translateY(0) scaleY(1);opacity:1}65%{transform:translateY(-17px) scaleY(.9);opacity:1}75%{transform:translateY(-22px) scaleY(.9);opacity:1}to{transform:translateY(0) scaleY(1);opacity:1}}.drop{animation:drop .3s linear forwards var(--delay-time)}.ui-button{background-color:#fff;border:0;border-radius:2px;box-shadow:0 1px 4px -1px #0000004d;margin:10px;padding:0 .5em;font:400 18px Roboto,Arial,sans-serif;overflow:hidden;height:40px;cursor:pointer}.ui-button:hover{background:#ebebeb} diff --git a/dist/samples/advanced-markers-animation/dist/index.html b/dist/samples/advanced-markers-animation/dist/index.html new file mode 100644 index 00000000..e21c9a4c --- /dev/null +++ b/dist/samples/advanced-markers-animation/dist/index.html @@ -0,0 +1,25 @@ + + + + + + Advanced Markers CSS Animation + + + + + +
+
+
+ + + + + + diff --git a/dist/samples/advanced-markers-animation/docs/index.html b/dist/samples/advanced-markers-animation/docs/index.html new file mode 100644 index 00000000..08bb0943 --- /dev/null +++ b/dist/samples/advanced-markers-animation/docs/index.html @@ -0,0 +1,25 @@ + + + + + + Advanced Markers CSS Animation + + + + + +
+
+
+ + + + + + diff --git a/dist/samples/advanced-markers-animation/docs/index.js b/dist/samples/advanced-markers-animation/docs/index.js new file mode 100644 index 00000000..68842e45 --- /dev/null +++ b/dist/samples/advanced-markers-animation/docs/index.js @@ -0,0 +1,94 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_advanced_markers_animation] +/** + * Returns a random lat lng position within the map bounds. + * @param {!google.maps.Map} map + * @return {!google.maps.LatLngLiteral} + */ +function getRandomPosition(map) { + const bounds = map.getBounds(); + const minLat = bounds.getSouthWest().lat(); + const minLng = bounds.getSouthWest().lng(); + const maxLat = bounds.getNorthEast().lat(); + const maxLng = bounds.getNorthEast().lng(); + const latRange = maxLat - minLat; + // Note: longitude can span from a positive longitude in the west to a + // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large + // span that covers the whole USA. + let lngRange = maxLng - minLng; + if (maxLng < minLng) { + lngRange += 360; + } + return { + lat: minLat + Math.random() * latRange, + lng: minLng + Math.random() * lngRange, + }; +} +const total = 100; +const intersectionObserver = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + entry.target.classList.add('drop'); + intersectionObserver.unobserve(entry.target); + } + } +}); +async function initMap() { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const position = { lat: 37.4242011827985, lng: -122.09242296450893 }; + const map = new Map(document.getElementById("map"), { + zoom: 14, + center: position, + mapId: '4504f8b37365c3d0', + }); + // Create 100 markers to animate. + google.maps.event.addListenerOnce(map, 'idle', () => { + for (let i = 0; i < 100; i++) { + createMarker(map, AdvancedMarkerElement); + } + }); + // Add a button to reset the example. + const controlDiv = document.createElement("div"); + const controlUI = document.createElement("button"); + controlUI.classList.add("ui-button"); + controlUI.innerText = "Reset the example"; + controlUI.addEventListener("click", () => { + // Reset the example by reloading the map iframe. + refreshMap(); + }); + controlDiv.appendChild(controlUI); + map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv); +} +function createMarker(map, AdvancedMarkerElement) { + const advancedMarker = new AdvancedMarkerElement({ + position: getRandomPosition(map), + map: map, + }); + const content = advancedMarker.content; + content.style.opacity = '0'; + content.addEventListener('animationend', (event) => { + content.classList.remove('drop'); + content.style.opacity = '1'; + }); + const time = 2 + Math.random(); // 2s delay for easy to see the animation + content.style.setProperty('--delay-time', time + 's'); + intersectionObserver.observe(content); +} +function refreshMap() { + // Refresh the map. + const mapContainer = document.getElementById('mapContainer'); + const map = document.getElementById('map'); + map.remove(); + const mapDiv = document.createElement('div'); + mapDiv.id = 'map'; + mapContainer.appendChild(mapDiv); + initMap(); +} +initMap(); +export {}; diff --git a/dist/samples/advanced-markers-animation/docs/index.ts b/dist/samples/advanced-markers-animation/docs/index.ts new file mode 100644 index 00000000..c11f3b56 --- /dev/null +++ b/dist/samples/advanced-markers-animation/docs/index.ts @@ -0,0 +1,109 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_advanced_markers_animation] +/** + * Returns a random lat lng position within the map bounds. + * @param {!google.maps.Map} map + * @return {!google.maps.LatLngLiteral} + */ + function getRandomPosition(map) { + const bounds = map.getBounds(); + const minLat = bounds.getSouthWest().lat(); + const minLng = bounds.getSouthWest().lng(); + const maxLat = bounds.getNorthEast().lat(); + const maxLng = bounds.getNorthEast().lng(); + + const latRange = maxLat - minLat; + + // Note: longitude can span from a positive longitude in the west to a + // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large + // span that covers the whole USA. + let lngRange = maxLng - minLng; + if (maxLng < minLng) { + lngRange += 360; + } + + return { + lat: minLat + Math.random() * latRange, + lng: minLng + Math.random() * lngRange, + }; + } + + const total = 100; + const intersectionObserver = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + entry.target.classList.add('drop'); + intersectionObserver.unobserve(entry.target); + } + } + }); + + async function initMap(): Promise { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + + const position = {lat: 37.4242011827985, lng: -122.09242296450893}; + + const map = new Map(document.getElementById("map") as HTMLElement, { + zoom: 14, + center: position, + mapId: '4504f8b37365c3d0', + }); + + // Create 100 markers to animate. + google.maps.event.addListenerOnce(map, 'idle', () => { + for (let i = 0; i < 100; i++) { + createMarker(map, AdvancedMarkerElement); + } + }); + + // Add a button to reset the example. + const controlDiv = document.createElement("div"); + const controlUI = document.createElement("button"); + + controlUI.classList.add("ui-button"); + controlUI.innerText = "Reset the example"; + controlUI.addEventListener("click", () => { + // Reset the example by reloading the map iframe. + refreshMap(); + }); + controlDiv.appendChild(controlUI); + map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv); + } + + function createMarker(map, AdvancedMarkerElement) { + const advancedMarker = new AdvancedMarkerElement({ + position: getRandomPosition(map), + map: map, + }); + const content = advancedMarker.content as HTMLElement; + content.style.opacity = '0'; + content.addEventListener('animationend', (event) => { + content.classList.remove('drop'); + content.style.opacity = '1'; + }); + const time = 2 + Math.random(); // 2s delay for easy to see the animation + content.style.setProperty('--delay-time', time +'s'); + intersectionObserver.observe(content); + } + + function refreshMap() { + // Refresh the map. + const mapContainer = document.getElementById('mapContainer'); + const map = document.getElementById('map'); + map!.remove(); + const mapDiv = document.createElement('div'); + mapDiv.id = 'map'; + mapContainer!.appendChild(mapDiv); + initMap(); + } + +initMap(); +// [END maps_advanced_markers_animation] +export { }; \ No newline at end of file diff --git a/dist/samples/advanced-markers-animation/docs/style.css b/dist/samples/advanced-markers-animation/docs/style.css new file mode 100644 index 00000000..5bdd67f2 --- /dev/null +++ b/dist/samples/advanced-markers-animation/docs/style.css @@ -0,0 +1,91 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_advanced_markers_animation] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* set the default transition time */ +:root { + --delay-time: .5s; +} + +#map { + height: 100%; +} + +#mapContainer { + height: 100%; +} + +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +@keyframes drop { + 0% { + transform: translateY(-200px) scaleY(0.9); + opacity: 0; + } + 5% { + opacity: 0.7; + } + 50% { + transform: translateY(0px) scaleY(1); + opacity: 1; + } + 65% { + transform: translateY(-17px) scaleY(0.9); + opacity: 1; + } + 75% { + transform: translateY(-22px) scaleY(0.9); + opacity: 1; + } + 100% { + transform: translateY(0px) scaleY(1); + opacity: 1; + } +} +.drop { + animation: drop 0.3s linear forwards var(--delay-time); +} + +.ui-button { + background-color: #fff; + border: 0; + border-radius: 2px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 0 0.5em; + font: 400 18px Roboto, Arial, sans-serif; + overflow: hidden; + height: 40px; + cursor: pointer; +} + +.ui-button:hover { + background: rgb(235, 235, 235); +} + +/* [END maps_advanced_markers_animation] */ \ No newline at end of file diff --git a/dist/samples/advanced-markers-animation/jsfiddle/demo.details b/dist/samples/advanced-markers-animation/jsfiddle/demo.details new file mode 100644 index 00000000..171cb0e1 --- /dev/null +++ b/dist/samples/advanced-markers-animation/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: advanced-markers-animation +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/advanced-markers-animation/jsfiddle/index.html b/dist/samples/advanced-markers-animation/jsfiddle/index.html new file mode 100644 index 00000000..8db64a02 --- /dev/null +++ b/dist/samples/advanced-markers-animation/jsfiddle/index.html @@ -0,0 +1,25 @@ + + + + + + Advanced Markers CSS Animation + + + + + +
+
+
+ + + + + + diff --git a/dist/samples/advanced-markers-animation/jsfiddle/index.js b/dist/samples/advanced-markers-animation/jsfiddle/index.js new file mode 100644 index 00000000..0a427f52 --- /dev/null +++ b/dist/samples/advanced-markers-animation/jsfiddle/index.js @@ -0,0 +1,94 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/** + * Returns a random lat lng position within the map bounds. + * @param {!google.maps.Map} map + * @return {!google.maps.LatLngLiteral} + */ +function getRandomPosition(map) { + const bounds = map.getBounds(); + const minLat = bounds.getSouthWest().lat(); + const minLng = bounds.getSouthWest().lng(); + const maxLat = bounds.getNorthEast().lat(); + const maxLng = bounds.getNorthEast().lng(); + const latRange = maxLat - minLat; + // Note: longitude can span from a positive longitude in the west to a + // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large + // span that covers the whole USA. + let lngRange = maxLng - minLng; + if (maxLng < minLng) { + lngRange += 360; + } + return { + lat: minLat + Math.random() * latRange, + lng: minLng + Math.random() * lngRange, + }; +} +const total = 100; +const intersectionObserver = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + entry.target.classList.add('drop'); + intersectionObserver.unobserve(entry.target); + } + } +}); +async function initMap() { + // Request needed libraries. + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const position = { lat: 37.4242011827985, lng: -122.09242296450893 }; + const map = new Map(document.getElementById("map"), { + zoom: 14, + center: position, + mapId: '4504f8b37365c3d0', + }); + // Create 100 markers to animate. + google.maps.event.addListenerOnce(map, 'idle', () => { + for (let i = 0; i < 100; i++) { + createMarker(map, AdvancedMarkerElement); + } + }); + // Add a button to reset the example. + const controlDiv = document.createElement("div"); + const controlUI = document.createElement("button"); + controlUI.classList.add("ui-button"); + controlUI.innerText = "Reset the example"; + controlUI.addEventListener("click", () => { + // Reset the example by reloading the map iframe. + refreshMap(); + }); + controlDiv.appendChild(controlUI); + map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv); +} +function createMarker(map, AdvancedMarkerElement) { + const advancedMarker = new AdvancedMarkerElement({ + position: getRandomPosition(map), + map: map, + }); + const content = advancedMarker.content; + content.style.opacity = '0'; + content.addEventListener('animationend', (event) => { + content.classList.remove('drop'); + content.style.opacity = '1'; + }); + const time = 2 + Math.random(); // 2s delay for easy to see the animation + content.style.setProperty('--delay-time', time + 's'); + intersectionObserver.observe(content); +} +function refreshMap() { + // Refresh the map. + const mapContainer = document.getElementById('mapContainer'); + const map = document.getElementById('map'); + map.remove(); + const mapDiv = document.createElement('div'); + mapDiv.id = 'map'; + mapContainer.appendChild(mapDiv); + initMap(); +} +initMap(); +export {}; diff --git a/dist/samples/advanced-markers-animation/jsfiddle/style.css b/dist/samples/advanced-markers-animation/jsfiddle/style.css new file mode 100644 index 00000000..5d1490dc --- /dev/null +++ b/dist/samples/advanced-markers-animation/jsfiddle/style.css @@ -0,0 +1,90 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* set the default transition time */ +:root { + --delay-time: .5s; +} + +#map { + height: 100%; +} + +#mapContainer { + height: 100%; +} + +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +@keyframes drop { + 0% { + transform: translateY(-200px) scaleY(0.9); + opacity: 0; + } + 5% { + opacity: 0.7; + } + 50% { + transform: translateY(0px) scaleY(1); + opacity: 1; + } + 65% { + transform: translateY(-17px) scaleY(0.9); + opacity: 1; + } + 75% { + transform: translateY(-22px) scaleY(0.9); + opacity: 1; + } + 100% { + transform: translateY(0px) scaleY(1); + opacity: 1; + } +} +.drop { + animation: drop 0.3s linear forwards var(--delay-time); +} + +.ui-button { + background-color: #fff; + border: 0; + border-radius: 2px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 0 0.5em; + font: 400 18px Roboto, Arial, sans-serif; + overflow: hidden; + height: 40px; + cursor: pointer; +} + +.ui-button:hover { + background: rgb(235, 235, 235); +} +