Do some code cleanup on OpenLayers page

* Remove unneeded bits
* Reference: https://taylor.callsen.me/using-openlayers-with-react-functional-components/

justice40-frontend/src/components/ol-map-wrapper.js

@@ -8,15 +8,12 @@ import TileLayer from 'ol/layer/Tile'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import XYZ from 'ol/source/XYZ'
-import {transform} from 'ol/proj'
-import {toStringXY} from 'ol/coordinate';
 
 function OlMapWrapper(props) {
 
   // set intial state
   const [ map, setMap ] = useState()
   const [ featuresLayer, setFeaturesLayer ] = useState()
-  const [ selectedCoord , setSelectedCoord ] = useState()
 
   // pull refs
   const mapElement = useRef()
@@ -58,15 +55,12 @@ function OlMapWrapper(props) {
       ],
       view: new View({
         projection: 'EPSG:3857',
-        center: [0, 0],
+        center: [39.0458, -76.6413],
-        zoom: 2
+        zoom: 9
       }),
       controls: []
     })
 
-    // set map onclick handler
-    initialMap.on('click', handleMapClick)
-
     // save map and vector layer references to state
     setMap(initialMap)
     setFeaturesLayer(initalFeaturesLayer)
@@ -75,7 +69,6 @@ function OlMapWrapper(props) {
 
   // update map if features prop changes - logic formerly put into componentDidUpdate
   useEffect( () => {
-
     if (props.features.length) { // may be null on first render
 
       // set features to map
@@ -94,24 +87,6 @@ function OlMapWrapper(props) {
 
   },[props.features])
 
-  // map click handler
-  const handleMapClick = (event) => {
-
-    // get clicked coordinate using mapRef to access current React state inside OpenLayers callback
-    //  https://stackoverflow.com/a/60643670
-    const clickedCoord = mapRef.current.getCoordinateFromPixel(event.pixel);
-
-    // transform coord to EPSG 4326 standard Lat Long
-    const transormedCoord = transform(clickedCoord, 'EPSG:3857', 'EPSG:4326')
-
-    // set React state
-    setSelectedCoord( transormedCoord )
-
-    console.log(transormedCoord)
-    
-  }
-
-  // render component
   return (     
       <div className="map-wrapper">
           <div ref={mapElement} id="ol-map" className="map-container"></div>

justice40-frontend/src/pages/openlayers.js

@@ -1,53 +1,24 @@
 import React, { useState, useEffect } from 'react';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
-
 import GeoJSON from 'ol/format/GeoJSON'
-import Feature from 'ol/Feature';
-
 import OlMapWrapper from '../components/ol-map-wrapper'
+import geojson from "../data/maryland.json";
 
-// import OpenLayersMap from '../components/open-layers-map'
-// import { fromLonLat, get } from 'ol/proj';
-// import TileLayer from 'ol/layer/Tile';
-// import OSM from 'ol/source/OSM';
-// import XYZ from 'ol/source/XYZ';
-// import Map from 'ol/Map';
-// import View from 'ol/View';
-// import MVT from 'ol/format/MVT';
-// import TileSource from 'ol/source/Tile';
-// import VectorTileLayer from 'ol/layer/VectorTile';
-// import VectorTileSource from 'ol/source/VectorTile';
-// import {Fill, Stroke, Style} from 'ol/style';
-// import {schemeCategory10} from 'd3-scale-chromatic';
-
-
-
-// markup
 const OpenLayersPage = () => {
     // set intial state
     const [ features, setFeatures ] = useState([])
 
-    // initialization - retrieve GeoJSON features from Mock JSON API get features from mock 
+    // initialization - retrieve GeoJSON features  
-    //  GeoJson API (read from flat .json file in public directory)
     useEffect( () => {
-
+        // parse fetched geojson into OpenLayers features
-        fetch('/mock-geojson-api.json')
+        //  use options to convert feature from EPSG:4326 to EPSG:3857
-        .then(response => response.json())
+        const wktOptions = {
-        .then( (fetchedFeatures) => {
-
-            // parse fetched geojson into OpenLayers features
-            //  use options to convert feature from EPSG:4326 to EPSG:3857
-            const wktOptions = {
             dataProjection: 'EPSG:4326',
             featureProjection: 'EPSG:3857'
-            }
+        }
-            const parsedFeatures = new GeoJSON().readFeatures(fetchedFeatures, wktOptions)
+        const parsedFeatures = new GeoJSON().readFeatures(geojson, wktOptions)
-
+        setFeatures(parsedFeatures)
-            // set features into state (which will be passed into OpenLayers
-            //  map component as props)
-            setFeatures(parsedFeatures)
-      })
   },[])
 
     return (