-
-
Notifications
You must be signed in to change notification settings - Fork 1k
/
GeoMap.js
126 lines (118 loc) · 4.27 KB
/
GeoMap.js
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/*
* This file is part of the nivo project.
*
* Copyright 2016-present, Raphaël Benitte.
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
import { Fragment, useCallback, memo } from 'react'
import { SvgWrapper, withContainer, useDimensions, useTheme } from '@nivo/core'
import { useTooltip } from '@nivo/tooltip'
import { GeoMapPropTypes } from './props'
import GeoGraticule from './GeoGraticule'
import GeoMapFeature from './GeoMapFeature'
import { useGeoMap } from './hooks'
const GeoMap = memo(props => {
const {
width,
height,
margin: partialMargin,
features,
layers = ['graticule', 'features'],
projectionType = 'mercator',
projectionScale = 100,
projectionTranslation = [0.5, 0.5],
projectionRotation = [0, 0, 0],
fillColor = '#dddddd',
borderWidth = 0,
borderColor = '#000000',
enableGraticule = false,
graticuleLineWidth = 0.5,
graticuleLineColor = '#999999',
isInteractive = true,
onClick = () => {},
tooltip: Tooltip,
role = 'img',
} = props
const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
const { graticule, path, getFillColor, getBorderWidth, getBorderColor } = useGeoMap({
width,
height,
projectionType,
projectionScale,
projectionTranslation,
projectionRotation,
fillColor,
borderWidth,
borderColor,
})
const theme = useTheme()
const { showTooltipFromEvent, hideTooltip } = useTooltip()
const handleClick = useCallback(
(feature, event) => isInteractive && onClick && onClick(feature, event),
[isInteractive, onClick]
)
const handleMouseEnter = useCallback(
(feature, event) =>
isInteractive && Tooltip && showTooltipFromEvent(<Tooltip feature={feature} />, event),
[isInteractive, showTooltipFromEvent, Tooltip]
)
const handleMouseMove = useCallback(
(feature, event) =>
isInteractive && Tooltip && showTooltipFromEvent(<Tooltip feature={feature} />, event),
[isInteractive, showTooltipFromEvent, Tooltip]
)
const handleMouseLeave = useCallback(
() => isInteractive && hideTooltip(),
[isInteractive, hideTooltip]
)
return (
<SvgWrapper
width={outerWidth}
height={outerHeight}
margin={margin}
theme={theme}
role={role}
>
{layers.map((layer, i) => {
if (layer === 'graticule') {
if (enableGraticule !== true) return null
return (
<GeoGraticule
key="graticule"
path={path}
graticule={graticule}
lineWidth={graticuleLineWidth}
lineColor={graticuleLineColor}
/>
)
}
if (layer === 'features') {
return (
<Fragment key="features">
{features.map(feature => (
<GeoMapFeature
key={feature.id}
feature={feature}
path={path}
fillColor={getFillColor(feature)}
borderWidth={getBorderWidth(feature)}
borderColor={getBorderColor(feature)}
onMouseEnter={handleMouseEnter}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
))}
</Fragment>
)
}
return <Fragment key={i}>{layer(props)}</Fragment>
})}
</SvgWrapper>
)
})
GeoMap.displayName = 'GeoMap'
GeoMap.propTypes = GeoMapPropTypes
export default withContainer(GeoMap)