diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 46b08d76..8a3bd192 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -169,6 +169,7 @@ export default class BackgroundSettings extends PureComponent {
+
{background.source.title}
this.setState({ backgroundType: value })} category='background'>
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index f9a264e3..abb2e476 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/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,
}
};
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index 1a5f7cd6..3c734287 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/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 (
+
+ );
+ }
+
return (
{photo} {credit}
@@ -96,6 +109,7 @@ export default function PhotoInformation({ info, url, api }) {
{language.information}
+ {photoMap()}
{/* fix console error by using fragment and key */}
{info.location && info.location !== 'N/A' ?
diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss
index ca31462c..5f5b9acb 100644
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/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;
diff --git a/src/modules/helpers/background/widget.js b/src/modules/helpers/background/widget.js
index be544baa..f8a79425 100644
--- a/src/modules/helpers/background/widget.js
+++ b/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)));
+}