New map

.circleci/config.yml

@@ -8,7 +8,7 @@ jobs:
     working_directory: ~/repo
 
     docker:
-      - image: cimg/node:lts
+      - image: cimg/node:16.20
 
     steps:
       - checkout
@@ -44,7 +44,7 @@ jobs:
     working_directory: ~/repo
 
     docker:
-      - image: cimg/node:lts
+      - image: cimg/node:16.20
 
     steps:
       - checkout
@@ -84,7 +84,7 @@ jobs:
     working_directory: ~/repo
 
     docker:
-      - image: cimg/node:lts
+      - image: cimg/node:16.20
 
     steps:
       - checkout

.prettierrc

@@ -1,5 +1,5 @@
 {
   "arrowParens": "avoid",
   "tabWidth": 2,
-  "trailingComma": "es5",
-}
+  "trailingComma": "es5"
+}

package.json

@@ -21,6 +21,7 @@
     "d3": "^6.6.2",
     "date-fns": "^2.12.0",
     "env-cmd": "^10.1.0",
+    "mapbox-gl": "^3.3.0",
     "moment": "^2.24.0",
     "query-string": "^7.0.1",
     "rc-align": "2.3.5",
@@ -34,7 +35,7 @@
     "react-date-range": "^1.0.3",
     "react-dom": "^16.8.6",
     "react-helmet": "^6.1.0",
-    "react-map-gl": "^5.3.15",
+    "react-map-gl": "7",
     "react-perfect-scrollbar": "^1.5.8",
     "react-popper": "^1.3.4",
     "react-router-dom": "^5.0.1",

src/App.module.scss

@@ -15,6 +15,7 @@
   @media not #{$phone} {
     &.policymaps,
     &.model,
+    &.policycoverage,
     &.landing {
       max-width: unset;
       padding: unset;

src/App.tsx

@@ -16,7 +16,7 @@ import { Footer } from "./components/layout";
 // views
 import Data from "./components/views/data/Data";
 import { DataPageType } from "components/views/data/types";
-import Map from "./components/views/map/Map";
+// import Map from "./components/views/map/Map";
 import About from "./components/views/about/About.js";
 import Contact from "./components/views/contact/Contact.js";
 import PolicyModel from "./components/views/PolicyModel/PolicyModel/PolicyModel";
@@ -40,6 +40,7 @@ import { AmpPage } from "types";
 import { Filters } from "components/common/MapboxMap/plugins/mapTypes";
 import { BrowserProvider } from "components/misc/Util";
 import MobileDisclaimer from "components/common/MobileDisclaimer/MobileDisclaimer";
+import PolicyCoverage from "components/views/PolicyCoverage/PolicyCoverage";
 
 //: React.FC
 const App = () => {
@@ -208,19 +209,36 @@ const App = () => {
                     />
                   }
                   {
-                    // Map page
+                    // // Map page
+                    // <Route
+                    //   exact
+                    //   path="/policymaps"
+                    //   render={() => {
+                    //     return (
+                    //       <Map
+                    //         {...{
+                    //           versions,
+                    //           setPage,
+                    //           loading,
+                    //           setLoading,
+                    //           setInfoTooltipContent,
+                    //         }}
+                    //       />
+                    //     );
+                    //   }}
+                    // />
+                  }
+                  {
+                    // policy coverage page
                     <Route
                       exact
-                      path="/policymaps"
+                      path="/policycoverage"
                       render={() => {
                         return (
-                          <Map
+                          <PolicyCoverage
                             {...{
-                              versions,
                               setPage,
-                              loading,
                               setLoading,
-                              setInfoTooltipContent,
                             }}
                           />
                         );
@@ -311,7 +329,9 @@ const App = () => {
             </Switch>
             {!pageIsResponsive && <MobileDisclaimer />}
             {(!pageIsResponsive ||
-              (page !== "policymaps" && page !== "landing")) && (
+              (page !== "policymaps" &&
+                page !== "landing" &&
+                page !== "policycoverage")) && (
               <Footer {...{ page, versions }} />
             )}
             {

src/api/queryTypes.tsx

@@ -111,7 +111,7 @@ export type VersionRecord = {
   /**
    * Last of map types for which the data are applicable.
    */
-  map_types: (MapId | "all")[];
+  // map_types: (MapId | "all")[];
 };
 
 export type OptionSetRecord = {