ASA uses pmtiles for fire centres and zones

web/.env.cypress

@@ -6,3 +6,4 @@ REACT_APP_KEYCLOAK_AUTH_URL=https://keycloak-auth-url.ca
 REACT_APP_SM_LOGOUT_URL=https://sm-logout-url.ca
 REACT_APP_KEYCLOAK_REALM=8wl6x4cp
 REACT_APP_KEYCLOAK_CLIENT=wps-web
+REACT_APP_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/

web/.env.example

@@ -8,3 +8,4 @@ REACT_APP_KEYCLOAK_CLIENT=wps-web
 REACT_APP_WF1_AUTH_URL=https://wf1/auth
 REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL=http://localhost:3000
 REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL=http://localhost:3000
+REACT_APP_PMTILES_BUCKET=https://My_S3_Bucket

web/craco.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  webpack: {
+    configure: {
+      module: {
+        rules: [
+          {
+            test: /\.m?js$/,
+            resolve: {
+              fullySpecified: false
+            }
+          }
+        ]
+      }
+    }
+  }
+}

web/package.json

@@ -45,6 +45,7 @@
     "luxon": "^3.0.2",
     "match-sorter": "^6.3.1",
     "ol": "^7.0.0",
+    "ol-pmtiles": "^0.1.0",
     "plotly.js": "^2.5.1",
     "prettier": "^2.4.1",
     "react": "^17.0.2",
@@ -56,10 +57,10 @@
     "typescript": "^5.0.0"
   },
   "scripts": {
-    "start": "CI=true react-scripts start",
-    "start:cypress": "export $(cat .env.cypress | xargs) && react-scripts --max_old_space_size=4096 -r @cypress/instrument-cra start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts --max_old_space_size=2048 build",
-    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!ol)/\"",
+    "start": "CI=true craco start",
+    "start:cypress": "export $(cat .env.cypress | xargs) && craco --max_old_space_size=4096 -r @cypress/instrument-cra start",
+    "build": "GENERATE_SOURCEMAP=false craco --max_old_space_size=2048 build",
+    "test": "craco test --transformIgnorePatterns \"node_modules/(?!ol)/\"",
     "test:ci": "CI=true npm test",
     "coverage": "npm test -- --coverage --watchAll=false",
     "coverage:ci": "CI=true REACT_APP_KEYCLOAK_CLIENT=wps-web npm test -- --coverage --watchAll=false",
@@ -86,6 +87,7 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^7.1.0",
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/instrument-cra": "^1.4.0",
     "@testing-library/jest-dom": "^5.14.1",
@@ -94,7 +96,7 @@
     "@types/jest": "^29.0.0",
     "@types/recharts": "^1.8.23",
     "cypress": "^12.0.0",
-    "eslint": "^8.12.0",
+    "eslint": "8.12.0",
     "eslint-plugin-react-hooks": "^4.4.0",
     "react-scripts": "^5.0.1",
     "start-server-and-test": "^2.0.0",
@@ -117,4 +119,4 @@
       "src/app/store.ts"
     ]
   }
-}
+}

web/public/config.js

@@ -15,5 +15,6 @@ const config = {
   API_BASE_URL: 'http://localhost:8080/api',
   RASTER_SERVER_BASE_URL: 'https://wps-dev-raster-tileserver.apps.silver.devops.gov.bc.ca/v0.0.1',
   REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL: 'http://localhost:3000',
-  REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL: 'http://localhost:3000'
+  REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL: 'http://localhost:3000',
+  REACT_APP_PMTILES_BUCKET: 'https://My_S3_Bucket'
 }

web/src/features/fba/components/map/FBAMap.tsx

@@ -1,4 +1,7 @@
 import * as ol from 'ol'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import * as olpmtiles from 'ol-pmtiles'
 import { defaults as defaultControls, FullScreen } from 'ol/control'
 import { fromLonLat } from 'ol/proj'
 import OLVectorLayer from 'ol/layer/Vector'
@@ -27,7 +30,7 @@ import {
 import { CENTER_OF_BC } from 'utils/constants'
 import { DateTime } from 'luxon'
 import { LayerControl } from 'features/fba/components/map/layerControl'
-import { RASTER_SERVER_BASE_URL } from 'utils/env'
+import { PMTILES_BUCKET, RASTER_SERVER_BASE_URL } from 'utils/env'
 import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage'
 import { buildHFICql } from 'features/fba/cqlBuilder'
 import { isUndefined, cloneDeep } from 'lodash'
@@ -89,18 +92,26 @@ const FBAMap = (props: FBAMapProps) => {
   const [map, setMap] = useState<ol.Map | null>(null)
   const mapRef = useRef<HTMLDivElement | null>(null)
 
-  const fireZoneVectorSource = new VectorTileSource({
-    attributions: ['BC Wildfire Service'],
-    format: new MVT(),
-    url: `${TILE_SERVER_URL}/public.fire_zones/{z}/{x}/{y}.pbf`
+  const fireCentreVectorSource = new olpmtiles.PMTilesVectorSource({
+    url: `${PMTILES_BUCKET}fireCentres.pmtiles`
   })
-  const fireZoneLabelVectorSource = new VectorTileSource({
-    attributions: ['BC Wildfire Service'],
-    format: new MVT(),
-    url: `${TILE_SERVER_URL}/public.fire_zones_labels/{z}/{x}/{y}.pbf`
+  const fireZoneVectorSource = new olpmtiles.PMTilesVectorSource({
+    url: `${PMTILES_BUCKET}fireZones.pmtiles`
+  })
+  const fireCentreLabelVectorSource = new olpmtiles.PMTilesVectorSource({
+    url: `${PMTILES_BUCKET}fireCentreLabels.pmtiles`
+  })
+  const fireZoneLabelVectorSource = new olpmtiles.PMTilesVectorSource({
+    url: `${PMTILES_BUCKET}fireZoneLabels.pmtiles`
   })
-  const [hfiTilesLoading, setHFITilesLoading] = useState(false)
 
+  const [fireCentreVTL] = useState(
+    new VectorTileLayer({
+      source: fireCentreVectorSource,
+      style: fireCentreStyler,
+      zIndex: 50
+    })
+  )
   const [fireZoneVTL] = useState(
     new VectorTileLayer({
       source: fireZoneVectorSource,
@@ -109,28 +120,29 @@ const FBAMap = (props: FBAMapProps) => {
       properties: { name: 'fireZoneVector' }
     })
   )
-
+  // Seperate layer for polygons and for labels, to avoid duplicate labels.
+  const [fireCentreLabelVTL] = useState(
+    new VectorTileLayer({
+      source: fireCentreLabelVectorSource,
+      style: fireCentreLabelStyler,
+      zIndex: 100,
+      maxZoom: 6
+    })
+  )
   // Seperate layer for polygons and for labels, to avoid duplicate labels.
   const [fireZoneLabelVTL] = useState(
     new VectorTileLayer({
+      declutter: true,
       source: fireZoneLabelVectorSource,
       style: fireZoneLabelStyler(props.selectedFireZone),
       zIndex: 99,
       minZoom: 6
     })
   )
+  const [hfiTilesLoading, setHFITilesLoading] = useState(false)
 
   useEffect(() => {
     if (map) {
-      const layer = map
-        .getLayers()
-        .getArray()
-        .find(l => l.getProperties()?.name === 'fireZoneVector')
-      if (layer) {
-        map.removeLayer(layer)
-      }
-      map.addLayer(fireZoneVTL)
-      map.addLayer(fireZoneLabelVTL)
       map.on('click', event => {
         fireZoneVTL.getFeatures(event.pixel).then(features => {
           if (!features.length) {
@@ -146,39 +158,17 @@ const FBAMap = (props: FBAMapProps) => {
             map.getView().fit(zoneExtent)
           }
           const fireZone: FireZone = {
-            mof_fire_zone_id: feature.get('mof_fire_zone_id'),
-            mof_fire_zone_name: feature.get('mof_fire_zone_name'),
-            mof_fire_centre_name: feature.get('mof_fire_centre_name'),
-            area_sqm: feature.get('feature_area_sqm')
+            mof_fire_zone_id: feature.get('MOF_FIRE_ZONE_ID'),
+            mof_fire_zone_name: feature.get('MOF_FIRE_ZONE_NAME'),
+            mof_fire_centre_name: feature.get('MOF_FIRE_CENTRE_NAME'),
+            area_sqm: feature.get('FEATURE_AREA_SQM')
           }
           props.setSelectedFireZone(fireZone)
         })
       })
     }
   }, [map]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const fireCentreVTL = new VectorTileLayer({
-    source: new VectorTileSource({
-      attributions: ['BC Wildfire Service'],
-      format: new MVT(),
-      url: `${TILE_SERVER_URL}/public.fire_centres/{z}/{x}/{y}.pbf`
-    }),
-    style: fireCentreStyler,
-    zIndex: 50
-  })
-
-  // Seperate layer for polygons and for labels, to avoid duplicate labels.
-  const fireCentreLabelVTL = new VectorTileLayer({
-    source: new VectorTileSource({
-      attributions: ['BC Wildfire Service'],
-      format: new MVT(),
-      url: `${TILE_SERVER_URL}/public.fire_centres_labels/{z}/{x}/{y}.pbf`
-    }),
-    style: fireCentreLabelStyler,
-    zIndex: 100,
-    maxZoom: 6
-  })
-
   useEffect(() => {
     if (!map) return
 
@@ -269,7 +259,9 @@ const FBAMap = (props: FBAMapProps) => {
           source: baseMapSource
         }),
         fireCentreVTL,
-        fireCentreLabelVTL
+        fireZoneVTL,
+        fireCentreLabelVTL,
+        fireZoneLabelVTL
       ],
       overlays: [],
       controls: defaultControls().extend([

web/src/features/fba/components/map/featureStylers.ts

@@ -43,7 +43,7 @@ export const fireZoneStyler = (
   selectedFireZone: FireZone | undefined
 ) => {
   const a = (feature: RenderFeature | ol.Feature<Geometry>): Style => {
-    const mof_fire_zone_id = feature.get('mof_fire_zone_id')
+    const mof_fire_zone_id = feature.get('MOF_FIRE_ZONE_ID')
     const fireZoneAreaByThreshold = fireZoneAreas.filter(f => f.mof_fire_zone_id === mof_fire_zone_id)
     const selected =
       selectedFireZone?.mof_fire_zone_id && selectedFireZone.mof_fire_zone_id === mof_fire_zone_id ? true : false

web/src/types/window.d.ts

@@ -10,6 +10,7 @@ interface Window {
     RASTER_SERVER_BASE_URL: string | undefined
     REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL: string
     REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL: string
+    REACT_APP_PMTILES_BUCKET: string
   }
   Cypress: {} | undefined
 }

web/src/utils/env.ts

@@ -9,7 +9,8 @@ let ENV = {
   WF1_AUTH_URL: process.env.REACT_APP_WF1_AUTH_URL as string,
   TEST_AUTH: process.env.TEST_AUTH,
   MS_TEAMS_SPRINT_REVIEW_URL: process.env.REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL as string,
-  MIRO_SPRINT_REVIEW_BOARD_URL: process.env.REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL as string
+  MIRO_SPRINT_REVIEW_BOARD_URL: process.env.REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL as string,
+  PMTILES_BUCKET: process.env.REACT_APP_PMTILES_BUCKET as string
 }
 
 // If the app is built using 'npm run build'
@@ -27,7 +28,8 @@ if (process.env.NODE_ENV === 'production') {
     WF1_AUTH_URL: window.env.REACT_APP_WF1_AUTH_URL,
     TEST_AUTH: undefined,
     MS_TEAMS_SPRINT_REVIEW_URL: window.env.REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL,
-    MIRO_SPRINT_REVIEW_BOARD_URL: window.env.REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL
+    MIRO_SPRINT_REVIEW_BOARD_URL: window.env.REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL,
+    PMTILES_BUCKET: window.env.REACT_APP_PMTILES_BUCKET
   }
 }
 
@@ -42,5 +44,6 @@ export const {
   SM_LOGOUT_URL,
   MS_TEAMS_SPRINT_REVIEW_URL,
   MIRO_SPRINT_REVIEW_BOARD_URL,
-  WF1_AUTH_URL
+  WF1_AUTH_URL,
+  PMTILES_BUCKET
 } = ENV