Better ui for the CRS drop down select

federal-geospatial-platform · Nov 30, 2023 · dab6b63 · dab6b63
1 parent 4516027
commit dab6b63
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 11 deletions.
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -22,8 +22,9 @@
     "feedback_title": "Send us your comments/questions",
     "feedback_text": "You want to contribute and provide feedback?<br/><br/>Contact us: <a href='mailto:geodiscoverydatadissemination-diffusiondesdonneesgeodecouverte@nrcan-rncan.gc.ca'>geodiscoverydatadissemination-diffusiondesdonneesgeodecouverte@nrcan-rncan.gc.ca</a>",
     "email_tooltip": "Enter the email on which to receive your download package link",
-    "projection_title": "EPSG Projection",
+    "projection_title": "Coordinate system",
     "projection_tooltip": "Optionally, specify an EPSG number for the extracted data",
+    "project_source": "Unspecified (coordinate system of the source)",
     "draw_tooltip": "Click to draw an extraction area on the map",
     "clear_tooltip": "Click to clear the drawing from the map",
     "extract_tooltip": "Click to start the extraction process"

diff --git a/locales/fr/translation.json b/locales/fr/translation.json
@@ -23,8 +23,9 @@
     "feedback_title": "Envoyez-nous vos commentaires/questions",
     "feedback_text": "Vous voulez contribuer et nous fournir votre rétro-action?<br/><br/>Contactez-nous: <a href='mailto:geodiscoverydatadissemination-diffusiondesdonneesgeodecouverte@nrcan-rncan.gc.ca'>geodiscoverydatadissemination-diffusiondesdonneesgeodecouverte@nrcan-rncan.gc.ca</a>",
     "email_tooltip": "Inscrivez le courriel où recevoir votre lien de téléchargement pour votre extraction",
-    "projection_title": "Projection EPSG",
+    "projection_title": "Système de coordonnées",
     "projection_tooltip": "Optionallement, spécifiez un numéro EPSG pour les données extraites",
+    "project_source": "Non spécifié (système de coordonnées de la source)",
     "draw_tooltip": "Cliquez pour dessiner une aire d'extraction sur la carte",
     "clear_tooltip": "Cliquez pour supprimer le dessin sur la carte",
     "extract_tooltip": "Cliquez pour démarrer l'extraction des données"

diff --git a/src/czs_panel.tsx b/src/czs_panel.tsx
@@ -88,6 +88,7 @@ function CZSPanel(props: CZSPanelProps): JSX.Element {
   const [isLoadingFeatures, _setIsLoadingFeatures] = useState(false);
   const [isOrderLoading, _setIsOrderLoading] = useState([]);
   // const [isExtracting, _setIsExtracting] = useState(false);
+  const [outCrs, _setOutCrs] = useState() as [number | undefined, React.Dispatch<number | undefined>];
 
   // Effect hook to add and remove event listeners
   useEffect(() => {
@@ -282,8 +283,8 @@ function CZSPanel(props: CZSPanelProps): JSX.Element {
   }
 
   function handleExtractFeatures(): void {
-    const selectOutCrs: typeof Select = document.getElementById('czs_out_crs');
-    onExtractFeatures?.(email, parseInt(selectOutCrs.innerText, 10));
+    // Callback
+    onExtractFeatures?.(email, outCrs);
   }
 
   function handleMenuMore(e: Event, coll: PyGeoAPICollectionsCollectionResponsePayload): void {
@@ -331,6 +332,10 @@ function CZSPanel(props: CZSPanelProps): JSX.Element {
     setAnchorEl(null);
   }
 
+  function handleOutCrsChanged(value: number | undefined): void {
+    _setOutCrs(value);
+  }
+
   function getParentsHasChecked(themeColl: ThemeCollections): ParentCollections[] {
     // If none checked
     if (!checkedCollections || checkedCollections.length === 0) return [];
@@ -504,9 +509,8 @@ function CZSPanel(props: CZSPanelProps): JSX.Element {
 
   // Create the menu items
   const menuItems: (typeof TypeMenuItemProps)[] = [];
-  ['<source>', ...PROJECTIONS].forEach((epsg: number | string) => {
-    const v = epsg !== '<source>' ? epsg : undefined;
-    menuItems.push({ key: epsg, item: { value: v, children: epsg } });
+  [{ label: t('czs.project_source'), value: undefined }, ...PROJECTIONS].forEach((proj: { label: string; value: number | undefined }) => {
+    menuItems.push({ key: proj.value, item: { value: proj.value, children: proj.label } });
   });
 
   // Return Panel UI
@@ -573,6 +577,9 @@ function CZSPanel(props: CZSPanelProps): JSX.Element {
           label={t('czs.projection_title')}
           tooltip={t('czs.projection_tooltip')} // GeoView Core Select component not supporting tooltips at the time of coding, but writing it still..
           tooltipPlacement="right"
+          value={outCrs}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          onChange={(e: Event) => handleOutCrsChanged((e.target as any).value)}
           menuItems={menuItems}
           fullWidth
         />

diff --git a/src/main-config-dev.js b/src/main-config-dev.js
@@ -1,4 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const PYGEOAPI_URL_ROOT = 'https://api.czs-dev.services.geo.ca';
 const QGIS_SERVICE_URL_ROOT = 'https://qgis-dev.services.geo.ca/ows/';
-const PROJECTIONS = [3857, 3978, 3979, 4269, 4326, 4617];
+const PROJECTIONS = [
+  { label: 'WGS 84 / Pseudo-Mercator (EPSG:3857)', value: 3857 },
+  { label: 'NAD83 / Canada Atlas Lambert (EPSG:3978)', value: 3978 },
+  { label: 'NAD83(CSRS) / Canada Atlas Lambert (EPSG:3979)', value: 3979 },
+  { label: 'NAD83 (EPSG:4269)', value: 4269 },
+  { label: 'WGS 84 (EPSG:4326)', value: 4326 },
+  { label: 'NAD83(CSRS) (EPSG:4617)', value: 4617 },
+];
diff --git a/src/main-config-prod.js b/src/main-config-prod.js
@@ -1,4 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const PYGEOAPI_URL_ROOT = 'https://czs-pygeoapi.ddr.services.geo.ca';
 const QGIS_SERVICE_URL_ROOT = 'https://qgis-stage.services.geo.ca/dev/';
-const PROJECTIONS = [3857, 3978, 3979, 4269, 4326, 4617];
+const PROJECTIONS = [
+  { label: 'WGS 84 / Pseudo-Mercator (EPSG:3857)', value: 3857 },
+  { label: 'NAD83 / Canada Atlas Lambert (EPSG:3978)', value: 3978 },
+  { label: 'NAD83(CSRS) / Canada Atlas Lambert (EPSG:3979)', value: 3979 },
+  { label: 'NAD83 (EPSG:4269)', value: 4269 },
+  { label: 'WGS 84 (EPSG:4326)', value: 4326 },
+  { label: 'NAD83(CSRS) (EPSG:4617)', value: 4617 },
+];
diff --git a/src/main-config-stage.js b/src/main-config-stage.js
@@ -1,4 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const PYGEOAPI_URL_ROOT = 'https://czs-pygeoapi.ddr-stage.services.geo.ca';
 const QGIS_SERVICE_URL_ROOT = 'https://qgis-stage.services.geo.ca/dev/';
-const PROJECTIONS = [3857, 3978, 3979, 4269, 4326, 4617];
+const PROJECTIONS = [
+  { label: 'WGS 84 / Pseudo-Mercator (EPSG:3857)', value: 3857 },
+  { label: 'NAD83 / Canada Atlas Lambert (EPSG:3978)', value: 3978 },
+  { label: 'NAD83(CSRS) / Canada Atlas Lambert (EPSG:3979)', value: 3979 },
+  { label: 'NAD83 (EPSG:4269)', value: 4269 },
+  { label: 'WGS 84 (EPSG:4326)', value: 4326 },
+  { label: 'NAD83(CSRS) (EPSG:4617)', value: 4617 },
+];
diff --git a/src/main-config.js b/src/main-config.js
@@ -1,4 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const PYGEOAPI_URL_ROOT = 'https://czs-pygeoapi.ddr-stage.services.geo.ca';
 const QGIS_SERVICE_URL_ROOT = 'https://qgis-stage.services.geo.ca/dev/';
-const PROJECTIONS = [3857, 3978, 3979, 4269, 4326, 4617];
+const PROJECTIONS = [
+  { label: 'WGS 84 / Pseudo-Mercator (EPSG:3857)', value: 3857 },
+  { label: 'NAD83 / Canada Atlas Lambert (EPSG:3978)', value: 3978 },
+  { label: 'NAD83(CSRS) / Canada Atlas Lambert (EPSG:3979)', value: 3979 },
+  { label: 'NAD83 (EPSG:4269)', value: 4269 },
+  { label: 'WGS 84 (EPSG:4326)', value: 4326 },
+  { label: 'NAD83(CSRS) (EPSG:4617)', value: 4617 },
+];