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

Do some code cleanup on OpenLayers page

Browse source 
* Remove unneeded bits
* Reference: https://taylor.callsen.me/using-openlayers-with-react-functional-components/
This commit is contained in:
Shelby Switzer 2021-04-18 21:11:00 -04:00
parent 68405e9e82
commit aed4a77165
2 changed files with 10 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
justice40-frontend/src/components/ol-map-wrapper.js
View file

@ -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],
zoom: 2
center: [39.0458, -76.6413],
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>

35
justice40-frontend/src/pages/openlayers.js
View file

@ -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
// GeoJson API (read from flat .json file in public directory)
// initialization - retrieve GeoJSON features
useEffect( () => {
fetch('/mock-geojson-api.json')
.then(response => response.json())
.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)
// set features into state (which will be passed into OpenLayers
// map component as props)
const parsedFeatures = new GeoJSON().readFeatures(geojson, wktOptions)
setFeatures(parsedFeatures)
})
},[])
return (