Remove ol-layerswitcher, use React

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/Map/index.js

@@ -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

src/pages/TrackPage/TrackMap.tsx

@@ -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">
+      <Map.GroupLayer title="Tagged Points" visible>
-        <PointLayer features={trackPointsD1} title="Left" visible={true} />
+        <PointLayer features={trackPointsD1} title="Left" visible={show.left} />
-        <PointLayer features={trackPointsD2} title="Right" visible={false} />
+        <PointLayer features={trackPointsD2} title="Right" visible={show.right} />
       </Map.GroupLayer>
 
-      <Map.GroupLayer title="Untagged Points" fold="close" visible={false}>
+      <Map.GroupLayer title="Untagged Points" fold="close" visible>
-        <PointLayer features={trackPointsUntaggedD1} title="Left Untagged" visible={false} />
+        <PointLayer features={trackPointsUntaggedD1} title="Left Untagged" visible={show.leftUnconfirmed} />
-        <PointLayer features={trackPointsUntaggedD2} title="Right Untagged" visible={false} />
+        <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>
   )
 }

src/pages/TrackPage/index.tsx

@@ -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>