Merge branch 'develop'

CHANGELOG.md

@@ -38,7 +38,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - added new supported protocol to datasource in myems-api
 - added microgrid reporting to myems-web
 ### Changed
--
+- moved mapbox access token from hardcoded to config.js in myems-web
+- you can get your own token at https://mapbox.com
+- if you wnat to turn off online map feature, please set showOnlineMap to false
+- 
 ### Fixed
 - fixed issues in on_delete actions of equipment, shopfloor, store and tenant in myems-api
 - fixed issues of space and command views in myems-admin

myems-web/src/components/MyEMS/common/CustomizeMapBox.js

@@ -5,8 +5,9 @@ import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-load
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import {checkEmpty, getCookieValue} from "../../../helpers/utils";
+import { settings } from '../../../config';
 
-mapboxgl.accessToken = 'pk.eyJ1IjoibXllbXMiLCJhIjoiY2xtaW12Z2QyMHpvNzNmcGdta2lmMjBueiJ9.BL2jGoEnetv-9JZR9eTYNQ';
+mapboxgl.accessToken = settings.mapboxToken;
 if (mapboxgl.getRTLTextPluginStatus !== 'loaded') {
   mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
 }
@@ -18,7 +19,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
     const [lat, setLat] = useState(38.913);
     const [zoom, setZoom] = useState(9);
     const { isDark, language } = useContext(AppContext);
-    
+
     useEffect(() => {
       let is_logged_in = getCookieValue('is_logged_in');
       if (checkEmpty(is_logged_in) || !is_logged_in) {
@@ -27,7 +28,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
       var lang = language;
       if (lang === 'zh_CN') {
         lang = 'zh-Hans';
-      } 
+      }
 
       if (map.current) return; // initialize map only once
       map.current = new mapboxgl.Map({
@@ -36,7 +37,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
         center: [Longitude ? Longitude : lng, Latitude ? Latitude : lat],
         style: isDark ? 'mapbox://styles/mapbox/dark-v10' : 'mapbox://styles/mapbox/streets-v11',
       });
-      
+
       map.current.on('move', () => {
         setZoom(map.current.getZoom().toFixed(2));
         setLng(map.current.getCenter().lng.toFixed(4));
@@ -46,7 +47,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
       const mapboxLanguage = new MapboxLanguage({
         defaultLanguage: lang
       });
-      
+
       map.current.addControl(mapboxLanguage);
 
     }, [t, Latitude, Longitude, Zoom]);
@@ -55,7 +56,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
       var lang = language;
       if (lang === 'zh_CN') {
         lang = 'zh-Hans';
-      } 
+      }
       if (!map.current) return;
       if (Geojson !== null && Geojson !== undefined) {
         map.current = new mapboxgl.Map({
@@ -64,17 +65,17 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
           center: [Longitude ? Longitude : lng, Latitude ? Latitude : lat],
           style: isDark ? 'mapbox://styles/mapbox/dark-v10' : 'mapbox://styles/mapbox/streets-v11',
         });
-  
+
         map.current.on('move', () => {
           setLng(map.current.getCenter().lng.toFixed(4));
           setLat(map.current.getCenter().lat.toFixed(4));
           setZoom(map.current.getZoom().toFixed(2));
         });
-  
+
         const mapboxLanguage = new MapboxLanguage({
           defaultLanguage: lang
         });
-        
+
         map.current.addControl(mapboxLanguage);
 
         map.current.on('load', () => {
@@ -88,7 +89,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
             clusterMaxZoom: 14, // Max zoom to cluster points on
             clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
           });
-          
+
           map.current.addLayer({
           id: 'clusters',
           type: 'circle',
@@ -120,7 +121,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
           ]
           }
           });
-          
+
           map.current.addLayer({
           id: 'cluster-count',
             type: 'symbol',
@@ -132,7 +133,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
               'text-size': 12
               }
           });
-          
+
           map.current.addLayer({
           id: 'unclustered-point',
           type: 'circle',
@@ -145,7 +146,7 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
             'circle-stroke-color': '#fff'
           }
           });
-          
+
           // inspect a cluster on click
           map.current.on('click', 'clusters', (e) => {
             const features = map.current.queryRenderedFeatures(e.point, {
@@ -163,14 +164,14 @@ const CustomizeMapBox = ({Latitude, Longitude, Zoom, Geojson, t}) => {
               }
             );
           });
-          
+
           map.current.on('click', 'unclustered-point', (e) => {
             const coordinates = e.features[0].geometry.coordinates.slice();
             const url = e.features[0].properties.url;
             const uuid = e.features[0].properties.uuid;
             const title = e.features[0].properties.title;
             const description = e.features[0].properties.description;
-            
+
             while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
               coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
             }

myems-web/src/config.js

@@ -17,6 +17,7 @@ export const settings = {
   isNavbarVerticalCollapsed: false,
   navbarStyle: 'transparent',
   language: 'zh_CN', //zh_CN, en, de, fr, es, ru, ar, vi, th, tr, ms, id
-  showOnlineMap: true
+  showOnlineMap: true,
+  mapboxToken: 'GET_MAPBOX_TOKEN_AT_MAPBOX.COM'
 };
 export default { version, navbarBreakPoint, topNavbarBreakpoint, settings, APIBaseURL };