-
Notifications
You must be signed in to change notification settings - Fork 821
/
index.ts
73 lines (65 loc) · 1.89 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_deckgl_points]
// TODO Use imports when Deck.gl works in more bundlers
// https://github.com/visgl/deck.gl/issues/6351#issuecomment-1079424167
import type * as GeoJSON from "geojson";
// import { GeoJsonLayer } from "deck.gl";
// import { GoogleMapsOverlay } from "@deck.gl/google-maps";
const GeoJsonLayer = deck.GeoJsonLayer;
const GoogleMapsOverlay = deck.GoogleMapsOverlay;
type Properties = { mag: number };
type Feature = GeoJSON.Feature<GeoJSON.Point, Properties>;
// Initialize and add the map
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: { lat: 40, lng: -110 },
zoom: 4,
}
);
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,
getRadius: (f: Feature) => Math.pow(10, f.properties.mag),
getFillColor: [255, 70, 30, 180],
autoHighlight: true,
transitions: {
getRadius: {
type: "spring",
stiffness: 0.1,
damping: 0.15,
enter: () => [0], // grow from size 0,
duration: 10000,
},
},
onDataLoad: () => {
/* eslint-disable no-undef */
// @ts-ignore defined in include
progress.done(); // hides progress bar
/* eslint-enable no-undef */
},
}),
],
});
deckOverlay.setMap(map);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
// [END maps_deckgl_points]
export {};