feat: map for background location

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/widgets/background/Background.jsx

@@ -108,11 +108,12 @@ export default class Background extends PureComponent {
         const backgroundAPI = localStorage.getItem('backgroundAPI');
         const apiCategory = localStorage.getItem('apiCategory');
         const apiQuality = localStorage.getItem('apiQuality');
+        const photoMap = localStorage.getItem('photoMap');
 
         let requestURL, data;
         switch (backgroundAPI) {
           case 'unsplash':
-            requestURL = `${window.constants.PROXY_URL}/images/unsplash?quality=${apiQuality}`;
+            requestURL = `${window.constants.PROXY_URL}/images/unsplash?quality=${apiQuality}&map=${(photoMap === 'true')}`;
             break;
           case 'pexels':
             requestURL = `${window.constants.PROXY_URL}/images/pexels?quality=${apiQuality}`;
@@ -154,7 +155,9 @@ export default class Background extends PureComponent {
             camera: data.camera,
             url: data.file,
             photographerURL: photographerURL,
-            photoURL: photoURL
+            photoURL: photoURL,
+            latitude: data.latitude || null,
+            longitude: data.longitude || null,
           }
         };
 

src/components/widgets/background/PhotoInformation.jsx

@@ -1,6 +1,7 @@
 import { useState, Fragment } from 'react';
 import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons';
 import Hotkeys from 'react-hot-keys';
+import { lat2tile, lon2tile } from 'modules/helpers/background/widget';
 
 const toDataURL = async (url) => {
   const res = await fetch(url);
@@ -88,6 +89,18 @@ export default function PhotoInformation({ info, url, api }) {
     }
   };
 
+  const photoMap = () => {
+    if (localStorage.getItem('photoMap') !== 'true' || info.latitude === null || info.longitude === null) {
+      return null;
+    }
+
+    const lat = lat2tile(info.latitude, 12);
+    const lon = lon2tile(info.longitude, 12);
+    return (
+      <img src={`https://a.tile.openstreetmap.org/12/${lon}/${lat}.png`} alt='location' draggable={false}/>
+    );
+  }
+
   return (
     <div className='photoInformation'>
       <h1>{photo} <span id='credit'>{credit}</span></h1>
@@ -96,6 +109,7 @@ export default function PhotoInformation({ info, url, api }) {
         <Info className='infoIcon'/>
         <h1>{language.information}</h1>
         <hr/>
+        {photoMap()}
         {/* fix console error by using fragment and key */}
         {info.location && info.location !== 'N/A' ? <Fragment key='location'>
           <LocationOn/>

src/components/widgets/background/scss/_photoinformation.scss

@@ -55,6 +55,14 @@
     padding: 2px;
   }
 
+  img {
+    height: 100px;
+    object-fit: cover;
+    width: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+
   span,
   svg {
     font-size: 2em;