Performed npm install --force to get around leaflet plugin's lack of gatsby 3.0 support, (seems to work anyway); made some styling updates to start with the mapbox map

justice40-frontend/gatsby-config.js

@@ -2,17 +2,15 @@ module.exports = {
   siteMetadata: {
     author: 'Shelby Switzer',
     title: `Justice40 Climate and Environment Justice Screening Tool`,
+    siteUrl: 'localhost:8000',
     description: `Front end for Justice40 mappping tool project`,
     navigation: [
       {
-        items: [{ text: 'Home', link: '/' }],
+        items: [{ text: 'Mapbox', link: '/mapbox' }],
       },
       {
         items: [{ text: 'Leaflet', link: '/leaflet' }],
       },
-      {
-        items: [{ text: 'Mapbox', link: '/mapbox' }],
-      },
       {
         items: [{ text: 'OpenLayers', link: '/openlayers' }],
       },
@@ -46,7 +44,6 @@ module.exports = {
   },
   pathPrefix: process.env.BASEURL || '/',
   plugins: [
-    "gatsby-plugin-netlify-cms",
     "gatsby-plugin-sass",
     "gatsby-plugin-image",
     "gatsby-plugin-react-helmet",

justice40-frontend/package.json

@@ -22,7 +22,6 @@
     "gatsby-plugin-image": "^1.3.0",
     "gatsby-plugin-manifest": "^3.3.0",
     "gatsby-plugin-mdx": "^2.3.0",
-    "gatsby-plugin-netlify-cms": "^5.3.0",
     "gatsby-plugin-react-helmet": "^4.3.0",
     "gatsby-plugin-react-leaflet": "^3.0.0",
     "gatsby-plugin-sass": "^4.3.0",
@@ -33,7 +32,6 @@
     "gatsby-transformer-sharp": "^3.3.0",
     "leaflet": "^1.7.1",
     "mapbox-gl": "^2.2.0",
-    "netlify-cms-app": "^2.14.45",
     "ol": "^6.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

justice40-frontend/src/pages/leaflet.js

@@ -8,7 +8,7 @@ const LeafletMap = () => {
         <MapContainer
             center={[39.0458, -76.6413]}
             zoom={8}
-            style={{ height: "400px" }}
+            style={{ height: "50vh" }}
         >
             <TileLayer
             attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

justice40-frontend/src/pages/mapbox.js

@@ -36,6 +36,7 @@ const layerStyle = {
 
 const mapStyle = {
   'version': 8,
+  'cursor': 'pointer',
   'sources': {
     'carto-light': {
       'type': 'raster',

justice40-frontend/src/pages/mapbox.module.css

@@ -1,6 +1,9 @@
 .mapContainer {
-  height: 400px;
+  height: 50vh;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
 }
 
 .tooltip {

justice40-frontend/src/styles/index.scss

@@ -15,7 +15,7 @@ $theme-font-path: "../../node_modules/uswds/src/fonts";
 
 #ol-map {
   min-width: 600px;
-  min-height: 500px;
+  min-height: 50vh;
   height: 500px;
   width: 100%;
 }