pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Remove ol-layerswitcher, use React

Browse source
This commit is contained in:
Paul Bienkowski 2021-02-14 19:49:14 +01:00
parent 5f6aaae087
commit f5c9dad788
5 changed files with 50 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package-lock.json generated
View file

@ -10242,11 +10242,6 @@
"rbush": "^3.0.1"
}
},
"ol-layerswitcher": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/ol-layerswitcher/-/ol-layerswitcher-3.8.3.tgz",
"integrity": "sha512-UwUhalf/sGXjz3rvr0EjwsaUVlJAhyJCfcIPciKk1QdNbMKq/2ZXNKGafOjwP2eDxiqhkvnhpIrDGD8+gQ19Cg=="
},
"ol-mapbox-style": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.3.1.tgz",

1
package.json
View file

@ -13,7 +13,6 @@
"luxon": "^1.25.0",
"node-sass": "^4.14.1",
"ol": "^6.5.0",
"ol-layerswitcher": "^3.8.3",
"proj4": "^2.7.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",

17
src/components/Map/index.js
View file

@ -9,11 +9,8 @@ import OSM from 'ol/source/OSM'
import proj4 from 'proj4'
import {register} from 'ol/proj/proj4'
import OlLayerSwitcher from 'ol-layerswitcher'
// Import styles for open layers + addons
import 'ol/ol.css'
import 'ol-layerswitcher/dist/ol-layerswitcher.css'
// Prepare projection
proj4.defs(
@ -126,22 +123,8 @@ function View({...options}) {
return null
}
function LayerSwitcher({...options}) {
const map = React.useContext(MapContext)
const control = React.useMemo(() => new OlLayerSwitcher(options), [])
React.useEffect(() => {
map?.addControl(control)
return () => map?.removeControl(control)
}, [control, map])
return null
}
Map.FitView = FitView
Map.GroupLayer = GroupLayer
Map.LayerSwitcher = LayerSwitcher
Map.TileLayer = TileLayer
Map.VectorLayer = VectorLayer
Map.View = View

15
src/pages/TrackPage/TrackMap.tsx
View file

@ -85,7 +85,7 @@ function PointLayer({features, title, visible}) {
return <Map.VectorLayer {...{title, visible}} style={pointStyleFunction} source={new VectorSource({features})} />
}
export default function TrackMap({trackData, ...props}: {trackData: TrackData}) {
export default function TrackMap({trackData, show, ...props}: {trackData: TrackData}) {
const {
trackVectorSource,
trackPointsD1,
@ -157,19 +157,18 @@ export default function TrackMap({trackData, ...props}: {trackData: TrackData})
style={trackLayerStyle}
/>
<Map.GroupLayer title="Tagged Points">
<PointLayer features={trackPointsD1} title="Left" visible={true} />
<PointLayer features={trackPointsD2} title="Right" visible={false} />
<Map.GroupLayer title="Tagged Points" visible>
<PointLayer features={trackPointsD1} title="Left" visible={show.left} />
<PointLayer features={trackPointsD2} title="Right" visible={show.right} />
</Map.GroupLayer>
<Map.GroupLayer title="Untagged Points" fold="close" visible={false}>
<PointLayer features={trackPointsUntaggedD1} title="Left Untagged" visible={false} />
<PointLayer features={trackPointsUntaggedD2} title="Right Untagged" visible={false} />
<Map.GroupLayer title="Untagged Points" fold="close" visible>
<PointLayer features={trackPointsUntaggedD1} title="Left Untagged" visible={show.leftUnconfirmed} />
<PointLayer features={trackPointsUntaggedD2} title="Right Untagged" visible={show.rightUnconfirmed} />
</Map.GroupLayer>
<Map.View maxZoom={22} zoom={15} center={fromLonLat([9.1797, 48.7784])} />
<Map.FitView extent={viewExtent} />
<Map.LayerSwitcher groupSelectStyle="children" startActive activationMode="click" reverse={false} />
</Map>
)
}

45
src/pages/TrackPage/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import {connect} from 'react-redux'
import {Segment, Dimmer, Grid, Loader, Header} from 'semantic-ui-react'
import {Table, Checkbox, Segment, Dimmer, Grid, Loader, Header} from 'semantic-ui-react'
import {useParams} from 'react-router-dom'
import {concat, combineLatest, of, from, Subject} from 'rxjs'
import {pluck, distinctUntilChanged, map, switchMap, startWith, sample} from 'rxjs/operators'
@ -81,6 +81,11 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
const loading = track == null || trackData == null
const [left, setLeft] = React.useState(true)
const [right, setRight] = React.useState(false)
const [leftUnconfirmed, setLeftUnconfirmed] = React.useState(false)
const [rightUnconfirmed, setRightUnconfirmed] = React.useState(false)
return (
<Page>
<Grid stackable>
@ -89,7 +94,10 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
<div style={{position: 'relative'}}>
<Loader active={loading} />
<Dimmer.Dimmable blurring dimmed={loading}>
<TrackMap {...{track, trackData}} style={{height: '60vh', minHeight: 400}} />
<TrackMap
{...{track, trackData, show: {left, right, leftUnconfirmed, rightUnconfirmed}}}
style={{height: '60vh', minHeight: 400}}
/>
</Dimmer.Dimmable>
</div>
</Grid.Column>
@ -103,6 +111,39 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
</>
)}
</Segment>
<Header as="h4">Show in Map</Header>
<Table collapsing compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Left</Table.HeaderCell>
<Table.HeaderCell textAlign="center">Points</Table.HeaderCell>
<Table.HeaderCell textAlign="right">Right</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Checkbox checked={left} onChange={(e, d) => setLeft(d.checked)} />{' '}
</Table.Cell>
<Table.Cell textAlign="center">Confirmed</Table.Cell>
<Table.Cell textAlign="right">
<Checkbox checked={right} onChange={(e, d) => setRight(d.checked)} />{' '}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Checkbox checked={leftUnconfirmed} onChange={(e, d) => setLeftUnconfirmed(d.checked)} />{' '}
</Table.Cell>
<Table.Cell textAlign="center">Other</Table.Cell>
<Table.Cell textAlign="right">
<Checkbox checked={rightUnconfirmed} onChange={(e, d) => setRightUnconfirmed(d.checked)} />{' '}
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Grid.Column>
</Grid.Row>
</Grid>