feat: map for background location

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

src/components/modals/main/settings/sections/background/Background.jsx

@@ -169,6 +169,7 @@ export default class BackgroundSettings extends PureComponent {
         <Checkbox name='ddgProxy' text={background.ddg_image_proxy} element='.other' />
         <Checkbox name='bgtransition' text={background.transition} element='.other' />
         <Checkbox name='photoInformation' text={background.photo_information} element='.other' />
+        <Checkbox name='photoMap' text='Show location map on photo information if available' element='.other'/>
 
         <h3>{background.source.title}</h3>
         <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>

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;

src/modules/helpers/background/widget.js

@@ -36,3 +36,13 @@ export function gradientStyleBuilder({ type, angle, gradient }) {
     style: `background:${gradient[0]?.colour};${grad}`
   };
 }
+
+
+// source: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29
+export function lon2tile(lon, zoom) {
+  return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
+}
+
+export function lat2tile(lat, zoom) {
+  return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
+}