Support quad_key on Leaflet

- Fix env names
- Add env names on .env.example
- Remove unused env names on docker-compose

Author: tnagorra

docker-compose.yaml

@@ -138,12 +138,10 @@ services:
             REACT_APP_SENTRY_DSN: ${MANAGER_DASHBOARD_SENTRY_DSN}
             REACT_APP_SENTRY_TRACES_SAMPLE_RATE: ${MANAGER_DASHBOARD_SENTRY_TRACES_SAMPLE_RATE}
             REACT_APP_COMMUNITY_DASHBOARD_URL: ${MANAGER_DASHBOARD_COMMUNITY_DASHBOARD_URL}
-            REACT_IMAGE_BING_API_KEY: '${IMAGE_BING_API_KEY}'
-            REACT_IMAGE_ESRI_API_KEY: '${IMAGE_ESRI_API_KEY}'
-            REACT_IMAGE_ESRI_BETA_API_KEY: '${IMAGE_ESRI_BETA_API_KEY}'
-            REACT_IMAGE_MAPBOX_API_KEY: '${IMAGE_MAPBOX_API_KEY}'
-            REACT_IMAGE_MAXAR_PREMIUM_API_KEY: '${IMAGE_MAXAR_PREMIUM_API_KEY}'
-            REACT_IMAGE_MAXAR_STANDARD_API_KEY: '${IMAGE_MAXAR_STANDARD_API_KEY}'
+            REACT_APP_IMAGE_BING_API_KEY: '${IMAGE_BING_API_KEY}'
+            REACT_APP_IMAGE_MAPBOX_API_KEY: '${IMAGE_MAPBOX_API_KEY}'
+            REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY: '${IMAGE_MAXAR_PREMIUM_API_KEY}'
+            REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY: '${IMAGE_MAXAR_STANDARD_API_KEY}'
         volumes:
             - manager-dashboard-static:/code/build/
         command: bash -c 'yarn build'

manager-dashboard/.env.example

@@ -10,3 +10,10 @@ REACT_APP_FIREBASE_STORAGE_BUCKET=
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_APP_ID=
 REACT_APP_COMMUNITY_DASHBOARD_URL=
+
+REACT_APP_IMAGE_BING_API_KEY=
+REACT_APP_IMAGE_MAPBOX_API_KEY=
+REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY=
+REACT_APP_IMAGE_SINERGISE_API_KEY=
+# -- NOTE: not used and seems to be discontinued
+REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY=

manager-dashboard/app/components/GeoJsonPreview/index.tsx

@@ -2,13 +2,51 @@ import React from 'react';
 import {
     map as createMap,
     Map,
-    tileLayer,
     geoJSON,
+
+    TileLayer,
+    Coords,
+    Util,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.css';
 
+const toQuadKey = (x: number, y: number, z: number) => {
+    let index = '';
+    for (let i = z; i > 0; i -= 1) {
+        let b = 0;
+        // eslint-disable-next-line no-bitwise
+        const mask = 1 << (i - 1);
+        // eslint-disable-next-line no-bitwise
+        if ((x & mask) !== 0) {
+            b += 1;
+        }
+        // eslint-disable-next-line no-bitwise
+        if ((y & mask) !== 0) {
+            b += 2;
+        }
+        index += b.toString();
+    }
+    return index;
+};
+
+const BingTileLayer = TileLayer.extend({
+    getTileUrl(coords: Coords) {
+        const quadkey = toQuadKey(coords.x, coords.y, coords.z);
+        const subdomains = this.options.subdomains;
+
+        // eslint-disable-next-line no-underscore-dangle
+        const url = this._url
+            .replace('{subdomain}', subdomains[(coords.x + coords.y) % subdomains.length])
+            .replace('{quad_key}', quadkey);
+
+        console.log(url);
+        return url;
+    },
+    toQuadKey,
+});
+
 interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
@@ -38,8 +76,14 @@ function GeoJsonPreview(props: Props) {
                     1,
                 );
 
-                const layer = tileLayer(
-                    url || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                const finalUrl = url || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+                const quadKeyUrl = finalUrl.indexOf('{quad_key}') !== -1;
+                const Layer = quadKeyUrl
+                    ? BingTileLayer
+                    : TileLayer;
+
+                const layer = new Layer(
+                    finalUrl,
                     {
                         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                         // subdomains: ['a', 'b', 'c'],

manager-dashboard/app/views/NewTutorial/utils.ts

@@ -25,10 +25,10 @@ import {
     IconKey,
 } from '#utils/common';
 
-const BING_KEY = process.env.REACT_IMAGE_BING_API_KEY;
-const MAPBOX_KEY = process.env.REACT_IMAGE_MAPBOX_API_KEY;
-const MAXAR_PREMIUM = process.env.REACT_IMAGE_MAXAR_PREMIUM_API_KEY;
-const MAXAR_STANDARD = process.env.REACT_IMAGE_MAXAR_STANDARD_API_KEY;
+const BING_KEY = process.env.REACT_APP_IMAGE_BING_API_KEY;
+const MAPBOX_KEY = process.env.REACT_APP_IMAGE_MAPBOX_API_KEY;
+const MAXAR_PREMIUM = process.env.REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY;
+const MAXAR_STANDARD = process.env.REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY;
 
 export type ColorKey = 'red'
 | 'pink'