Merge pull request #68 from CUAHSI/update-huc-services

Update toggleHucsAsync function to new service
CUAHSI · Mar 24, 2024 · 5fa242a · 5fa242a
2 parents 3984501 + 19c9ee1
commit 5fa242a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 86 deletions.
diff --git a/app/env.template b/app/env.template
@@ -41,4 +41,6 @@ OAUTH2_REDIRECT_URL=https://localhost/api/auth/cuahsi/callback
 # VITE_OAUTH2_REDIRECT_URL="${VITE_APP_FULL_URL}#/auth-redirect"
 VITE_OAUTH2_REDIRECT_URL="https://localhost/#/auth-redirect"
 
-OIDC_BASE_URL=https://auth.cuahsi.org/realms/CUAHSI/protocol/openid-connect/
+OIDC_BASE_URL=https://auth.cuahsi.org/realms/CUAHSI/protocol/openid-connect/
+
+VITE_GIS_SERVICES_URL=https://arcgis.cuahsi.org/arcgis/services
diff --git a/app/frontend/docker-entrypoint.sh b/app/frontend/docker-entrypoint.sh
@@ -8,6 +8,7 @@ do
     sed -i 's|VITE_APP_API_URL_PLACEHOLDER|'${VITE_APP_API_URL}'|g' $file
     sed -i 's|VITE_APP_FULL_URL_PLACEHOLDER|'${VITE_APP_FULL_URL}'|g' $file
     sed -i 's|VITE_APP_BASE_PLACEHOLDER|'${VITE_APP_BASE}'|g' $file
+    sed -i 's|VITE_GIS_SERVICES_URL_PLACEHOLDER|'${VITE_GIS_SERVICES_URL}'|g' $file
 done
 
 exec "$@"
diff --git a/app/frontend/src/components/TheLeafletMap.vue b/app/frontend/src/components/TheLeafletMap.vue
@@ -11,6 +11,7 @@ import { onMounted, onUpdated } from 'vue'
 import { useMapStore } from '@/stores/map'
 import { useModelsStore } from '@/stores/models'
 import { useAlertStore } from '@/stores/alerts'
+import { GIS_SERVICES_URL } from '@/constants'
 
 const mapStore = useMapStore()
 const modelsStore = useModelsStore();
@@ -91,7 +92,7 @@ onMounted(() => {
     }).addTo(map);
 
     // WMS LAYER
-    let url = 'http://arcgis.cuahsi.org/arcgis/services/US_WBD/HUC_WBD/MapServer/WmsServer?'
+    let url = `${GIS_SERVICES_URL}/US_WBD/HUC_WBD/MapServer/WmsServer?`
 
     // HUC WMS Naming
     // --------------
@@ -139,7 +140,7 @@ onMounted(() => {
     }).addTo(map);
 
     // add USGS gage layer to map
-    url = 'http://arcgis.cuahsi.org/arcgis/services/NHD/usgs_gages/MapServer/WmsServer?';
+    url = `${GIS_SERVICES_URL}/NHD/usgs_gages/MapServer/WmsServer?`;
     let gages = L.tileLayer.wms(url, {
         layers: 0,
         transparent: 'true',
@@ -405,7 +406,7 @@ function resize_map() {
 // }
 
 async function getGageInfo(e) {
-
+    // TODO: this function needs to be repaired
     // TESTING GAGE INFO BOX
     // quick and dirty buffer around cursor
     // bbox = lon_min, lat_min, lon_max, lat_max
@@ -423,7 +424,7 @@ async function getGageInfo(e) {
         SrsName: 'EPSG:4326',
         outputFormat: 'ESRIGEOJSON'
     };
-    let root = 'https://arcgis.cuahsi.org/arcgis/services/NHD/usgs_gages/MapServer/WFSServer';
+    let root = `${GIS_SERVICES_URL}/NHD/usgs_gages/MapServer/WFSServer`;
     let parameters = L.Util.extend(defaultParameters);
     let gageURL = root + L.Util.getParamString(parameters);
 
@@ -499,10 +500,13 @@ async function mapClick(e) {
         service: 'WFS',
         request: 'GetFeature',
         bbox: e.latlng.lat + ',' + e.latlng.lng + ',' + e.latlng.lat + ',' + e.latlng.lng,
-        typeName: 'HUC_WBD:HUC12_US',
-        SrsName: 'EPSG:4326'
+        SrsName: 'EPSG:4269',
+        version: '2.0.0',
+        EPSG:4269,
+        typeName: 'WBDHU12',
+        outputFormat:'GEOJSON'
     };
-    let root = 'https://arcgis.cuahsi.org/arcgis/services/US_WBD/HUC_WBD/MapServer/WFSServer';
+    let root = `${GIS_SERVICES_URL}/hucs/hucs/MapServer/WFSServer`
     let parameters = L.Util.extend(defaultParameters);
     let URL = root + L.Util.getParamString(parameters);
 
@@ -570,7 +574,7 @@ function traceUpstream(usgs_gage) {
                     typeName: 'HUC_WBD:HUC12_US',
                     SrsName: 'EPSG:4326'
                 };
-                let root = 'https://arcgis.cuahsi.org/arcgis/services/US_WBD/HUC_WBD/MapServer/WFSServer';
+                let root = `${GIS_SERVICES_URL}/US_WBD/HUC_WBD/MapServer/WFSServer`;
                 let parameters = L.Util.extend(defaultParameters);
                 let URL = root + L.Util.getParamString(parameters);
 
@@ -810,7 +814,7 @@ function addFeatureByHUC(hucid) {
         SrsName: 'EPSG:4326',
         Filter: filter
     };
-    let root = 'https://arcgis.cuahsi.org/arcgis/services/US_WBD/HUC_WBD/MapServer/WFSServer';
+    let root = `${GIS_SERVICES_URL}/US_WBD/HUC_WBD/MapServer/WFSServer`;
     let parameters = L.Util.extend(defaultParameters);
     let URL = root + L.Util.getParamString(parameters);
 
@@ -824,14 +828,14 @@ async function toggleHucsAsync(url, remove_if_selected, remove) {
     // call the ArcGIS WFS asyncronously so that the webpage doesn't freeze.
     const response = await fetch(url)
     if (response.ok) {
-        const text = await response.text()
-        const data = await new window.DOMParser().parseFromString(text, "text/xml")
-        // extract the HUC ID and Boundary from the WFS XML response.
-        // only process the first element of the response since the user can only
-        // select a single map element at a time.
-
-        let clicked_hucs = parseWfsXML(data);
-
+        const data = await response.json();
+        const clicked_hucs = data.features.map((feature) => {
+            return {
+                hucid: feature.properties.HUC12,
+                geom: feature.geometry,
+                bbox: L.geoJSON(feature.geometry).getBounds(),
+            }
+        })
         for (let huc of clicked_hucs) {
             try {
                 // toggle bounding box using the following rules:
@@ -841,6 +845,7 @@ async function toggleHucsAsync(url, remove_if_selected, remove) {
                 //    add it to the table.
 
                 if (huc.hucid in Map.hucbounds) {
+                    console.info("Removing huc", huc)
                     // remove only if explicitly specified to.
                     // this is because the "ADD" dialog should never
                     // remove features, unlike the map click event.
@@ -854,6 +859,7 @@ async function toggleHucsAsync(url, remove_if_selected, remove) {
                     }
                 }
                 else {
+                    console.info("Adding huc", huc)
                     Map.selected_hucs.push(huc)
                     Map.hucbounds[huc.hucid] = huc.bbox;
                     // addHucRow(huc.hucid);
@@ -933,7 +939,7 @@ function updateMapBBox() {
     let xmax = -9999999;
     let ymax = -9999999;
     for (let key in Map.hucbounds) {
-        let bounds = Map.hucbounds[key].getBounds();
+        let bounds = Map.hucbounds[key];
         if (bounds.getWest() < xmin) {
             xmin = bounds.getWest();
         }
@@ -997,30 +1003,17 @@ function removeBbox() {
 /**
 * Toggles HUC boundaries on the map, on/off.
 * @param {string} hucID - ID of the huc to toggle
-* @param {array} ptlist - vertices of the HUC polygon
+* @param {object} geom - geometry of the huc to toggle
 */
-function togglePolygon(hucID, ptlist) {
+function togglePolygon(hucID, geom) {
 
     if (hucID in Map.huclayers) {
         // remove the polygon overlay 
         Map.huclayers[hucID].clearLayers();
         delete Map.huclayers[hucID];
     }
     else {
-        // create polygon overlay
-        let coords = [];
-        let c = 0
-        for (c = 0; c <= ptlist.length - 1; c += 2) {
-            coords.push([parseFloat(ptlist[c]),
-            parseFloat(ptlist[c + 1])
-            ]);
-        }
-        let coordinates = [coords];
-        let polygon = [{
-            "type": "Polygon",
-            "coordinates": coordinates
-        }];
-        let json_polygon = L.geoJSON(polygon, { style: { fillColor: 'blue' } });
+        let json_polygon = L.geoJSON(geom, { style: { fillColor: 'blue' } });
 
         // save the layer
         Map.huclayers[hucID] = json_polygon;
@@ -1030,57 +1023,6 @@ function togglePolygon(hucID, ptlist) {
 
 }
 
-
-/**
-* Parses XML returned from a web feature service
-* @param {object} xml - xml response from WFS service.
-* @returns {object} - ID and bounding box rectangle of the HUC polygon
-*/
-function parseWfsXML(xml) {
-    let response = [];
-    let hucs = xml.getElementsByTagName('wfs:member');
-    let llat = 100000;
-    let ulat = -100000;
-    let llon = 100000;
-    let ulon = -100000;
-    for (let hid = 0; hid < hucs.length; hid++) {
-
-        let data = hucs[hid];
-
-        // get geometry
-        let points = data.getElementsByTagName('gml:posList')[0];
-        let hucID = data.getElementsByTagName('US_WBD_HUC_WBD:HUC12')[0].innerHTML;
-        let ptlist = points.innerHTML.split(' ');
-
-        // calculate bounding box
-        for (let i = 1; i < ptlist.length; i += 2) {
-            let lat = ptlist[i];
-            if (lat > ulat) {
-                ulat = lat;
-            }
-            else if (lat < llat) {
-                llat = lat;
-            }
-        }
-        for (let i = 0; i < ptlist.length; i += 2) {
-            let lon = ptlist[i];
-            if (lon > ulon) {
-                ulon = lon;
-            }
-            else if (lon < llon) {
-                llon = lon;
-            }
-        }
-        let bounds = L.rectangle([[ulat, ulon], [llat, llon]]);
-        let r = {};
-        r['hucid'] = hucID;
-        r['bbox'] = bounds;
-        r['geom'] = ptlist;
-        response.push(r);
-    }
-    return response;
-}
-
 function update_huc_ids(huclist) {
 
     // convert huc array into csv string

diff --git a/app/frontend/src/constants.js b/app/frontend/src/constants.js
@@ -3,6 +3,8 @@ export const APP_BASE = import.meta.env.VITE_APP_BASE || "VITE_APP_BASE_PLACEHOL
 let APP_URL_IN = import.meta.env.VITE_APP_FULL_URL || "VITE_APP_FULL_URL_PLACEHOLDER";
 export const APP_URL = APP_URL_IN.endsWith("/") ? APP_URL_IN : `${APP_URL_IN}/`
 
+export const GIS_SERVICES_URL = import.meta.env.VITE_GIS_SERVICES_URL || "VITE_GIS_SERVICES_URL_PLACEHOLDER";
+
 export const API_BASE = import.meta.env.VITE_APP_API_URL || "VITE_APP_API_URL_PLACEHOLDER";
 export const ENDPOINTS = {
   openapi: `${API_BASE}/openapi.json`,