partial addition for next compliant orcamap

.gitignore

@@ -19,6 +19,7 @@
 .env.test.local
 .env.production.local
 .env
+.next
 
 npm-debug.log*
 yarn-debug.log*

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,2 @@
+const withImages = require('next-images')
+module.exports = withImages()

package.json

@@ -16,6 +16,7 @@
     "google-spreadsheet": "^3.1.15",
     "mapbox-gl": "^1.13.0",
     "next": "^10.0.9",
+    "next-images": "^1.7.0",
     "ol": "^6.5.0",
     "rbush": "^3.0.1",
     "react": "^17.0.1",

src/components/MapContainer/Layers/VectorLayer.tsx

@@ -4,7 +4,9 @@ import OLVectorLayer from 'ol/layer/Vector'
 import { vector } from '../Source'
 import GeoJSON from 'ol/format/GeoJSON'
 import { get } from 'ol/proj'
-import hydropin from './hydropin.png'
+import hydropin from '../../../../public/hydropin.png'
+
+// import hydropin from `%PUBLIC_URL%/hydropin.png`
 
 // note: both the VectorLayer styleOptions object
 // and the 'source' from line 33 will need to be hoisted

src/components/MapContainer/Map/Map.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react'
-import './Map.css'
+import './Map.module.css'
 import MapContext from './MapContext'
 import * as ol from 'ol'
 

src/config.js

@@ -1,4 +1,4 @@
-const envKey = process.env['REACT_APP_GOOGLE_SHEETS_KEY'] || ''
+const envKey = process.env['NEXT_PUBLIC_GOOGLE_SHEETS_KEY'] || ''
 
 export default {
   apiKey: envKey,

src/pages/_app.tsx

@@ -0,0 +1,23 @@
+// import App from 'next/app'
+
+function MyApp({ Component, pageProps }) {
+    return (
+        <Component {...pageProps} />
+      )
+    // return <Component {...pageProps} />
+  }
+
+  // Only uncomment this method if you have blocking data requirements for
+  // every single page in your application. This disables the ability to
+  // perform automatic static optimization, causing every page in your app to
+  // be server-side rendered.
+  //
+  // MyApp.getInitialProps = async (appContext) => {
+  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
+  //   const appProps = await App.getInitialProps(appContext);
+  //
+  //   return { ...appProps }
+  // }
+
+  export default MyApp
+

src/pages/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import MapContainer from '../components/MapContainer/MapContainer'
+
+const App: React.FC = () => {
+  return (
+    <div className="App">
+      <h1 style={{ textAlign: 'center' }}> (test OL) Orca Map</h1>
+      <MapContainer />
+    </div>
+  )
+}
+
+export default App

tsconfig.json

@@ -18,9 +18,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }