diff --git a/samples/deckgl-points/README.md b/samples/deckgl-points/README.md new file mode 100644 index 00000000..9c504369 --- /dev/null +++ b/samples/deckgl-points/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## deckgl-points + +This example visualizes recent earthquakes using the deck.gl GeoJsonLayer and a ScatterPlot of earthquakes. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/deckgl-points` +`npm start` + +### Build an individual example + +`cd samples/deckgl-points` +`npm run build` + +From 'samples': + +`npm run build --workspace=deckgl-points/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/deckgl-points` +`npx eslint index.ts` + +## 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/samples/deckgl-points/index.html b/samples/deckgl-points/index.html new file mode 100644 index 00000000..e3113c40 --- /dev/null +++ b/samples/deckgl-points/index.html @@ -0,0 +1,21 @@ + + + + + + deck.gl and Google Maps Platform + + + + + + + + + + diff --git a/samples/deckgl-points/index.ts b/samples/deckgl-points/index.ts new file mode 100644 index 00000000..9b80fb8c --- /dev/null +++ b/samples/deckgl-points/index.ts @@ -0,0 +1,82 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_deckgl_points] +//import type * as GeoJSON from 'geojson'; +import { Feature } from 'geojson'; +import { GoogleMapsOverlay } from '@deck.gl/google-maps'; +import { GeoJsonLayer } from '@deck.gl/layers'; + +type Properties = { mag: number }; + +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap: google.maps.Map; + +interface EarthquakeProperties { + mag: number; + place: string; + time: number; +} + +/** + * Validates that a feature has the properties we need for rendering. + */ +function isEarthquake(f: Feature): f is Feature & { properties: EarthquakeProperties } { + return ( + f.properties !== null && + typeof f.properties === 'object' && + typeof (f.properties as any).mag === 'number' + ); +} + +// Initialize and add the map +async function initMap() { + // Request the needed libraries. + await google.maps.importLibrary('maps'); + + innerMap = await mapElement.innerMap; + + const deckOverlay = new GoogleMapsOverlay({ + layers: [ + new GeoJsonLayer({ + id: 'earthquakes', + data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson', + filled: true, + pointRadiusMinPixels: 2, + pointRadiusMaxPixels: 200, + opacity: 0.4, + pointRadiusScale: 0.3, + getPointRadius: (f: Feature): number => { + if (isEarthquake(f)) { + return Math.pow(10, f.properties.mag); + } + return 0; // Fallback for invalid data. + }, + getFillColor: (f: Feature): [number, number, number, number] => { + return [255, 70, 30, 180]; // Default color for other earthquakes. + }, + autoHighlight: true, + transitions: { + getPointRadius: { + type: 'spring', + stiffness: 0.1, + damping: 0.15, + enter: () => [0], // grow from size 0, + duration: 10000, + }, + }, + onDataLoad: () => { + console.log('Data is loaded.'); + }, + }), + ], + }); + + deckOverlay.setMap(innerMap); +} + +initMap(); +// [END maps_deckgl_points] diff --git a/samples/deckgl-points/package.json b/samples/deckgl-points/package.json new file mode 100644 index 00000000..18c47c9c --- /dev/null +++ b/samples/deckgl-points/package.json @@ -0,0 +1,17 @@ +{ + "name": "@js-api-samples/deckgl-points", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh deckgl-points && bash ../app.sh deckgl-points && bash ../docs.sh deckgl-points && npm run build:vite --workspace=. && bash ../dist.sh deckgl-points", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + "@deck.gl/core": "^8.9.0", + "@deck.gl/google-maps": "^8.9.0", + "@deck.gl/layers": "^8.9.0", + "deck.gl": "^8.9.0" + } +} diff --git a/samples/deckgl-points/style.css b/samples/deckgl-points/style.css new file mode 100644 index 00000000..76267c1b --- /dev/null +++ b/samples/deckgl-points/style.css @@ -0,0 +1,28 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +:root { + --mdc-theme-primary: #1a73e8; + --mdc-theme-secondary: #rgb(225, 245, 254); + --mdc-theme-on-primary: #fff; + --mdc-theme-on-secondary: rgb(1, 87, 155); +} + +.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label { + color: var(--mdc-theme-primary); +} + +/* [START maps_deckgl_points] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_deckgl_points] */ diff --git a/samples/deckgl-points/tsconfig.json b/samples/deckgl-points/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/deckgl-points/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" + } +}