diff --git a/justice40-frontend/package-lock.json b/justice40-frontend/package-lock.json
index c1219a5e..8da4322a 100644
--- a/justice40-frontend/package-lock.json
+++ b/justice40-frontend/package-lock.json
@@ -2202,6 +2202,36 @@
"regenerator-runtime": "^0.13.3"
}
},
+ "@mapbox/jsonlint-lines-primitives": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+ "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
+ },
+ "@mapbox/mapbox-gl-style-spec": {
+ "version": "13.19.0",
+ "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.19.0.tgz",
+ "integrity": "sha512-qA9P4WHU4a1iLKM/W2EIxCxcwlxa6isPF6P+jSPaIs4VlZKYO1DMVWNiY03SXu6a+K3dB3GEhRLvEh1f/8VG2w==",
+ "requires": {
+ "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+ "@mapbox/point-geometry": "^0.1.0",
+ "@mapbox/unitbezier": "^0.0.0",
+ "csscolorparser": "~1.0.2",
+ "json-stringify-pretty-compact": "^2.0.0",
+ "minimist": "^1.2.5",
+ "rw": "^1.3.3",
+ "sort-object": "^0.3.2"
+ }
+ },
+ "@mapbox/point-geometry": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+ "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+ },
+ "@mapbox/unitbezier": {
+ "version": "0.0.0",
+ "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+ "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
+ },
"@mdx-js/mdx": {
"version": "1.6.22",
"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz",
@@ -6032,6 +6062,11 @@
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
},
+ "csscolorparser": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+ "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
+ },
"cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6333,6 +6368,269 @@
"type": "^1.0.1"
}
},
+ "d3": {
+ "version": "6.7.0",
+ "resolved": "https://registry.npmjs.org/d3/-/d3-6.7.0.tgz",
+ "integrity": "sha512-hNHRhe+yCDLUG6Q2LwvR/WdNFPOJQ5VWqsJcwIYVeI401+d2/rrCjxSXkiAdIlpx7/73eApFB4Olsmh3YN7a6g==",
+ "requires": {
+ "d3-array": "2",
+ "d3-axis": "2",
+ "d3-brush": "2",
+ "d3-chord": "2",
+ "d3-color": "2",
+ "d3-contour": "2",
+ "d3-delaunay": "5",
+ "d3-dispatch": "2",
+ "d3-drag": "2",
+ "d3-dsv": "2",
+ "d3-ease": "2",
+ "d3-fetch": "2",
+ "d3-force": "2",
+ "d3-format": "2",
+ "d3-geo": "2",
+ "d3-hierarchy": "2",
+ "d3-interpolate": "2",
+ "d3-path": "2",
+ "d3-polygon": "2",
+ "d3-quadtree": "2",
+ "d3-random": "2",
+ "d3-scale": "3",
+ "d3-scale-chromatic": "2",
+ "d3-selection": "2",
+ "d3-shape": "2",
+ "d3-time": "2",
+ "d3-time-format": "3",
+ "d3-timer": "2",
+ "d3-transition": "2",
+ "d3-zoom": "2"
+ }
+ },
+ "d3-array": {
+ "version": "2.12.1",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+ "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+ "requires": {
+ "internmap": "^1.0.0"
+ }
+ },
+ "d3-axis": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
+ "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
+ },
+ "d3-brush": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-2.1.0.tgz",
+ "integrity": "sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==",
+ "requires": {
+ "d3-dispatch": "1 - 2",
+ "d3-drag": "2",
+ "d3-interpolate": "1 - 2",
+ "d3-selection": "2",
+ "d3-transition": "2"
+ }
+ },
+ "d3-chord": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-2.0.0.tgz",
+ "integrity": "sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==",
+ "requires": {
+ "d3-path": "1 - 2"
+ }
+ },
+ "d3-color": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+ "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+ },
+ "d3-contour": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-2.0.0.tgz",
+ "integrity": "sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==",
+ "requires": {
+ "d3-array": "2"
+ }
+ },
+ "d3-delaunay": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
+ "integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
+ "requires": {
+ "delaunator": "4"
+ }
+ },
+ "d3-dispatch": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
+ "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+ },
+ "d3-drag": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
+ "integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
+ "requires": {
+ "d3-dispatch": "1 - 2",
+ "d3-selection": "2"
+ }
+ },
+ "d3-dsv": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-2.0.0.tgz",
+ "integrity": "sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==",
+ "requires": {
+ "commander": "2",
+ "iconv-lite": "0.4",
+ "rw": "1"
+ }
+ },
+ "d3-ease": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
+ "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
+ },
+ "d3-fetch": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-2.0.0.tgz",
+ "integrity": "sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==",
+ "requires": {
+ "d3-dsv": "1 - 2"
+ }
+ },
+ "d3-force": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
+ "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
+ "requires": {
+ "d3-dispatch": "1 - 2",
+ "d3-quadtree": "1 - 2",
+ "d3-timer": "1 - 2"
+ }
+ },
+ "d3-format": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+ "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+ },
+ "d3-geo": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.1.tgz",
+ "integrity": "sha512-M6yzGbFRfxzNrVhxDJXzJqSLQ90q1cCyb3EWFZ1LF4eWOBYxFypw7I/NFVBNXKNqxv1bqLathhYvdJ6DC+th3A==",
+ "requires": {
+ "d3-array": ">=2.5"
+ }
+ },
+ "d3-hierarchy": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
+ "integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw=="
+ },
+ "d3-interpolate": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+ "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+ "requires": {
+ "d3-color": "1 - 2"
+ }
+ },
+ "d3-path": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
+ "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+ },
+ "d3-polygon": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
+ "integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ=="
+ },
+ "d3-quadtree": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
+ "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw=="
+ },
+ "d3-random": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
+ "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
+ },
+ "d3-scale": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+ "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+ "requires": {
+ "d3-array": "^2.3.0",
+ "d3-format": "1 - 2",
+ "d3-interpolate": "1.2.0 - 2",
+ "d3-time": "^2.1.1",
+ "d3-time-format": "2 - 3"
+ }
+ },
+ "d3-scale-chromatic": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
+ "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
+ "requires": {
+ "d3-color": "1 - 2",
+ "d3-interpolate": "1 - 2"
+ }
+ },
+ "d3-selection": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+ "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+ },
+ "d3-shape": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+ "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+ "requires": {
+ "d3-path": "1 - 2"
+ }
+ },
+ "d3-time": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+ "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+ "requires": {
+ "d3-array": "2"
+ }
+ },
+ "d3-time-format": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+ "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+ "requires": {
+ "d3-time": "1 - 2"
+ }
+ },
+ "d3-timer": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+ "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
+ },
+ "d3-transition": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
+ "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+ "requires": {
+ "d3-color": "1 - 2",
+ "d3-dispatch": "1 - 2",
+ "d3-ease": "1 - 2",
+ "d3-interpolate": "1 - 2",
+ "d3-timer": "1 - 2"
+ }
+ },
+ "d3-zoom": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
+ "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+ "requires": {
+ "d3-dispatch": "1 - 2",
+ "d3-drag": "2",
+ "d3-interpolate": "1 - 2",
+ "d3-selection": "2",
+ "d3-transition": "2"
+ }
+ },
"damerau-levenshtein": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -6720,6 +7018,11 @@
}
}
},
+ "delaunator": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
+ "integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag=="
+ },
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -11657,6 +11960,11 @@
"side-channel": "^1.0.4"
}
},
+ "internmap": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+ "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+ },
"into-stream": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
@@ -12429,6 +12737,11 @@
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
"integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
},
+ "json-stringify-pretty-compact": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+ "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
+ },
"json-stringify-safe": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -12951,6 +13264,11 @@
"object-visit": "^1.0.0"
}
},
+ "mapbox-to-css-font": {
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.0.tgz",
+ "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg=="
+ },
"markdown-escapes": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
@@ -14233,6 +14551,40 @@
"integrity": "sha512-ip1YAsRRHxu7GuSFdJTyQMtFLZ2IOCMSaiQvF/T4M4YtszSqxUf/ByK2nJxK6pvFQOUrM3uiMZqE5oXT7zsX9w==",
"requires": {
"ol": "^5.3.1"
+ },
+ "dependencies": {
+ "ol": {
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
+ "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+ "requires": {
+ "pbf": "3.1.0",
+ "pixelworks": "1.1.0",
+ "rbush": "2.0.2"
+ }
+ },
+ "pbf": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
+ "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+ "requires": {
+ "ieee754": "^1.1.6",
+ "resolve-protobuf-schema": "^2.0.0"
+ }
+ },
+ "quickselect": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
+ "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+ },
+ "rbush": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
+ "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+ "requires": {
+ "quickselect": "^1.0.1"
+ }
+ }
}
},
"netlify-cms-widget-markdown": {
@@ -14860,13 +15212,23 @@
"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
},
"ol": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
- "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+ "version": "6.5.0",
+ "resolved": "https://registry.npmjs.org/ol/-/ol-6.5.0.tgz",
+ "integrity": "sha512-a5ebahrjF5yCPFle1rc0aHzKp/9A4LlUnjh+S3I+x4EgcvcddDhpOX3WDOs0Pg9/wEElrikHSGEvbeej2Hh4Ug==",
"requires": {
- "pbf": "3.1.0",
- "pixelworks": "1.1.0",
- "rbush": "2.0.2"
+ "ol-mapbox-style": "^6.1.1",
+ "pbf": "3.2.1",
+ "rbush": "^3.0.1"
+ }
+ },
+ "ol-mapbox-style": {
+ "version": "6.3.2",
+ "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.3.2.tgz",
+ "integrity": "sha512-itWZuwZHilztRM9983WmJ+ounaXIS0PdXF8h5xJd7cJhSv02M27w4RQkhiUw35/VLlUdTT/ei3KYi0w2TGDw2A==",
+ "requires": {
+ "@mapbox/mapbox-gl-style-spec": "^13.14.0",
+ "mapbox-to-css-font": "^2.4.0",
+ "webfont-matcher": "^1.1.0"
}
},
"omggif": {
@@ -15409,12 +15771,12 @@
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
},
"pbf": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
- "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+ "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
"requires": {
- "ieee754": "^1.1.6",
- "resolve-protobuf-schema": "^2.0.0"
+ "ieee754": "^1.1.12",
+ "resolve-protobuf-schema": "^2.1.0"
}
},
"peek-readable": {
@@ -17518,9 +17880,9 @@
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
},
"quickselect": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
- "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+ "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
},
"raf": {
"version": "3.4.1",
@@ -17586,11 +17948,11 @@
}
},
"rbush": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
- "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+ "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
"requires": {
- "quickselect": "^1.0.1"
+ "quickselect": "^2.0.0"
}
},
"rc": {
@@ -19283,6 +19645,11 @@
"queue-microtask": "^1.2.2"
}
},
+ "rw": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+ "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+ },
"rxjs": {
"version": "6.6.7",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
@@ -20298,6 +20665,16 @@
"url-parse": "^1.5.1"
}
},
+ "sort-asc": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+ "integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k="
+ },
+ "sort-desc": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+ "integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4="
+ },
"sort-keys": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
@@ -20336,6 +20713,15 @@
}
}
},
+ "sort-object": {
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+ "integrity": "sha1-mODRme3kDgfGGoRAPGHWw7KQ+eI=",
+ "requires": {
+ "sort-asc": "^0.1.0",
+ "sort-desc": "^0.1.1"
+ }
+ },
"source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -22275,6 +22661,11 @@
"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
"integrity": "sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw=="
},
+ "webfont-matcher": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
+ "integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc="
+ },
"webpack": {
"version": "5.33.2",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.33.2.tgz",
diff --git a/justice40-frontend/package.json b/justice40-frontend/package.json
index 99e22755..824373e8 100644
--- a/justice40-frontend/package.json
+++ b/justice40-frontend/package.json
@@ -17,6 +17,7 @@
"dependencies": {
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
+ "d3": "^6.7.0",
"gatsby": "^3.2.1",
"gatsby-plugin-image": "^1.3.0",
"gatsby-plugin-manifest": "^3.3.0",
@@ -32,6 +33,7 @@
"gatsby-transformer-sharp": "^3.3.0",
"leaflet": "^1.7.1",
"netlify-cms-app": "^2.14.45",
+ "ol": "^6.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
diff --git a/justice40-frontend/src/components/ol-map-wrapper.js b/justice40-frontend/src/components/ol-map-wrapper.js
new file mode 100644
index 00000000..19a31296
--- /dev/null
+++ b/justice40-frontend/src/components/ol-map-wrapper.js
@@ -0,0 +1,123 @@
+// react
+import React, { useState, useEffect, useRef } from 'react';
+
+// openlayers
+import Map from 'ol/Map'
+import View from 'ol/View'
+import TileLayer from 'ol/layer/Tile'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import XYZ from 'ol/source/XYZ'
+import {transform} from 'ol/proj'
+import {toStringXY} from 'ol/coordinate';
+
+function OlMapWrapper(props) {
+
+ // set intial state
+ const [ map, setMap ] = useState()
+ const [ featuresLayer, setFeaturesLayer ] = useState()
+ const [ selectedCoord , setSelectedCoord ] = useState()
+
+ // pull refs
+ const mapElement = useRef()
+
+ // create state ref that can be accessed in OpenLayers onclick callback function
+ // https://stackoverflow.com/a/60643670
+ const mapRef = useRef()
+ mapRef.current = map
+
+ // initialize map on first render - logic formerly put into componentDidMount
+ useEffect( () => {
+
+ // create and add vector source layer
+ const initalFeaturesLayer = new VectorLayer({
+ source: new VectorSource()
+ })
+
+ // create map
+ const initialMap = new Map({
+ target: mapElement.current,
+ layers: [
+
+ // USGS Topo
+ new TileLayer({
+ source: new XYZ({
+ url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}',
+ })
+ }),
+
+ // Google Maps Terrain
+ /* new TileLayer({
+ source: new XYZ({
+ url: 'http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}',
+ })
+ }), */
+
+ initalFeaturesLayer
+
+ ],
+ view: new View({
+ projection: 'EPSG:3857',
+ center: [0, 0],
+ zoom: 2
+ }),
+ controls: []
+ })
+
+ // set map onclick handler
+ initialMap.on('click', handleMapClick)
+
+ // save map and vector layer references to state
+ setMap(initialMap)
+ setFeaturesLayer(initalFeaturesLayer)
+
+ },[])
+
+ // update map if features prop changes - logic formerly put into componentDidUpdate
+ useEffect( () => {
+
+ if (props.features.length) { // may be null on first render
+
+ // set features to map
+ featuresLayer.setSource(
+ new VectorSource({
+ features: props.features // make sure features is an array
+ })
+ )
+
+ // fit map to feature extent (with 100px of padding)
+ map.getView().fit(featuresLayer.getSource().getExtent(), {
+ padding: [100,100,100,100]
+ })
+
+ }
+
+ },[props.features])
+
+ // map click handler
+ const handleMapClick = (event) => {
+
+ // get clicked coordinate using mapRef to access current React state inside OpenLayers callback
+ // https://stackoverflow.com/a/60643670
+ const clickedCoord = mapRef.current.getCoordinateFromPixel(event.pixel);
+
+ // transform coord to EPSG 4326 standard Lat Long
+ const transormedCoord = transform(clickedCoord, 'EPSG:3857', 'EPSG:4326')
+
+ // set React state
+ setSelectedCoord( transormedCoord )
+
+ console.log(transormedCoord)
+
+ }
+
+ // render component
+ return (
+
+ )
+
+}
+
+export default OlMapWrapper
\ No newline at end of file
diff --git a/justice40-frontend/src/pages/openlayers.js b/justice40-frontend/src/pages/openlayers.js
new file mode 100644
index 00000000..d8399f8c
--- /dev/null
+++ b/justice40-frontend/src/pages/openlayers.js
@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+import GeoJSON from 'ol/format/GeoJSON'
+import Feature from 'ol/Feature';
+
+import OlMapWrapper from '../components/ol-map-wrapper'
+
+// import OpenLayersMap from '../components/open-layers-map'
+// import { fromLonLat, get } from 'ol/proj';
+// import TileLayer from 'ol/layer/Tile';
+// import OSM from 'ol/source/OSM';
+// import XYZ from 'ol/source/XYZ';
+// import Map from 'ol/Map';
+// import View from 'ol/View';
+// import MVT from 'ol/format/MVT';
+// import TileSource from 'ol/source/Tile';
+// import VectorTileLayer from 'ol/layer/VectorTile';
+// import VectorTileSource from 'ol/source/VectorTile';
+// import {Fill, Stroke, Style} from 'ol/style';
+// import {schemeCategory10} from 'd3-scale-chromatic';
+
+
+
+// markup
+const OpenLayersPage = () => {
+ // set intial state
+ const [ features, setFeatures ] = useState([])
+
+ // initialization - retrieve GeoJSON features from Mock JSON API get features from mock
+ // GeoJson API (read from flat .json file in public directory)
+ useEffect( () => {
+
+ fetch('/mock-geojson-api.json')
+ .then(response => response.json())
+ .then( (fetchedFeatures) => {
+
+ // parse fetched geojson into OpenLayers features
+ // use options to convert feature from EPSG:4326 to EPSG:3857
+ const wktOptions = {
+ dataProjection: 'EPSG:4326',
+ featureProjection: 'EPSG:3857'
+ }
+ const parsedFeatures = new GeoJSON().readFeatures(fetchedFeatures, wktOptions)
+
+ // set features into state (which will be passed into OpenLayers
+ // map component as props)
+ setFeatures(parsedFeatures)
+ })
+ },[])
+
+ return (
+ <>
+
+
+ OpenLayers
+
+
+
+
+
+
+ )
+ }
+
+ export default OpenLayersPage
+
\ No newline at end of file
diff --git a/justice40-frontend/src/styles/index.scss b/justice40-frontend/src/styles/index.scss
index 4720d3ae..1e0fc8a8 100644
--- a/justice40-frontend/src/styles/index.scss
+++ b/justice40-frontend/src/styles/index.scss
@@ -6,6 +6,13 @@ $theme-image-path: '../../node_modules/uswds/src/img';
$theme-font-path: '../../node_modules/uswds/src/fonts';
@import '../../node_modules/uswds/';
-// @import 'uswds';
+@import '../../node_modules/ol/ol.css';
-#map { height: 180px; }
\ No newline at end of file
+#map { height: 180px; }
+
+#ol-map {
+ min-width: 600px;
+ min-height: 500px;
+ height: 500px;
+ width: 100%;
+}