feat(zoom component): added Zoom Component and olmincss from olv6.4

src/components/MapContainer/Controls/ZoomControl.tsx

@@ -0,0 +1,22 @@
+import React, { useContext, useEffect } from 'react'
+import Zoom from 'ol/control/Zoom'
+import MapContext from '../Map/MapContext'
+
+const ZoomControl: React.FC = () => {
+  const { map } = useContext(MapContext)
+
+  useEffect(() => {
+    if (!map.controls) return
+
+    const zoomControl = new Zoom({})
+
+    // map.controls.push(zoomSliderControl)
+    map.controls.push(zoomControl)
+    // eslint-disable-next-line consistent-return
+    return () => map.controls.remove(zoomControl)
+  }, [map])
+
+  return null
+}
+
+export default ZoomControl

src/components/MapContainer/Controls/index.tsx

@@ -1,4 +1,5 @@
 import Controls from './Controls'
 import FullScreenControl from './FullScreenControl'
+import ZoomControl from './ZoomControl'
 
-export { Controls, FullScreenControl }
+export { Controls, FullScreenControl, ZoomControl }

src/components/MapContainer/Layers/TileLayer.tsx

@@ -16,6 +16,7 @@ const TileLayer: React.FC<Props> = ({ zIndex = 0 }: Props) => {
 
     const tileLayer = new OLTileLayer({
       source: osm(),
+      maxZoom: 50,
       zIndex,
     })
 

src/components/MapContainer/Map/Map.tsx

@@ -8,17 +8,35 @@ interface Props {
   children?: React.ReactNode
   zoom: number
   center: number[]
+  minZoom: number
+  maxZoom: number
+  projection: string
 }
 
-const Map: React.FC<Props> = ({ children, zoom, center }: Props) => {
+// ol/control/(minresolution, maxresolution) can be added
+// if considered necessary in future
+const Map: React.FC<Props> = ({
+  children,
+  zoom,
+  center,
+  maxZoom,
+  minZoom,
+  projection,
+}: Props) => {
   const mapRef = useRef() as React.MutableRefObject<HTMLInputElement>
   const [map, setMap] = useState({})
 
   // on component mount, create map object, set map state,
   // pass map state into mapcontext for access in layers.
   useEffect(() => {
     const options = {
-      view: new ol.View({ zoom, center }),
+      view: new ol.View({
+        center,
+        zoom,
+        minZoom,
+        maxZoom,
+        projection,
+      }),
       layers: [],
       controls: [],
       overlays: [],
@@ -29,7 +47,7 @@ const Map: React.FC<Props> = ({ children, zoom, center }: Props) => {
     setMap(mapObject)
 
     return () => mapObject.setTarget(undefined)
-  }, [zoom, center])
+  }, [center, zoom, minZoom, maxZoom, projection])
 
   return (
     <MapContext.Provider value={{ map }}>

src/components/MapContainer/MapContainer.tsx

@@ -3,9 +3,10 @@ import { fromLonLat } from 'ol/proj'
 import { GoogleSpreadsheet } from 'google-spreadsheet'
 import Map from './Map'
 import './contain.css'
+import './olmin.css'
 import config from '../../config/config'
 import { Layers, TileLayer, VectorLayer, GoogleSheetsLayer } from './Layers'
-import { Controls, FullScreenControl } from './Controls'
+import { Controls, FullScreenControl, ZoomControl } from './Controls'
 import orca from './orcapin.png'
 
 const doc = new GoogleSpreadsheet(config.spreadsheetId)
@@ -14,9 +15,12 @@ doc.useApiKey(config.apiKey)
 const MapContainer: React.FC = () => {
   const [coordinates, setCoordinates] = useState([[0, 0]])
   const [googleSheetcoordinates, setgoogleSheetcoordinates] = useState([[0, 0]])
-  const [zoom, setZoom] = useState(0)
+  const [zoom, setZoom] = useState(2)
   const [center, setCenter] = useState([0, 0])
+  const [minZoom, setminZoom] = useState(0)
+  const [maxZoom, setmaxZoom] = useState(1900)
   const [showLayer, setShowLayer] = useState(true)
+  const projectionStandard = 'EPSG:3857'
 
   useEffect(function effectFunction() {
     async function loadSpreadsheet() {
@@ -34,7 +38,8 @@ const MapContainer: React.FC = () => {
         ])
         setZoom(9)
         setCenter([-122.4713, 47.7237])
-
+        setminZoom(0)
+        setmaxZoom(1900)
         // TODO: this currently returns a single row from a sheet with 2+ entries, so only one map point is returned from sheets.
         const rows = await sheet.getRows()
 
@@ -75,14 +80,21 @@ const MapContainer: React.FC = () => {
       </h3>
 
       <div className="setsides">
-        <Map center={fromLonLat(center)} zoom={zoom}>
+        <Map
+          center={fromLonLat(center)}
+          zoom={zoom}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          projection={projectionStandard}
+        >
           <Layers>
             <TileLayer zIndex={0} />
             {showLayer && <VectorLayer coordinates={coordinates} zIndex={0} />}
           </Layers>
 
           <Controls>
             <FullScreenControl />
+            <ZoomControl />
           </Controls>
         </Map>
       </div>
@@ -98,7 +110,13 @@ const MapContainer: React.FC = () => {
       </h3>
 
       <div className="setsides">
-        <Map center={fromLonLat(center)} zoom={zoom}>
+        <Map
+          center={fromLonLat(center)}
+          zoom={zoom}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          projection={projectionStandard}
+        >
           <Layers>
             <TileLayer zIndex={0} />
             {showLayer && (
@@ -111,6 +129,7 @@ const MapContainer: React.FC = () => {
 
           <Controls>
             <FullScreenControl />
+            <ZoomControl />
           </Controls>
         </Map>
       </div>