diff --git a/package-lock.json b/package-lock.json index 2832bfdf..6ae80cf5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,10 @@ "@arcgis/core": "^4.30.9", "@heroicons/react": "^2.1.5", "@ugrc/layer-selector": "^6.2.7", - "@ugrc/utah-design-system": "^1.2.0", + "@ugrc/utah-design-system": "^1.2.1", "firebase": "^10.12.4", "ky": "^1.5.0", + "lodash.startcase": "^4.4.0", "react": "^18.3.1", "react-aria": "^3.34.1", "react-aria-components": "^1.3.1", @@ -3709,9 +3710,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "22.0.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.0.1.tgz", - "integrity": "sha512-RVKWL+s4ax6syie/ev3FXFIs38mke4ZsCDPBcLF2Gu6MbQXKe9Fo9iU0EPUxDB1mDVvC0vCgkV3lKa2f6xIuHg==", + "version": "22.0.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.0.2.tgz", + "integrity": "sha512-yPL6DyFwY5PiMVEwymNeqUTKsDczQBJ/5T7W/46RwLU/VH+AA8aT5TZkvBviLKLbbm0hlfftEkGrNzfRk/fofQ==", "dependencies": { "undici-types": "~6.11.1" } @@ -3746,9 +3747,9 @@ "dev": true }, "node_modules/@ugrc/utah-design-system": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@ugrc/utah-design-system/-/utah-design-system-1.2.0.tgz", - "integrity": "sha512-Ov4PH04iW7z8j/nAWlqGzJpZOPIhVq3UUK8ruxMJGgmbmahE5s0X9YXcaCWRPmENB1tEFsWnrGMuJHAcBof0eA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@ugrc/utah-design-system/-/utah-design-system-1.2.1.tgz", + "integrity": "sha512-l01tcaVd81IL8zu06tbgqgvSqD8LFfjiv4rSkILqjCW7YiBwVpeX+xiYlTesr4XS4fnQWoTBnggSHmSSFhe/Mw==", "dependencies": { "@arcgis/core": "^4.30.9", "@heroicons/react": "^2.1.5", @@ -7341,6 +7342,11 @@ "dev": true, "peer": true }, + "node_modules/lodash.startcase": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.startcase/-/lodash.startcase-4.4.0.tgz", + "integrity": "sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==" + }, "node_modules/long": { "version": "5.2.3", "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz", diff --git a/package.json b/package.json index 4313a5c7..9d393e4d 100644 --- a/package.json +++ b/package.json @@ -76,9 +76,10 @@ "@arcgis/core": "^4.30.9", "@heroicons/react": "^2.1.5", "@ugrc/layer-selector": "^6.2.7", - "@ugrc/utah-design-system": "^1.2.0", + "@ugrc/utah-design-system": "^1.2.1", "firebase": "^10.12.4", "ky": "^1.5.0", + "lodash.startcase": "^4.4.0", "react": "^18.3.1", "react-aria": "^3.34.1", "react-aria-components": "^1.3.1", diff --git a/src/App.jsx b/src/App.jsx index 1473284c..29a67d0a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,13 +12,14 @@ import { masqueradeProvider, } from '@ugrc/utah-design-system'; import PropTypes from 'prop-types'; -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useOverlayTrigger } from 'react-aria'; import { ErrorBoundary } from 'react-error-boundary'; import { useOverlayTriggerState } from 'react-stately'; import { MapContainer, Tip } from './components'; import { useAnalytics, useFirebaseApp } from './components/contexts'; import { useMap } from './components/hooks'; +import { IdentifyInformation } from './components/Identify'; import config from './config'; const apiKey = import.meta.env.VITE_WEB_API; @@ -58,6 +59,8 @@ const wkid = 26912; export default function App() { const app = useFirebaseApp(); const logEvent = useAnalytics(); + const { zoom, placeGraphic } = useMap(); + const [initialIdentifyLocation, setInitialIdentifyLocation] = useState(); const sideBarState = useOverlayTriggerState({ defaultOpen: true }); const sideBarTriggerProps = useOverlayTrigger( { @@ -74,8 +77,6 @@ export default function App() { trayState, ); - const { zoom, placeGraphic } = useMap(); - // initialize firebase performance metrics useEffect(() => { async function initPerformance() { @@ -135,7 +136,7 @@ export default function App() { const onClick = useCallback( (event) => { - console.log('map click', event.mapPoint); + setInitialIdentifyLocation(event.mapPoint); trayState.open(true); }, [trayState], @@ -178,7 +179,7 @@ export default function App() {
- + -
+

What's there?

-

- First, explore the map to find your desired location. Then, click on it to reveal additional details - about the area. -

+
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx new file mode 100644 index 00000000..4ed3983f --- /dev/null +++ b/src/components/ExternalLink.tsx @@ -0,0 +1,29 @@ +import { ReactNode } from 'react'; + +export const ExternalLink = ({ href, children }: { href: URL; children: ReactNode }) => ( + + {children} + + opens in a new window + +); diff --git a/src/components/Identify.jsx b/src/components/Identify.jsx index 870db81d..9174d540 100644 --- a/src/components/Identify.jsx +++ b/src/components/Identify.jsx @@ -1,12 +1,12 @@ -import PropTypes from 'prop-types'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; - import { isLoaded, load, project } from '@arcgis/core/geometry/projection'; - -import { toQueryString } from '@ugrc/utilities/src'; - +import { Label } from '@ugrc/utah-design-system'; +import { toQueryString } from '@ugrc/utilities'; import ky from 'ky'; -import './Identify.css'; +import startCase from 'lodash.startcase'; +import PropTypes from 'prop-types'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { Text } from 'react-aria-components'; +import { ExternalLink } from './ExternalLink'; const featureClassNames = { counties: 'boundaries.county_boundaries', @@ -50,7 +50,7 @@ const projectPoint = async (mapPoint, srid) => { return project(mapPoint, { wkid: srid }); }; -const IdentifyInformation = ({ apiKey, wkid = 3857, location }) => { +export const IdentifyInformation = ({ apiKey, wkid = 3857, location }) => { const [spatial, setSpatial] = useState({ x: 0, y: 0, @@ -296,92 +296,136 @@ const IdentifyInformation = ({ apiKey, wkid = 3857, location }) => { return () => controller.current?.abort(); }, [location, get, requests]); + if (!location) { + return ( +

+ First, explore the map to find your desired location. Then, click on it to reveal additional details about the + area. +

+ ); + } + return ( - -
-

What's here?

-
-
-
- Approximate Street Address -

- {address} - +

+
+ + + {address} + Google Street View - -

+ + + + Provided by{' '} + roads +
-
- City -

{city}

+
+ + {city} + + Provided by{' '} + + municipal boundaries + +
-
- Zip Code -

{zip}

+
+ + {zip} + + Provided by{' '} + zip code areas +
-
- County -

{county}

+
+ + {startCase(county.toLowerCase())} + + Provided by{' '} + county boundaries +
-
- UTM 12 NAD83 Coordinates -

- {spatial.x}, {spatial.y} meters -

+
+ + + {spatial.x}, {spatial.y} m +
-
- WGS84 Coordinates -

+

+ + {spatial.lat}, {spatial.lon} -

-
-
- Elevation Meters -

{elevation.meters}

+
-
- Elevation Feet -

{elevation.feet}

+
+ + {elevation.meters} m + {elevation.feet} ft + + Provided by The National Map +
-
- Land Administration Category -

{ownership}

+
+ + {ownership} + + Provided by{' '} + land ownership +
-
- US National Grid -

{grid}

+
+ + {grid} + + Provided by the{' '} + + national grid + +
-
- Imagery Flight Data -

{flightDate.date && `${flightDate.resolution} on ${flightDate.date}`}

+
+ + + {flightDate.date && `${flightDate.resolution} on ${flightDate.date}`} +
- - ); -}; - -IdentifyInformation.propTypes = { - location: PropTypes.object, -}; - -const IdentifyContainer = function ({ show, children }) { - return ( -
- - {children}
); }; -IdentifyContainer.propTypes = { - show: PropTypes.func.isRequired, - children: PropTypes.node.isRequired, -}; - -export { IdentifyContainer, IdentifyInformation }; - IdentifyInformation.propTypes = { + location: PropTypes.object, apiKey: PropTypes.string.isRequired, wkid: PropTypes.number, };