void
+ selector?: { [key: string]: any }
+ }
+ /** _(N/A for 2D datasets)_ Object to index into non-spatial dimensions, maps variable name (string) to value (any) or array of values */
+ selector?: { [key: string]: any }
+ /** Object mapping custom uniform names (string) to values (float) for use in fragment shader */
+ uniforms?: { [key: string]: number }
+ /** URL pointing to Zarr group */
+ source: string
+ /** Name of array containing variable to be mapped */
+ variable: string
+ /** Fragment shader to use in place of default */
+ frag?: string
+ /** Value to map to null */
+ fillValue?: number
+ /** Display mode */
+ mode?: 'grid' | 'dotgrid' | 'texture'
+ /** Callback that is invoked with `.zmetadata` value once fetched */
+ setMetadata?: (value: { [key: string]: any }) => void
+ /** Callback to track *any* pending requests */
+ setLoading?: (loading: boolean) => void
+ /** Callback to track any metadata and coordinate requests made on initialization */
+ setMetadataLoading?: (loading: boolean) => void
+ /** Callback to track any requests of new chunks */
+ setChunkLoading?: (loading: boolean) => void
+}
-const Raster = (props) => {
+const Raster = (props: Props) => {
const {
display = true,
opacity = 1,
clim,
colormap,
index = 0,
- regionOptions = {},
+ regionOptions,
selector = {},
uniforms = {},
} = props
@@ -26,23 +71,23 @@ const Raster = (props) => {
const { region } = useRegion()
const { setLoading, clearLoading, loading, chunkLoading, metadataLoading } =
useSetLoading()
- const tiles = useRef()
- const camera = useRef()
- const lastQueried = useRef()
+ const tiles = useRef
()
+ const camera = useRef<{ center?: LngLat; zoom?: number }>()
+ const lastQueried = useRef()
camera.current = { center: center, zoom: zoom }
- const queryRegion = async (r, s) => {
+ const queryRegion = async (r: Circle, s: { [key: string]: any }) => {
const queryStart = new Date().getTime()
lastQueried.current = queryStart
- regionOptions.setData({ value: null })
+ regionOptions?.setData({ value: null })
const data = await tiles.current.queryRegion(r, s)
// Invoke callback as long as a more recent query has not already been initiated
if (lastQueried.current === queryStart) {
- regionOptions.setData({ value: data })
+ regionOptions?.setData({ value: data })
}
}
@@ -77,6 +122,10 @@ const Raster = (props) => {
}, [!!props.setChunkLoading, chunkLoading])
useEffect(() => {
+ if (!map) {
+ return
+ }
+
const callback = () => {
tiles.current.updateCamera(camera.current)
tiles.current.draw()
@@ -117,7 +166,7 @@ const Raster = (props) => {
...Object.values(selector),
])
- return null
+ return <>
}
export default Raster
diff --git a/src/region/context.js b/src/region/context.tsx
similarity index 68%
rename from src/region/context.js
rename to src/region/context.tsx
index 1625c67..8c679b4 100644
--- a/src/region/context.js
+++ b/src/region/context.tsx
@@ -1,8 +1,13 @@
import React, { createContext, useContext, useState } from 'react'
-const RegionContext = createContext({
+type Context = {
+ region: any
+ setRegion: (region: any) => void
+}
+
+const RegionContext = createContext({
region: null,
- onChange: () => {
+ setRegion: () => {
throw new Error('Tried to set region before initializing context')
},
})
@@ -16,7 +21,11 @@ export const useRegion = () => {
return { region }
}
-export const RegionProvider = ({ children }) => {
+type Props = {
+ children?: React.ReactNode
+}
+
+export const RegionProvider = ({ children }: Props) => {
const [region, setRegion] = useState(null)
return (
diff --git a/src/region/region-picker/index.js b/src/region/region-picker/index.tsx
similarity index 68%
rename from src/region/region-picker/index.js
rename to src/region/region-picker/index.tsx
index cb38daf..f76db31 100644
--- a/src/region/region-picker/index.js
+++ b/src/region/region-picker/index.tsx
@@ -3,11 +3,18 @@ import CirclePicker from './circle-picker'
import { UPDATE_STATS_ON_DRAG } from './constants'
import { distance } from '@turf/turf'
import { v4 as uuidv4 } from 'uuid'
+import type { Circle } from '../types'
+import type { Map } from 'mapbox-gl'
import { useRegionContext } from '../context'
import { useMapbox } from '../../mapbox'
-function getInitialRadius(map, units, minRadius, maxRadius) {
+function getInitialRadius(
+ map: Map,
+ units: 'meters' | 'kilometers',
+ minRadius?: number,
+ maxRadius?: number
+) {
const bounds = map.getBounds().toArray()
const dist = distance(bounds[0], bounds[1], { units })
let radius = Math.round(dist / 15)
@@ -17,6 +24,25 @@ function getInitialRadius(map, units, minRadius, maxRadius) {
return radius
}
+type Props = {
+ /** Color of circle border, radius guideline, and label */
+ color: string
+ /** Color rendered over area of map not covered by circle (with opacity 0.8) */
+ backgroundColor: string
+ /** Font family used to render circle radius label */
+ fontFamily: string
+ /** Font size used to render circle radius label */
+ fontSize: string
+ /** Units used to render circle radius label */
+ units?: 'meters' | 'kilometers'
+ /** Radius (in `units`) used to initialize circle */
+ initialRadius?: number
+ /** Minimum radius (in `units`) allowed */
+ minRadius?: number
+ /** Maximum radius (in `units`) allowed */
+ maxRadius?: number
+}
+
// TODO:
// - accept mode (only accept mode="circle" to start)
function RegionPicker({
@@ -28,7 +54,7 @@ function RegionPicker({
initialRadius: initialRadiusProp,
minRadius,
maxRadius,
-}) {
+}: Props) {
const { map } = useMapbox()
const id = useRef(uuidv4())
const initialCenter = useRef(map.getCenter())
@@ -46,7 +72,7 @@ function RegionPicker({
}
}, [])
- const handleCircle = useCallback((circle) => {
+ const handleCircle = useCallback((circle: Circle) => {
if (!circle) return
setRegion(circle)
setCenter(circle.properties.center)
@@ -60,7 +86,6 @@ function RegionPicker({
return (
diff --git a/src/regl.js b/src/regl.tsx
similarity index 56%
rename from src/regl.js
rename to src/regl.tsx
index c90ad31..950132e 100644
--- a/src/regl.js
+++ b/src/regl.tsx
@@ -6,19 +6,28 @@ import React, {
useContext,
useRef,
} from 'react'
-import _regl from 'regl'
+import * as _regl from 'regl'
-export const ReglContext = createContext(null)
+export const ReglContext = createContext<{ regl?: _regl.Regl } | null>(null)
-export const useRegl = () => {
- return useContext(ReglContext)
+export const useRegl = (): { regl: _regl.Regl } => {
+ const value = useContext(ReglContext)
+ if (value && value.regl) {
+ return { regl: value.regl }
+ }
+ throw new Error('Invoked useRegl before initializing context')
}
-const Regl = ({ style, extensions, children }) => {
- const regl = useRef()
+type Props = {
+ style?: { [key: string]: string | number }
+ children?: React.ReactNode
+}
+
+const Regl = ({ style, children }: Props) => {
+ const regl = useRef<_regl.Regl>()
const [ready, setReady] = useState(false)
- const ref = useCallback((node) => {
+ const ref = useCallback((node: HTMLDivElement) => {
if (node !== null) {
regl.current = _regl({
container: node,
diff --git a/src/use-controls.js b/src/use-controls.ts
similarity index 78%
rename from src/use-controls.js
rename to src/use-controls.ts
index 6105039..214f27b 100644
--- a/src/use-controls.js
+++ b/src/use-controls.ts
@@ -1,9 +1,10 @@
import React, { useState, useEffect } from 'react'
import { useMapbox } from './mapbox'
+import type { LngLat } from 'mapbox-gl'
export const useControls = () => {
- const [zoom, setZoom] = useState()
- const [center, setCenter] = useState()
+ const [zoom, setZoom] = useState()
+ const [center, setCenter] = useState()
const { map } = useMapbox()
useEffect(() => {
diff --git a/src/use-recenter-region.js b/src/use-recenter-region.ts
similarity index 100%
rename from src/use-recenter-region.js
rename to src/use-recenter-region.ts
diff --git a/src/use-ruler.js b/src/use-ruler.ts
similarity index 78%
rename from src/use-ruler.js
rename to src/use-ruler.ts
index 9a13e23..98c2297 100644
--- a/src/use-ruler.js
+++ b/src/use-ruler.ts
@@ -4,17 +4,28 @@ import { axisBottom, axisLeft } from 'd3-axis'
import { scaleOrdinal } from 'd3-scale'
import { select } from 'd3-selection'
+import type { AxisScale } from 'd3-axis'
+import type { Selection } from 'd3-selection'
+
import { useMapbox } from './mapbox'
const TICK_SEPARATION = 150 // target distance between ticks
const TICK_SIZE = 6 // tick length
const TICK_MARGIN = 2 // distance between gridlines and tick text
+type S = Selection
+type A = AxisScale
+
function useRuler({
showAxes = true,
showGrid = false,
fontFamily,
gridColor,
+}: {
+ showAxes: boolean
+ showGrid: boolean
+ fontFamily: string
+ gridColor: string
}) {
const { map } = useMapbox()
@@ -23,8 +34,8 @@ function useRuler({
return
}
- let rulerContainer = null
- let setRulerTicks = null
+ let rulerContainer: S
+ let setRulerTicks: () => void
function addRuler() {
const mapContainer = map.getContainer()
@@ -50,13 +61,13 @@ function useRuler({
.style('font-size', '14px')
.style('font-family', fontFamily)
- const xAxis = (g, x) =>
+ const xAxis = (g: S, x: A) =>
g
.call(
axisBottom(x)
.tickValues(x.domain())
.tickFormat((d) => `${d}°`)
- .tickSize(TICK_SIZE)
+ .tickSize(TICK_SIZE) as any
)
.call((g) => g.select('.domain').remove())
@@ -68,13 +79,13 @@ function useRuler({
.style('font-size', '14px')
.style('font-family', fontFamily)
- const yAxis = (g, y) =>
+ const yAxis = (g: S, y: A) =>
g
.call(
axisLeft(y)
.tickValues(y.domain())
.tickFormat((d) => `${d}°`)
- .tickSize(TICK_SIZE)
+ .tickSize(TICK_SIZE) as any
)
.call((g) => g.select('.domain').remove())
@@ -88,8 +99,8 @@ function useRuler({
.style('stroke-dasharray', '3,2')
.style('stroke-opacity', 0.8),
- grid: (g, x, y) => {
- const xTickHeight = gx.node().getBoundingClientRect().height
+ grid: (g: S, x: A, y: A) => {
+ const xTickHeight = gx.node()?.getBoundingClientRect().height ?? 0
const yTickNodes = gy.selectAll('.tick').nodes()
return g
.call((g) =>
@@ -106,10 +117,10 @@ function useRuler({
(update) => update,
(exit) => exit.remove()
)
- .attr('x1', (d) => 0.5 + x(d))
- .attr('x2', (d) => 0.5 + x(d))
+ .attr('x1', (d) => 0.5 + (x(d) as number))
+ .attr('x2', (d) => 0.5 + (x(d) as number))
)
- .call((g) =>
+ .call((g: S) =>
g
.selectAll('.y')
.data(y.domain())
@@ -118,11 +129,12 @@ function useRuler({
(update) => update,
(exit) => exit.remove()
)
- .attr('y1', (d) => 0.5 + y(d))
- .attr('y2', (d) => 0.5 + y(d))
+ .attr('y1', (d) => 0.5 + (y(d) as number))
+ .attr('y2', (d) => 0.5 + (y(d) as number))
.attr('x2', (d, i) => {
- const yTickWidth = yTickNodes[i]
- ? yTickNodes[i].getBoundingClientRect().width
+ const node = yTickNodes[i] as Element
+ const yTickWidth = node
+ ? node.getBoundingClientRect().width
: 0
return width - yTickWidth - TICK_MARGIN
})
@@ -140,17 +152,18 @@ function useRuler({
const xDomain = ticks(b.getWest(), b.getEast(), numXTicks)
const xRange = xDomain.map((lng) => map.project([lng, 0]).x)
- const x = scaleOrdinal().domain(xDomain).range(xRange)
+ const x = scaleOrdinal().domain(xDomain.map(String)).range(xRange)
const yDomain = ticks(b.getNorth(), b.getSouth(), numYTicks)
const yRange = yDomain.map((lat) => map.project([0, lat]).y)
- const y = scaleOrdinal().domain(yDomain).range(yRange)
+ const y = scaleOrdinal().domain(yDomain.map(String)).range(yRange)
if (showAxes) {
gx.call(xAxis, x)
gy.call(yAxis, y)
}
- if (showGrid) {
+
+ if (showGrid && gGrid) {
gGrid.call(grid, x, y)
}
}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a1d68b1
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "outDir": "./dst/",
+ "sourceMap": true,
+ "strictNullChecks": true,
+ "module": "ESNext",
+ "jsx": "react",
+ "target": "ESNext",
+ "allowJs": true,
+ "moduleResolution": "node",
+ "allowSyntheticDefaultImports": true,
+ "noImplicitAny": true
+ },
+ "include": ["./src/"]
+}