publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 10:04:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

removing lat/long, changing wording

Browse source
This commit is contained in:
Nat Hillard 2021-06-18 12:12:34 -04:00
parent e838ddfb01
commit 531be3a362
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
client/src/components/map.tsx
View file

@ -15,8 +15,8 @@ import MVT from 'ol/format/MVT.js';
import {Fill, Style} from 'ol/style.js'; import {Fill, Style} from 'ol/style.js';
import XYZ from 'ol/source/XYZ'; import XYZ from 'ol/source/XYZ';
import * as d3 from 'd3'; import * as d3 from 'd3';
import {transform} from 'ol/proj'; // import {transform} from 'ol/proj';
import {toStringXY} from 'ol/coordinate'; // import {toStringXY} from 'ol/coordinate';
import Overlay from 'ol/Overlay'; import Overlay from 'ol/Overlay';
@ -32,7 +32,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
const [featuresLayer, setFeaturesLayer] = useState<VectorLayer>(); const [featuresLayer, setFeaturesLayer] = useState<VectorLayer>();
const [selectedFeature, setSelectedFeature] = useState<Feature>(); const [selectedFeature, setSelectedFeature] = useState<Feature>();
const [hoveredFeature, setHoveredFeature] = useState<Feature>(); const [hoveredFeature, setHoveredFeature] = useState<Feature>();
const [selectedCoord, setSelectedCoord] = useState(); // const [selectedCoord, setSelectedCoord] = useState();
const mapElement = useRef() as const mapElement = useRef() as
React.MutableRefObject<HTMLInputElement>; React.MutableRefObject<HTMLInputElement>;
@ -156,10 +156,10 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
const clickedCoord = mapRef.current.getCoordinateFromPixel(event.pixel); const clickedCoord = mapRef.current.getCoordinateFromPixel(event.pixel);
// transform coord to EPSG 4326 standard Lat Long // transform coord to EPSG 4326 standard Lat Long
const transformedCoord = transform(clickedCoord, 'EPSG:3857', 'EPSG:4326'); // const transformedCoord = transform(clickedCoord, 'EPSG:3857', 'EPSG:4326');
// set React state // set React state
setSelectedCoord( transformedCoord ); // setSelectedCoord( transformedCoord );
mapRef.current.forEachFeatureAtPixel(event.pixel, (feature) => { mapRef.current.forEachFeatureAtPixel(event.pixel, (feature) => {
setSelectedFeature(feature); setSelectedFeature(feature);
return true; return true;
@ -188,13 +188,13 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
<div ref={mapElement} className={styles.mapContainer}></div> <div ref={mapElement} className={styles.mapContainer}></div>
<div className="clicked-coord-label"> <div className="clicked-coord-label">
<p>{ (hoveredFeature) ? readablePercent(hoveredFeature.properties_['score_a_percentile']) : '' }</p> <p>{ (hoveredFeature) ? readablePercent(hoveredFeature.properties_['score_a_percentile']) : '' }</p>
<p>{ (selectedCoord) ? toStringXY(selectedCoord, 5) : '' }</p> {/* <p>{ (selectedCoord) ? toStringXY(selectedCoord, 5) : '' }</p> */}
<div ref={popupContainer} className={styles.popupContainer}> <div ref={popupContainer} className={styles.popupContainer}>
<a href="#" ref={popupCloser} className={styles.popupCloser}></a> <a href="#" ref={popupCloser} className={styles.popupCloser}></a>
<div ref={popupContent} className={styles.popupContent}> <div ref={popupContent} className={styles.popupContent}>
{ (selectedFeature) ? { (selectedFeature) ?
<div> <div>
<h2>JustProgress Score:</h2> <h2>Cumulative Index Score:</h2>
<h3>{readablePercent(selectedFeature.properties_['score_a_percentile'])}</h3> <h3>{readablePercent(selectedFeature.properties_['score_a_percentile'])}</h3>
</div> : </div> :
'' } '' }