chore: map card showing map

src/renderer/components/BackgroundMaps/BackgroundMapInfo.js

@@ -2,10 +2,8 @@
 import { Button, Fade, makeStyles, Paper, Typography } from '@material-ui/core'
 import * as React from 'react'
 import { defineMessages, useIntl } from 'react-intl'
-import ReactMapboxGl from 'react-mapbox-gl'
 import DeleteIcon from '@material-ui/icons/DeleteForeverOutlined'
 
-import { MAPBOX_ACCESS_TOKEN } from '../../../../config'
 import Loading from '../Loading'
 import { useMapServerQuery } from '../../hooks/useMapServerQuery'
 import { MapboxPrevOnly } from './MapCard'
@@ -115,6 +113,7 @@ const MapInfo = ({ name, id, unsetMapValue, url }) => {
       <MapboxPrevOnly
         style={url}
         containerStyle={{ height: '60%', width: '100%' }}
+        zoom={[0]}
       />
     </React.Fragment>
   )

src/renderer/components/BackgroundMaps/MapCard.js

@@ -20,8 +20,7 @@ export const MapboxPrevOnly = ReactMapboxGl({
   dragRotate: false,
   pitchWithRotate: false,
   attributionControl: false,
-  injectCSS: false,
-  interactive: false
+  injectCSS: false
 })
 
 /**
@@ -53,12 +52,13 @@ export const MapCard = ({ offlineMap, setMap, isBeingViewed }) => {
               width: '100%'
             }}
             style={offlineMap.url}
+            zoom={[0]}
           />
         </div>
         <div className={classes.text}>
           <Typography>{offlineMap.name}</Typography>
           <Typography variant='subtitle1'>
-            {`${convertKbToMb(offlineMap.bytesStored)} ${t(m.mb)}`}
+            {`${Math.round(convertKbToMb(offlineMap.bytesStored))} ${t(m.mb)}`}
           </Typography>
         </div>
       </div>

src/renderer/components/Settings/BackgroundMaps.js

@@ -80,5 +80,5 @@ export const BackgroundMaps = ({ openSettings }) => {
  * @returns {number}
  */
 export const convertKbToMb = kilobyte => {
-  return Math.round(kilobyte / 1000)
+  return kilobyte / 2 ** 20
 }