@cdc/map 4.23.5 → 4.23.7
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 +23051 -22172
- package/examples/custom-map-layers.json +10 -2
- package/examples/example-city-state.json +36 -0
- package/examples/new-cities.json +656 -0
- package/examples/testing-layer-2.json +61 -1
- package/examples/testing-layer.json +1 -5
- package/index.html +8 -7
- package/package.json +3 -3
- package/src/CdcMap.jsx +61 -87
- package/src/components/CountyMap.jsx +25 -14
- package/src/components/DataTable.jsx +6 -6
- package/src/components/EditorPanel.jsx +1272 -1232
- package/src/components/UsaMap.jsx +7 -1
- package/src/data/initial-state.js +3 -1
- package/src/data/supported-cities.csv +165 -0
- package/src/data/supported-geos.js +14 -0
- package/src/hooks/useMapLayers.jsx +11 -75
- 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 +202 -203
- package/LICENSE +0 -201
- package/src/scss/tooltips.scss +0 -36
package/src/scss/map.scss
CHANGED
|
@@ -1,209 +1,208 @@
|
|
|
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
|
-
|
|
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
64
|
}
|
|
65
65
|
|
|
66
66
|
.geography-container {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
67
|
+
position: relative;
|
|
68
|
+
flex-grow: 1;
|
|
69
|
+
width: 100%;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
.geo-point {
|
|
72
|
+
transition: 0.3s all;
|
|
73
|
+
circle {
|
|
74
|
+
fill: inherit;
|
|
75
|
+
transition: 0.1s transform;
|
|
76
|
+
}
|
|
77
|
+
&:hover {
|
|
78
|
+
transition: 0.2s all;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
.map-logo {
|
|
82
|
+
position: absolute;
|
|
83
|
+
bottom: 2em;
|
|
84
|
+
right: 1em;
|
|
85
|
+
z-index: 3;
|
|
86
|
+
width: 75px;
|
|
87
|
+
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.single-geo {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
91
|
+
transition: 0.2s fill;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
&:focus {
|
|
94
|
+
outline: 0;
|
|
95
|
+
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
// Cities and Territories
|
|
99
99
|
.territories {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
100
|
+
margin: 2em 100px 2em 0;
|
|
101
|
+
font-size: 1.1em;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
> span {
|
|
105
|
+
margin-left: 1em;
|
|
106
|
+
margin-right: 0.5em;
|
|
107
|
+
}
|
|
108
|
+
svg {
|
|
109
|
+
max-width: 35px;
|
|
110
|
+
min-width: 25px;
|
|
111
|
+
margin-left: 0.5em;
|
|
112
|
+
transition: 0.3s all;
|
|
113
|
+
text {
|
|
114
|
+
font-size: 0.95em;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.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
|
-
|
|
120
|
+
display: flex;
|
|
121
|
+
position: absolute;
|
|
122
|
+
bottom: 2em;
|
|
123
|
+
left: 1em;
|
|
124
|
+
z-index: 4;
|
|
125
|
+
> button.reset {
|
|
126
|
+
margin-left: 5px;
|
|
127
|
+
background: rgba(0, 0, 0, 0.65);
|
|
128
|
+
transition: 0.2s all;
|
|
129
|
+
color: #fff;
|
|
130
|
+
&:hover {
|
|
131
|
+
background: rgba(0, 0, 0, 0.8);
|
|
132
|
+
transition: 0.2s all;
|
|
133
|
+
}
|
|
134
|
+
&:active {
|
|
135
|
+
transform: scale(0.9);
|
|
136
|
+
}
|
|
137
|
+
&:focus {
|
|
138
|
+
background: #005eaa;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
> button:not(.reset) {
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
padding: 0.2em;
|
|
146
|
+
height: 1.75em;
|
|
147
|
+
width: 1.75em;
|
|
148
|
+
background: rgba(0, 0, 0, 0.65);
|
|
149
|
+
transition: 0.2s all;
|
|
150
|
+
color: #fff;
|
|
151
|
+
border-radius: 100%;
|
|
152
|
+
border: 0;
|
|
153
|
+
&:hover {
|
|
154
|
+
background: rgba(0, 0, 0, 0.8);
|
|
155
|
+
transition: 0.2s all;
|
|
156
|
+
}
|
|
157
|
+
&:active {
|
|
158
|
+
transform: scale(0.9);
|
|
159
|
+
}
|
|
160
|
+
svg {
|
|
161
|
+
height: 1.75em;
|
|
162
|
+
width: 1.75em;
|
|
163
|
+
}
|
|
164
|
+
&:focus {
|
|
165
|
+
background: #005eaa;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
> button:first-child {
|
|
169
|
+
margin-right: 0.25em;
|
|
170
|
+
}
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
@include breakpointClass(sm) {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
174
|
+
.zoom-controls > button:not(.reset) {
|
|
175
|
+
height: 2.5em;
|
|
176
|
+
width: 2.5em;
|
|
177
|
+
svg {
|
|
178
|
+
height: 2.5em;
|
|
179
|
+
width: 2.5em;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
183
182
|
}
|
|
184
183
|
|
|
185
184
|
@include breakpointClass(md) {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
185
|
+
.map-downloads .map-downloads__ui.btn-group {
|
|
186
|
+
top: 1em;
|
|
187
|
+
left: 1em;
|
|
188
|
+
transform: none;
|
|
189
|
+
}
|
|
190
|
+
.territories {
|
|
191
|
+
font-size: 1em;
|
|
192
|
+
> span {
|
|
193
|
+
margin-left: 0;
|
|
194
|
+
}
|
|
195
|
+
svg {
|
|
196
|
+
max-width: 45px;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
200
199
|
}
|
|
201
200
|
|
|
202
201
|
.countyMapGroup {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
202
|
+
transition: transform 1s;
|
|
203
|
+
will-change: transform;
|
|
204
|
+
transform-origin: center;
|
|
205
|
+
stroke: none !important;
|
|
207
206
|
}
|
|
208
207
|
|
|
209
208
|
// .state {
|
|
@@ -211,21 +210,21 @@ header + .map-container.full-border {
|
|
|
211
210
|
// }
|
|
212
211
|
|
|
213
212
|
.state {
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
213
|
+
&--inactive:hover path {
|
|
214
|
+
cursor: pointer;
|
|
215
|
+
transition: fill 0.5s;
|
|
216
|
+
}
|
|
218
217
|
}
|
|
219
218
|
|
|
220
219
|
.county--path {
|
|
221
|
-
|
|
220
|
+
fill: white;
|
|
222
221
|
}
|
|
223
222
|
|
|
224
223
|
.btn--reset {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
224
|
+
position: absolute;
|
|
225
|
+
top: 10px;
|
|
226
|
+
right: 10px;
|
|
227
|
+
display: none;
|
|
229
228
|
}
|
|
230
229
|
|
|
231
230
|
//Region Maps
|
|
@@ -239,69 +238,69 @@ header + .map-container.full-border {
|
|
|
239
238
|
#region-8-label,
|
|
240
239
|
#region-9-label,
|
|
241
240
|
#region-10-label {
|
|
242
|
-
|
|
241
|
+
background: #fff;
|
|
243
242
|
}
|
|
244
243
|
|
|
245
244
|
#region-1-label {
|
|
246
|
-
|
|
245
|
+
transform: translate(90%, 22%);
|
|
247
246
|
}
|
|
248
247
|
|
|
249
248
|
#region-2-label {
|
|
250
|
-
|
|
251
|
-
|
|
249
|
+
//transform: translate(83%, 31%); SIDE CHART EXPERIMENT
|
|
250
|
+
transform: translate(83%, 33%);
|
|
252
251
|
}
|
|
253
252
|
|
|
254
253
|
#region-3-label {
|
|
255
|
-
|
|
256
|
-
|
|
254
|
+
//transform: translate(78%, 48%); SIDE CHART EXPERIMENT
|
|
255
|
+
transform: translate(75%, 45%);
|
|
257
256
|
}
|
|
258
257
|
|
|
259
258
|
#region-4-label {
|
|
260
|
-
|
|
259
|
+
transform: translate(68%, 70%);
|
|
261
260
|
}
|
|
262
261
|
|
|
263
262
|
#region-5-label {
|
|
264
|
-
|
|
263
|
+
transform: translate(65%, 44%);
|
|
265
264
|
}
|
|
266
265
|
|
|
267
266
|
#region-6-label {
|
|
268
|
-
|
|
267
|
+
transform: translate(45%, 75%);
|
|
269
268
|
}
|
|
270
269
|
|
|
271
270
|
#region-7-label {
|
|
272
|
-
|
|
271
|
+
transform: translate(53%, 47%);
|
|
273
272
|
}
|
|
274
273
|
|
|
275
274
|
#region-8-label {
|
|
276
|
-
|
|
275
|
+
transform: translate(35%, 30%);
|
|
277
276
|
}
|
|
278
277
|
|
|
279
278
|
#region-9-label {
|
|
280
|
-
|
|
279
|
+
transform: translate(18%, 58%);
|
|
281
280
|
}
|
|
282
281
|
|
|
283
282
|
#region-10-label {
|
|
284
|
-
|
|
283
|
+
transform: translate(15%, 28%);
|
|
285
284
|
}
|
|
286
285
|
|
|
287
286
|
#region-2-territories,
|
|
288
287
|
#region-9-territories {
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
288
|
+
text {
|
|
289
|
+
font-weight: bold;
|
|
290
|
+
font-size: 14px;
|
|
291
|
+
}
|
|
293
292
|
}
|
|
294
293
|
|
|
295
294
|
#region-2-territories {
|
|
296
|
-
|
|
295
|
+
transform: translate(86%, 40%);
|
|
297
296
|
}
|
|
298
297
|
|
|
299
298
|
#region-9-territories {
|
|
300
|
-
|
|
299
|
+
transform: translate(4%, 72%);
|
|
301
300
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
301
|
+
.region-9-row2 {
|
|
302
|
+
transform: translateY(34px);
|
|
303
|
+
}
|
|
305
304
|
}
|
|
306
305
|
|
|
307
306
|
.county-borders {
|
|
@@ -313,12 +312,12 @@ header + .map-container.full-border {
|
|
|
313
312
|
}
|
|
314
313
|
|
|
315
314
|
canvas {
|
|
316
|
-
|
|
315
|
+
width: 100%;
|
|
317
316
|
}
|
|
318
317
|
|
|
319
318
|
#canvas-tooltip {
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
319
|
+
position: fixed;
|
|
320
|
+
background-color: white;
|
|
321
|
+
pointer-events: none;
|
|
322
|
+
display: none;
|
|
324
323
|
}
|