vector tile experiment

.env.development

@@ -1,4 +1,4 @@
-REACT_APP_DAS_HOST='https://root.dev.pamdas.org'
+REACT_APP_DAS_HOST='https://joshua-vt-experiment.dev.pamdas.org'
 REACT_APP_GA4_TRACKING_ID=G-1MVMZ0CMWF
 REACT_APP_MOCK_EVENTS_API=false
 REACT_APP_MOCK_EVENTTYPES_V2_API=false

.eslintrc

@@ -3,10 +3,7 @@
     "browser": true,
     "es6": true
   },
-  "extends": [
-    "react-app",
-    "plugin:react/recommended"
-  ],
+  "extends": "react-app",
   "parserOptions": {
     "babelOptions": {
       "presets": [
@@ -102,6 +99,7 @@
     "io": true
   },
   "root": true,
+  "ignorePatterns": ["build/**", "node_modules/**"],
   "overrides": [
     {
       "files": [

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:22-alpine
+FROM node:23-alpine
 WORKDIR /app
 
 RUN apk add --no-cache git alpine-sdk python3

Dockerfile.mt

@@ -1,4 +1,4 @@
-FROM node:22-alpine as build
+FROM node:22-alpine AS build
 WORKDIR /app
 
 RUN apk add --no-cache git alpine-sdk python3

docker-compose.yml

@@ -7,24 +7,26 @@ services:
       - /app/node_modules
       - .:/app
     restart: on-failure
+    ports:
+    - '3001:3000'
   # mock_api:
   #   build:
   #     context: ./mock-api
   #     dockerfile: Dockerfile.dev
   #   volumes:
   #     - /app/node_modules
   #     - ./mock-api:/app
-  web_test:
-    build:
-      context: .
-      dockerfile: Dockerfile.dev
-    volumes:
-      - /app/node_modules
-      - .:/app
-    # environment:
-    #   - CI=true
-    command: yarn test
-    restart: on-failure
+  # web_test:
+  #   build:
+  #     context: .
+  #     dockerfile: Dockerfile.dev
+  #   volumes:
+  #     - /app/node_modules
+  #     - .:/app
+  #   # environment:
+  #   #   - CI=true
+  #   command: yarn test
+  #   restart: on-failure
   nginx:
     build:
       context: ./nginx

package.json

@@ -116,8 +116,7 @@
     "test": "node react-scripts/test.js",
     "lint": "CI=true eslint src",
     "stylelint": "node ./node_modules/stylelint/bin/stylelint.js ./src/**/*.scss",
-    "test-ci": "CI=true node react-scripts/test.js --silent --detectOpenHandles --forceExit",
-    "postinstall": "sh setUpLocalGitConfig.sh"
+    "test-ci": "CI=true node react-scripts/test.js --silent --detectOpenHandles --forceExit"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.27.0",
@@ -177,4 +176,4 @@
       "react-app"
     ]
   }
-}
+}

react-scripts/start.js

@@ -113,8 +113,9 @@ checkBrowsers(paths.appPath, isInteractive)
       port,
     };
     const devServer = new WebpackDevServer(serverConfig, compiler);
-    // Launch WebpackDevServer.
-    devServer.startCallback(() => {
+
+
+    const onStart = () => {
       if (isInteractive) {
         clearConsole();
       }
@@ -129,19 +130,23 @@ checkBrowsers(paths.appPath, isInteractive)
 
       console.log(chalk.cyan('Starting the development server...\n'));
       openBrowser(urls.localUrlForBrowser);
-    });
+    };// Launch WebpackDevServer.
+
+
+    devServer.start()
+      .then(onStart);
 
     ['SIGINT', 'SIGTERM'].forEach(function (sig) {
       process.on(sig, function () {
-        devServer.close();
+        devServer.stop();
         process.exit();
       });
     });
 
     if (process.env.CI !== 'true') {
       // Gracefully exit when stdin ends
       process.stdin.on('end', function () {
-        devServer.close();
+        devServer.stop();
         process.exit();
       });
     }

src/EarthRangerMap/index.js

@@ -69,6 +69,7 @@ const EarthRangerMap = ({ children, controls, onMapLoaded, ...otherProps }) => {
         logoPosition: 'bottom-left',
         maxZoom: MAX_ZOOM,
         minZoom: MIN_ZOOM,
+        maxPitch: 65,
         style: REACT_APP_BASE_MAP_STYLES,
         ...getStartingMapPositionValues(mapPosition),
       });
@@ -103,12 +104,12 @@ const EarthRangerMap = ({ children, controls, onMapLoaded, ...otherProps }) => {
 
         {children}
 
-        <Attribution currentBaseLayer={currentBaseLayer}  className='mapboxgl-ctrl mapboxgl-ctrl-attrib er-map' />
+        <Attribution currentBaseLayer={currentBaseLayer} className='mapboxgl-ctrl mapboxgl-ctrl-attrib er-map' />
 
         <BaseLayerRenderer />
       </>}
-    </div>
-  </MapContext.Provider>;
+    </div >
+  </MapContext.Provider >;
 };
 
 export default memo(EarthRangerMap);

src/EventGeometryLayer/index.js

@@ -1,4 +1,4 @@
-import { useContext }  from 'react';
+import { useContext } from 'react';
 import { featureCollection } from '@turf/turf';
 import { MapContext } from '../App';
 import { useSelector } from 'react-redux';
@@ -49,7 +49,7 @@ const EventGeometryLayer = ({ onClick }) => {
   const mapLocationSelection = useSelector(({ view: { mapLocationSelection } }) => mapLocationSelection);
 
   const isDrawingEventGeometry = mapLocationSelection.isPickingLocation
-    && mapLocationSelection.mode  === MAP_LOCATION_SELECTION_MODES.EVENT_GEOMETRY;
+    && mapLocationSelection.mode === MAP_LOCATION_SELECTION_MODES.EVENT_GEOMETRY;
   const currentGeometryBeingEdited = isDrawingEventGeometry ? (mapLocationSelection?.event?.id ?? '') : '';
 
   const layerConfig = {

src/EventsLayer/index.js

@@ -59,6 +59,14 @@ const SYMBOL_LAYER_FILTER = [
   ['==', ['geometry-type'], 'Point'],
 ];
 
+const eventLayerIds = [
+  EVENT_SYMBOLS,
+  `${EVENT_SYMBOLS}-labels`,
+  `${EVENT_SYMBOLS}-unclustered`,
+  `${EVENT_SYMBOLS}-unclustered-labels`,
+  EVENT_GEOMETRY_LAYER,
+];
+
 const EventsLayer = ({
   bounceEventIDs = [],
   mapImages = {},
@@ -78,17 +86,9 @@ const EventsLayer = ({
 
   const [animationState, setAnimationState] = useState({ frame: 1, scale: 0.0, isRendering: false });
   const [bounceIDs, setBounceIDs] = useState([]);
-  const [eventLayerIds, setEventLayerIds] = useState([]);
   const [eventsWithBounce, setEventsWithBounce] = useState(featureCollection([]));
   const [mapEventFeatures, setMapEventFeatures] = useState(featureCollection([]));
 
-  const onLayerInit = useCallback(() => setEventLayerIds([
-    EVENT_SYMBOLS,
-    `${EVENT_SYMBOLS}-labels`,
-    `${EVENT_SYMBOLS}-unclustered`,
-    `${EVENT_SYMBOLS}-unclustered-labels`,
-    EVENT_GEOMETRY_LAYER,
-  ]), []);
 
   const onEventSymbolClick = useMemo(() =>
     withMultiLayerHandlerAwareness(
@@ -105,7 +105,7 @@ const EventsLayer = ({
           });
         }
       }
-    ), [eventLayerIds, map, onEventClick]);
+    ), [map, onEventClick]);
 
   const updateBounceSineAnimation = useCallback(() => {
     let currFrame = animationState.frame;
@@ -254,7 +254,6 @@ const EventsLayer = ({
         layout={eventIconLayout}
         minZoom={minZoom}
         onClick={onEventSymbolClick}
-        onInit={onLayerInit}
         sourceId={UNCLUSTERED_EVENTS_SOURCE}
         textLayout={eventLabelLayout}
         textPaint={EVENTS_LAYER_TEXT_PAINT}