Enable mapbox maps

3 files changed, 32 insertions, 4 deletions

diff --git a/modern/src/common/preferences.js b/modern/src/common/preferences.js
new file mode 100644
index 0000000..24fe389
--- /dev/null
+++ b/modern/src/common/preferences.js
@@ -0,0 +1,21 @@
+import { useSelector } from 'react-redux';
+
+export const usePreference = (key, defaultValue) => {
+  return useSelector(state => {
+    if (state.session.server.forceSettings) {
+      return state.session.server[key] || state.session.user[key] || defaultValue;
+    } else {
+      return state.session.user[key] || state.session.server[key] || defaultValue;
+    }
+  });
+};
+
+export const useAttributePreference = (key, defaultValue) => {
+  return useSelector(state => {
+    if (state.session.server.forceSettings) {
+      return state.session.server.attributes[key] || state.session.user.attributes[key] || defaultValue;
+    } else {
+      return state.session.user.attributes[key] || state.session.server.attributes[key] || defaultValue;
+    }
+  });
+};
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index a718798..1e75d30 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -7,6 +7,7 @@ import { deviceCategories } from '../common/deviceCategories';
 import { loadIcon, loadImage } from './mapUtil';
 import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
 import t from '../common/localization';
+import { useAttributePreference } from '../common/preferences';
 
 const element = document.createElement('div');
 element.style.width = '100%';
@@ -75,7 +76,13 @@ const Map = ({ children }) => {
   const containerEl = useRef(null);
 
   const [mapReady, setMapReady] = useState(false);
-  
+
+  const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
+
+  useEffect(() => {
+    mapboxgl.accessToken = mapboxAccessToken;
+  }, [mapboxAccessToken]);
+
   useEffect(() => {
     const listener = ready => setMapReady(ready);
     addReadyListener(listener);
diff --git a/modern/src/reactHelper.js b/modern/src/reactHelper.js
index cd161d4..b0eb016 100644
--- a/modern/src/reactHelper.js
+++ b/modern/src/reactHelper.js
@@ -7,10 +7,10 @@ export const usePrevious = value => {
     ref.current = value;
   });
   return ref.current;
-}
+};
 
 export const useEffectAsync = (effect, deps) => {
   useEffect(() => {
     effect();
-  }, [effect, ...deps]); // eslint-disable-line react-hooks/exhaustive-deps
-}
+  }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+};