Updated web client to include pg_tilserv vector tiles on the visualiz…

…ations page - test to see that I can thread geometry through the server to the client (#12)

.github/workflows/deploy_somisana.ac.za.yml

@@ -52,6 +52,7 @@ jobs:
             DEPLOYMENT_ENV=production
             TZ=utc
             [email protected]
+            TILESERV_BASE_URL=https://maps.somisana.ac.za
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.github/workflows/deploy_somisana.dvn.yml

@@ -52,6 +52,7 @@ jobs:
             DEPLOYMENT_ENV=development
             TZ=utc
             [email protected]
+            TILESERV_BASE_URL=https://maps.somisana.dvn
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

web/Dockerfile

@@ -14,6 +14,7 @@ ARG MONGO_USERNAME
 ARG NODE_ENV
 ARG NODE_LOADER_CONFIG=loaders/config.js
 ARG TECHNICAL_CONTACT
+ARG TILESERV_BASE_URL
 ARG TZ
 
 ##############
@@ -43,6 +44,7 @@ RUN echo "API=${API}" > .env
 RUN echo "NODE_ENV=${NODE_ENV}" >> .env
 RUN echo "TECHNICAL_CONTACT=${TECHNICAL_CONTACT}" >> .env
 RUN echo "DEPLOYMENT_ENV=${DEPLOYMENT_ENV}" >> .env
+RUN echo "TILESERV_BASE_URL=${TILESERV_BASE_URL}" >> .env
 
 # Install deps
 RUN npm install -g chomp \

web/client/modules/config/env/index.js

@@ -1,5 +1,6 @@
-export const NODE_ENV = process.env.NODE_ENV || 'development'
-export const API = process.env.API || 'http://localhost:3000'
+export const NODE_ENV = process.env.NODE_ENV
+export const API = process.env.API
+export const TILESERV_BASE_URL = process.env.TILESERV_BASE_URL
 export const ORIGIN = API
 export const API_HTTP = `${API}/http`
 export const API_GQL = `${API}/graphql`

web/client/pages/atlas/map/_attribution.tsx

@@ -1,8 +1,7 @@
 import Typography from '@mui/material/Typography'
-import Link from '@mui/material/Link'
 import { alpha } from '@mui/system/colorManipulator'
 
-export default () => {
+export default ({ children }) => {
   return (
     <Typography
       variant="caption"
@@ -16,15 +15,7 @@ export default () => {
         zIndex: 1,
       }}
     >
-      ©{' '}
-      <Link
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://www.openstreetmap.org/copyright"
-      >
-        OpenStreetMap
-      </Link>{' '}
-      contributors
+      {children}
     </Typography>
   )
 }

web/client/pages/atlas/map/_maplibre.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useContext } from 'react'
+import { ctx as configContext } from '../../../modules/config'
+import Div from '../../../components/div'
+import useTheme from '@mui/material/styles/useTheme'
+import maplibre from 'maplibre-gl'
+
+export default ({ Attribution }) => {
+  const { TILESERV_BASE_URL } = useContext(configContext)
+  const theme = useTheme()
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const map = new maplibre.Map({
+      container: ref.current,
+      style: 'https://api.maptiler.com/maps/voyager/style.json?key=Ahq5ZorUyvbxSA7shjIP',
+      center: [25, -31],
+      zoom: 5.5,
+    })
+
+    map.on('load', () => {
+      map.addSource('coordinates', {
+        type: 'vector',
+        tiles: [`${TILESERV_BASE_URL}/public.coordinates/{z}/{x}/{y}.pbf`],
+        url: `${TILESERV_BASE_URL}/public.coordinates.json`,
+      })
+
+      map.addLayer({
+        id: 'points',
+        type: 'circle',
+        source: 'coordinates',
+        'source-layer': 'public.coordinates',
+        paint: {
+          'circle-color': theme.palette.primary.dark,
+          'circle-opacity': 0.9,
+          'circle-radius': 2,
+        },
+      })
+    })
+  }, [])
+
+  return (
+    <Div
+      ref={ref}
+      sx={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+      }}
+    >
+      <Attribution />
+    </Div>
+  )
+}

web/client/pages/atlas/map/index.tsx

@@ -1,8 +1,32 @@
-import Ol from './_ol'
-import OSM from './layers/open-street-maps'
-// import TerrestrisBaseMap from './layers/terrestris-base-map'
+import { useState, useEffect } from 'react'
+import MapLibre from './_maplibre'
 import Attribution from './_attribution'
+import Link from '@mui/material/Link'
 
 export default () => {
-  return <Ol Attribution={Attribution} layers={[OSM()]} />
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  if (isClient) {
+    return (
+      <MapLibre
+        Attribution={() => (
+          <Attribution>
+            <Link href="https://carto.com/" target="_blank">
+              &copy; CARTO
+            </Link>{' '}
+            <Link href="https://www.maptiler.com/copyright/" target="_blank">
+              &copy; MapTiler
+            </Link>{' '}
+            <Link href="https://www.openstreetmap.org/copyright" target="_blank">
+              &copy; OpenStreetMap contributors
+            </Link>
+          </Attribution>
+        )}
+      />
+    )
+  }
 }