@cdc/map 4.23.6 → 4.23.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdcmap.js +27677 -26560
- package/examples/default-geocode.json +142 -117
- package/index.html +8 -5
- package/package.json +3 -3
- package/src/CdcMap.jsx +45 -77
- package/src/components/BubbleList.jsx +4 -4
- package/src/components/CountyMap.jsx +58 -12
- package/src/components/EditorPanel.jsx +84 -83
- package/src/components/SingleStateMap.jsx +2 -15
- package/src/components/UsaMap.jsx +11 -4
- package/src/components/UsaRegionMap.jsx +2 -18
- package/src/components/WorldMap.jsx +33 -62
- package/src/data/initial-state.js +7 -2
- package/src/data/supported-geos.js +3 -0
- package/src/hooks/useTooltip.js +135 -0
- package/src/scss/editor-panel.scss +1 -7
- package/src/scss/main.scss +1 -1
- package/src/scss/map.scss +243 -204
- package/src/scss/tooltips.scss +0 -36
package/src/scss/map.scss
CHANGED
|
@@ -1,209 +1,248 @@
|
|
|
1
1
|
// Map Download UI
|
|
2
2
|
.map-downloads {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
position: relative;
|
|
4
|
+
z-index: 3;
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
.map-downloads__ui.btn-group {
|
|
7
|
+
transform: scale(0.8);
|
|
8
|
+
}
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
.map-downloads__ui {
|
|
11
|
+
position: absolute;
|
|
12
|
+
top: 0.5em;
|
|
13
|
+
left: 0.5em;
|
|
14
|
+
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
15
|
+
box-shadow: 0 5px 12px -8px rgba(0, 0, 0, 0.5);
|
|
16
|
+
user-select: none;
|
|
17
|
+
height: 42px;
|
|
18
|
+
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.map-container {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
&.full-border {
|
|
23
|
+
border: #c2c2c2 1px solid;
|
|
24
|
+
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
header + .map-container.full-border {
|
|
28
|
-
|
|
28
|
+
border-top: 0; // When they have a header, don't add a border top
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
// World Specific Styles
|
|
32
32
|
.map-container.world {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
&.data .geography-container {
|
|
34
|
+
border-bottom: $lightGray 1px solid;
|
|
35
|
+
}
|
|
36
|
+
.geography-container {
|
|
37
|
+
cursor: move;
|
|
38
|
+
}
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
@include breakpointClass(md) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
42
|
+
// US Specific
|
|
43
|
+
.map-container.us {
|
|
44
|
+
margin: 0 1em;
|
|
45
|
+
}
|
|
46
|
+
// Data Specific
|
|
47
|
+
.map-container.data {
|
|
48
|
+
&.side {
|
|
49
|
+
flex-direction: row;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
// Bubble Specific
|
|
53
|
+
.map-container.bubble {
|
|
54
|
+
&.side {
|
|
55
|
+
flex-direction: row;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.map-container.us-geocode {
|
|
60
|
+
&.side {
|
|
61
|
+
flex-direction: row;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
$small: 500px;
|
|
67
|
+
$medium: 768px;
|
|
65
68
|
|
|
66
69
|
.geography-container {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
70
|
+
position: relative;
|
|
71
|
+
flex-grow: 1;
|
|
72
|
+
width: 100%;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
.geo-point {
|
|
75
|
+
transition: 0.3s all;
|
|
76
|
+
circle {
|
|
77
|
+
fill: inherit;
|
|
78
|
+
transition: 0.1s transform;
|
|
79
|
+
}
|
|
80
|
+
&:hover {
|
|
81
|
+
transition: 0.2s all;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
// make logo smaller on mobile
|
|
85
|
+
@media screen and (max-width: $small) {
|
|
86
|
+
.map-logo {
|
|
87
|
+
position: absolute;
|
|
88
|
+
bottom: 4em; // needed to align to top of Territories
|
|
89
|
+
right: 1em;
|
|
90
|
+
z-index: 3;
|
|
91
|
+
width: 50px; // make it smaller
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
// everything else but mobile
|
|
95
|
+
@media screen and (min-width: $small) {
|
|
96
|
+
.map-logo {
|
|
97
|
+
position: absolute;
|
|
98
|
+
bottom: 2em;
|
|
99
|
+
right: 1em;
|
|
100
|
+
z-index: 3;
|
|
101
|
+
width: 75px;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
88
105
|
}
|
|
89
106
|
|
|
107
|
+
|
|
90
108
|
.single-geo {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
109
|
+
transition: 0.2s fill;
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
&:focus {
|
|
112
|
+
outline: 0;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// for Territories label in one col and Territory blocks wrapping in 2nd column
|
|
117
|
+
.two-col {
|
|
118
|
+
display: flex;
|
|
119
|
+
margin-top: 0;
|
|
120
|
+
justify-content: flex-start;
|
|
121
|
+
> label {
|
|
122
|
+
margin-top: 0;
|
|
123
|
+
display: inline-block;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
.territories-label {
|
|
127
|
+
margin: 2em 5px 2em 1em;
|
|
128
|
+
font-size: 1.1em;
|
|
129
|
+
display:block;
|
|
96
130
|
}
|
|
97
131
|
|
|
98
132
|
// Cities and Territories
|
|
99
133
|
.territories {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
134
|
+
margin: 2em 200px 2em 0;
|
|
135
|
+
font-size: 1.1em;
|
|
136
|
+
width: 100%;
|
|
137
|
+
display: block;
|
|
138
|
+
align-items: center;
|
|
139
|
+
> span {
|
|
140
|
+
margin-left: 1em;
|
|
141
|
+
margin-right: 0.5em;
|
|
142
|
+
}
|
|
143
|
+
svg {
|
|
144
|
+
max-width: 35px;
|
|
145
|
+
min-width: 25px;
|
|
146
|
+
margin-left: 0.5em;
|
|
147
|
+
transition: 0.3s all;
|
|
148
|
+
text {
|
|
149
|
+
font-size: 0.95em;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&--mobile {
|
|
154
|
+
@extend .territories;
|
|
155
|
+
width: 70%;
|
|
156
|
+
}
|
|
117
157
|
}
|
|
118
158
|
|
|
119
159
|
.zoom-controls {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
160
|
+
display: flex;
|
|
161
|
+
position: absolute;
|
|
162
|
+
bottom: 2em;
|
|
163
|
+
left: 1em;
|
|
164
|
+
z-index: 4;
|
|
165
|
+
> button.reset {
|
|
166
|
+
margin-left: 5px;
|
|
167
|
+
background: rgba(0, 0, 0, 0.65);
|
|
168
|
+
transition: 0.2s all;
|
|
169
|
+
color: #fff;
|
|
170
|
+
&:hover {
|
|
171
|
+
background: rgba(0, 0, 0, 0.8);
|
|
172
|
+
transition: 0.2s all;
|
|
173
|
+
}
|
|
174
|
+
&:active {
|
|
175
|
+
transform: scale(0.9);
|
|
176
|
+
}
|
|
177
|
+
&:focus {
|
|
178
|
+
background: #005eaa;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
> button:not(.reset) {
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
justify-content: center;
|
|
185
|
+
padding: 0.2em;
|
|
186
|
+
height: 1.75em;
|
|
187
|
+
width: 1.75em;
|
|
188
|
+
background: rgba(0, 0, 0, 0.65);
|
|
189
|
+
transition: 0.2s all;
|
|
190
|
+
color: #fff;
|
|
191
|
+
border-radius: 100%;
|
|
192
|
+
border: 0;
|
|
193
|
+
&:hover {
|
|
194
|
+
background: rgba(0, 0, 0, 0.8);
|
|
195
|
+
transition: 0.2s all;
|
|
196
|
+
}
|
|
197
|
+
&:active {
|
|
198
|
+
transform: scale(0.9);
|
|
199
|
+
}
|
|
200
|
+
svg {
|
|
201
|
+
height: 1.75em;
|
|
202
|
+
width: 1.75em;
|
|
203
|
+
}
|
|
204
|
+
&:focus {
|
|
205
|
+
background: #005eaa;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
> button:first-child {
|
|
209
|
+
margin-right: 0.25em;
|
|
210
|
+
}
|
|
171
211
|
}
|
|
172
212
|
|
|
173
213
|
@include breakpointClass(sm) {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
214
|
+
.zoom-controls > button:not(.reset) {
|
|
215
|
+
height: 2.5em;
|
|
216
|
+
width: 2.5em;
|
|
217
|
+
svg {
|
|
218
|
+
height: 2.5em;
|
|
219
|
+
width: 2.5em;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
183
222
|
}
|
|
184
223
|
|
|
185
224
|
@include breakpointClass(md) {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
225
|
+
.map-downloads .map-downloads__ui.btn-group {
|
|
226
|
+
top: 1em;
|
|
227
|
+
left: 1em;
|
|
228
|
+
transform: none;
|
|
229
|
+
}
|
|
230
|
+
.territories {
|
|
231
|
+
font-size: 1em;
|
|
232
|
+
> span {
|
|
233
|
+
margin-left: 0;
|
|
234
|
+
}
|
|
235
|
+
svg {
|
|
236
|
+
max-width: 45px;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
200
239
|
}
|
|
201
240
|
|
|
202
241
|
.countyMapGroup {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
242
|
+
transition: transform 1s;
|
|
243
|
+
will-change: transform;
|
|
244
|
+
transform-origin: center;
|
|
245
|
+
stroke: none !important;
|
|
207
246
|
}
|
|
208
247
|
|
|
209
248
|
// .state {
|
|
@@ -211,21 +250,21 @@ header + .map-container.full-border {
|
|
|
211
250
|
// }
|
|
212
251
|
|
|
213
252
|
.state {
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
253
|
+
&--inactive:hover path {
|
|
254
|
+
cursor: pointer;
|
|
255
|
+
transition: fill 0.5s;
|
|
256
|
+
}
|
|
218
257
|
}
|
|
219
258
|
|
|
220
259
|
.county--path {
|
|
221
|
-
|
|
260
|
+
fill: white;
|
|
222
261
|
}
|
|
223
262
|
|
|
224
263
|
.btn--reset {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
264
|
+
position: absolute;
|
|
265
|
+
top: 10px;
|
|
266
|
+
right: 10px;
|
|
267
|
+
display: none;
|
|
229
268
|
}
|
|
230
269
|
|
|
231
270
|
//Region Maps
|
|
@@ -239,69 +278,69 @@ header + .map-container.full-border {
|
|
|
239
278
|
#region-8-label,
|
|
240
279
|
#region-9-label,
|
|
241
280
|
#region-10-label {
|
|
242
|
-
|
|
281
|
+
background: #fff;
|
|
243
282
|
}
|
|
244
283
|
|
|
245
284
|
#region-1-label {
|
|
246
|
-
|
|
285
|
+
transform: translate(90%, 22%);
|
|
247
286
|
}
|
|
248
287
|
|
|
249
288
|
#region-2-label {
|
|
250
|
-
|
|
251
|
-
|
|
289
|
+
//transform: translate(83%, 31%); SIDE CHART EXPERIMENT
|
|
290
|
+
transform: translate(83%, 33%);
|
|
252
291
|
}
|
|
253
292
|
|
|
254
293
|
#region-3-label {
|
|
255
|
-
|
|
256
|
-
|
|
294
|
+
//transform: translate(78%, 48%); SIDE CHART EXPERIMENT
|
|
295
|
+
transform: translate(75%, 45%);
|
|
257
296
|
}
|
|
258
297
|
|
|
259
298
|
#region-4-label {
|
|
260
|
-
|
|
299
|
+
transform: translate(68%, 70%);
|
|
261
300
|
}
|
|
262
301
|
|
|
263
302
|
#region-5-label {
|
|
264
|
-
|
|
303
|
+
transform: translate(65%, 44%);
|
|
265
304
|
}
|
|
266
305
|
|
|
267
306
|
#region-6-label {
|
|
268
|
-
|
|
307
|
+
transform: translate(45%, 75%);
|
|
269
308
|
}
|
|
270
309
|
|
|
271
310
|
#region-7-label {
|
|
272
|
-
|
|
311
|
+
transform: translate(53%, 47%);
|
|
273
312
|
}
|
|
274
313
|
|
|
275
314
|
#region-8-label {
|
|
276
|
-
|
|
315
|
+
transform: translate(35%, 30%);
|
|
277
316
|
}
|
|
278
317
|
|
|
279
318
|
#region-9-label {
|
|
280
|
-
|
|
319
|
+
transform: translate(18%, 58%);
|
|
281
320
|
}
|
|
282
321
|
|
|
283
322
|
#region-10-label {
|
|
284
|
-
|
|
323
|
+
transform: translate(15%, 28%);
|
|
285
324
|
}
|
|
286
325
|
|
|
287
326
|
#region-2-territories,
|
|
288
327
|
#region-9-territories {
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
328
|
+
text {
|
|
329
|
+
font-weight: bold;
|
|
330
|
+
font-size: 14px;
|
|
331
|
+
}
|
|
293
332
|
}
|
|
294
333
|
|
|
295
334
|
#region-2-territories {
|
|
296
|
-
|
|
335
|
+
transform: translate(86%, 40%);
|
|
297
336
|
}
|
|
298
337
|
|
|
299
338
|
#region-9-territories {
|
|
300
|
-
|
|
339
|
+
transform: translate(4%, 72%);
|
|
301
340
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
341
|
+
.region-9-row2 {
|
|
342
|
+
transform: translateY(34px);
|
|
343
|
+
}
|
|
305
344
|
}
|
|
306
345
|
|
|
307
346
|
.county-borders {
|
|
@@ -313,12 +352,12 @@ header + .map-container.full-border {
|
|
|
313
352
|
}
|
|
314
353
|
|
|
315
354
|
canvas {
|
|
316
|
-
|
|
355
|
+
width: 100%;
|
|
317
356
|
}
|
|
318
357
|
|
|
319
358
|
#canvas-tooltip {
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
359
|
+
position: fixed;
|
|
360
|
+
background-color: white;
|
|
361
|
+
pointer-events: none;
|
|
362
|
+
display: none;
|
|
324
363
|
}
|
package/src/scss/tooltips.scss
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
/* Tooltip Styles - overrides some default ones provided by <ReactTooltip /> */
|
|
2
|
-
.tooltip {
|
|
3
|
-
padding: 8px 12px;
|
|
4
|
-
font-size: 1em;
|
|
5
|
-
line-height: 1.4em;
|
|
6
|
-
border: rgba(0, 0, 0, .3) 1px solid;
|
|
7
|
-
border-radius: 4px;
|
|
8
|
-
box-shadow: rgba(0, 0, 0, .1) 3px 3px 7px;
|
|
9
|
-
opacity: 1;
|
|
10
|
-
z-index: 10;
|
|
11
|
-
|
|
12
|
-
&:before, &:after {
|
|
13
|
-
display: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&.capitalize dl {
|
|
17
|
-
text-transform: capitalize;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
[class*="styles-module_arrow"] {
|
|
21
|
-
border-right: 1px solid #b2b2b2;
|
|
22
|
-
border-bottom: 1px solid #b2b2b2;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
dl dt:not(:empty)::after {
|
|
26
|
-
content: ":\00a0";
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
dl > div {
|
|
30
|
-
display: flex;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
strong {
|
|
34
|
-
font-weight: 600;
|
|
35
|
-
}
|
|
36
|
-
}
|