Using api key with digitransit map (#1994)

* Using api key with digitransit map

* Typo fix

* Use digitransit api key with geocoding urls

Author: Joe Niemi

.env.example

@@ -0,0 +1,7 @@
+CYPRESS_HSLID_READ_ACCESS_USERNAME = <secret>
+CYPRESS_HSLID_READ_ACCESS_PASSWORD = <secret>
+CYPRESS_HSLID_WRITE_ACCESS_USERNAME = <secret>
+CYPRESS_HSLID_WRITE_ACCESS_PASSWORD = <secret>
+CYPRESS_HSLID_CLIENT_ID = <secret>
+CYPRESS_HSLID_CLIENT_SECRET = <secret>
+REACT_APP_DIGITRANSIT_API_KEY = <secret>

.github/workflows/deploy_dev.yml

@@ -25,7 +25,7 @@ jobs:
           name: hsldevcom/jore-map-ui
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_ACCESS_TOKEN }}
-          buildargs: APP_ENVIRONMENT=dev, APP_DOMAIN_NAME=${{ secrets.APP_DOMAIN_NAME }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
+          buildargs: APP_ENVIRONMENT=dev, APP_REACT_APP_DIGITRANSIT_API_KEY=${{ secrets.JOREMAPUI_DIGITRANSITAPIKEY_PROD }} APP_DOMAIN_NAME=${{ secrets.APP_DOMAIN_NAME }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
           tags: develop
       - name: Notify of deployment
         uses: 8398a7/action-slack@v3

.github/workflows/deploy_prod.yml

@@ -25,7 +25,7 @@ jobs:
           name: hsldevcom/jore-map-ui
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_ACCESS_TOKEN }}
-          buildargs: APP_ENVIRONMENT=prod, APP_DOMAIN_NAME=${{ secrets.APP_DOMAIN_NAME }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
+          buildargs: APP_ENVIRONMENT=prod, APP_REACT_APP_DIGITRANSIT_API_KEY=${{ secrets.JOREMAPUI_DIGITRANSITAPIKEY_PROD }}, APP_DOMAIN_NAME=${{ secrets.APP_DOMAIN_NAME }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
           tags: release-prod
       - name: Notify of deployment
         uses: 8398a7/action-slack@v3

.github/workflows/deploy_stage.yml

@@ -25,7 +25,7 @@ jobs:
           name: hsldevcom/jore-map-ui
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_ACCESS_TOKEN }}
-          buildargs: APP_ENVIRONMENT=stage, APP_DOMAIN_NAME=${{ secrets.APP_DOMAIN_NAME }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
+          buildargs: APP_ENVIRONMENT=stage, APP_REACT_APP_DIGITRANSIT_API_KEY=${{ secrets.JOREMAPUI_DIGITRANSITAPIKEY_PROD }}, APP_DOMAIN_NAME=${{ secrets.APP_DOMAIN_NAME }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
           tags: stage
       - name: Notify of deployment
         uses: 8398a7/action-slack@v3

Dockerfile

@@ -16,6 +16,9 @@ COPY . ${WORK}
 ARG APP_ENVIRONMENT
 ENV ENVIRONMENT=${APP_ENVIRONMENT}
 
+ARG APP_REACT_APP_DIGITRANSIT_API_KEY
+ENV REACT_APP_DIGITRANSIT_API_KEY=${APP_REACT_APP_DIGITRANSIT_API_KEY}
+
 ARG APP_DOMAIN_NAME
 ENV DOMAIN_NAME=${APP_DOMAIN_NAME}
 

config/env.js

@@ -79,7 +79,8 @@ function getClientEnvironment(publicUrl) {
                 PUBLIC_URL: publicUrl,
                 ENVIRONMENT: process.env.ENVIRONMENT,
                 DOMAIN_NAME: process.env.DOMAIN_NAME,
-                BUILD_DATE: process.env.BUILD_DATE
+                BUILD_DATE: process.env.BUILD_DATE,
+                REACT_APP_DIGITRANSIT_API_KEY: process.env.REACT_APP_DIGITRANSIT_API_KEY
             }
         );
     // Stringify all values so we can feed into Webpack DefinePlugin

config/webpack.config.prod.js

@@ -301,6 +301,9 @@ module.exports = {
         new webpack.DefinePlugin({
             'process.env.ENVIRONMENT': JSON.stringify(process.env.ENVIRONMENT)
         }),
+        new webpack.DefinePlugin({
+            'process.env.REACT_APP_DIGITRANSIT_API_KEY': JSON.stringify(process.env.REACT_APP_DIGITRANSIT_API_KEY)
+        }),
         new webpack.DefinePlugin({
             'process.env.DOMAIN_NAME': JSON.stringify(process.env.DOMAIN_NAME)
         }),

src/components/map/Map.tsx

@@ -11,6 +11,7 @@ import { MapBaseLayer, MapStore } from '~/stores/mapStore';
 import { NodeStore } from '~/stores/nodeStore';
 import { RouteListStore } from '~/stores/routeListStore';
 import AddressSearch from './AddressSearch';
+import constants from '~/constants/constants';
 import HighlightEntityLayer from './layers/HighlightEntityLayer';
 import NetworkLayers from './layers/NetworkLayers';
 import PopupLayer from './layers/PopupLayer';
@@ -163,7 +164,7 @@ class LeafletMap extends React.Component<IMapProps> {
                     <TileLayer
                         url={
                             this.props.mapStore?.visibleMapBaseLayer === MapBaseLayer.DIGITRANSIT
-                                ? 'https://cdn.digitransit.fi/map/v2/hsl-map/{z}/{x}/{y}.png'
+                                ? `${constants.DIGITRANSIT_MAP_URL}/map/v2/hsl-map/{z}/{x}/{y}.png?digitransit-subscription-key=${constants.DIGITRANSIT_API_KEY}`
                                 : 'https://ortophotos.blob.core.windows.net/hsy-map/hsy_tiles2/{z}/{x}/{y}.jpg'
                         }
                         attribution={

src/constants/constants.ts

@@ -7,29 +7,39 @@ const environment: Environment = process.env.ENVIRONMENT
 let APP_URL = '';
 let HSL_ID_URL = '';
 let HSL_ID_CLIENT_ID = '';
+let DIGITRANSIT_CACHED_URL_PREFIX = '';
+let DIGITRANSIT_NON_CACHED_URL_PREFIX = '';
 switch (environment) {
     case Environment.LOCALHOST: {
         APP_URL = 'http://localhost:3000';
         HSL_ID_URL = 'https://hslid-uat.cinfra.fi';
         HSL_ID_CLIENT_ID = '6549375356227079';
+        DIGITRANSIT_CACHED_URL_PREFIX = 'api-dev';
+        DIGITRANSIT_NON_CACHED_URL_PREFIX = 'api-dev';
         break;
     }
     case Environment.DEV: {
         APP_URL = `https://${process.env.ENVIRONMENT}.${process.env.DOMAIN_NAME}`;
         HSL_ID_URL = 'https://hslid-uat.cinfra.fi';
         HSL_ID_CLIENT_ID = '6549375356227079';
+        DIGITRANSIT_CACHED_URL_PREFIX = 'cdn';
+        DIGITRANSIT_NON_CACHED_URL_PREFIX = 'api';
         break;
     }
     case Environment.STAGE: {
         APP_URL = `https://${process.env.ENVIRONMENT}.${process.env.DOMAIN_NAME}`;
         HSL_ID_URL = 'https://hslid-uat.cinfra.fi';
         HSL_ID_CLIENT_ID = '6549375356227079';
+        DIGITRANSIT_CACHED_URL_PREFIX = 'cdn';
+        DIGITRANSIT_NON_CACHED_URL_PREFIX = 'api';
         break;
     }
     case Environment.PROD: {
         APP_URL = `https://${process.env.DOMAIN_NAME}`;
         HSL_ID_URL = 'https://id.hsl.fi';
         HSL_ID_CLIENT_ID = '7799731418699567';
+        DIGITRANSIT_CACHED_URL_PREFIX = 'cdn';
+        DIGITRANSIT_NON_CACHED_URL_PREFIX = 'api';
         break;
     }
     default: {
@@ -41,6 +51,8 @@ const commonConstants = {
     HSL_ID_URL,
     HSL_ID_CLIENT_ID,
     ENVIRONMENT: environment,
+    DIGITRANSIT_MAP_URL: `https://${DIGITRANSIT_CACHED_URL_PREFIX}.digitransit.fi`,
+    DIGITRANSIT_API_KEY: process.env.REACT_APP_DIGITRANSIT_API_KEY,
     BUILD_DATE: process.env.BUILD_DATE,
     AFTER_LOGIN_URL: `${APP_URL}/afterLogin`,
     DECIMALS_IN_GEOMETRIES: 6, // Max value 6 currenlty at joredb columns: numeric(8,6)
@@ -50,9 +62,9 @@ const commonConstants = {
     MIN_YEAR: 1970,
     MAX_YEAR: 2099,
     NEW_OBJECT_TAG: 'new-',
-    GEOCODING_URL: 'https://api.digitransit.fi/geocoding/v1/search',
+    GEOCODING_URL: `https://${DIGITRANSIT_NON_CACHED_URL_PREFIX}.digitransit.fi/geocoding/v1/search`,
     OSM_REVERSE_GEOCODING_URL: 'https://nominatim.openstreetmap.org/reverse',
-    DIGITRANSIT_REVERSE_GEOCODING_URL: 'https://api.digitransit.fi/geocoding/v1/reverse',
+    DIGITRANSIT_REVERSE_GEOCODING_URL: `https://${DIGITRANSIT_NON_CACHED_URL_PREFIX}.digitransit.fi/geocoding/v1/reverse`,
     ADDRESS_SEARCH_RESULT_COUNT: 10,
     LOCAL_STORAGE_KEY_PREFIX: `${environment}_jore_map_`,
 };

src/services/geocodingService.ts

@@ -38,7 +38,7 @@ class GeocodingService {
         coordinates: L.LatLng;
         searchResultCount: number;
     }): Promise<IGeoJSONFeature[] | null> => {
-        const requestUrl = `${constants.DIGITRANSIT_REVERSE_GEOCODING_URL}?size=${searchResultCount}&point.lat=${coordinates.lat}&point.lon=${coordinates.lng}&zones=1`;
+        const requestUrl = `${constants.DIGITRANSIT_REVERSE_GEOCODING_URL}?digitransit-subscription-key=${constants.DIGITRANSIT_API_KEY}&size=${searchResultCount}&point.lat=${coordinates.lat}&point.lon=${coordinates.lng}&zones=1`;
 
         const response = await HttpUtils.sendRequest(RequestMethod.GET, encodeURI(requestUrl), {});
         return response.features;
@@ -49,10 +49,11 @@ class GeocodingService {
         coordinates: L.LatLng
     ): Promise<IGeoJSONFeature[]> => {
         const GEOCODING_URL = constants.GEOCODING_URL;
+        const DIGITRANSIT_API_KEY = constants.DIGITRANSIT_API_KEY;
         const SEARCH_RESULT_COUNT = constants.ADDRESS_SEARCH_RESULT_COUNT;
         const lat = coordinates.lat;
         const lng = coordinates.lng;
-        const requestUrl = `${GEOCODING_URL}?text=${value}&size=${SEARCH_RESULT_COUNT}&focus.point.lat=${lat}&focus.point.lon=${lng}`;
+        const requestUrl = `${GEOCODING_URL}?digitransit-subscription-key=${DIGITRANSIT_API_KEY}&text=${value}&size=${SEARCH_RESULT_COUNT}&focus.point.lat=${lat}&focus.point.lon=${lng}`;
 
         const response = await HttpUtils.sendRequest(RequestMethod.GET, encodeURI(requestUrl), {});
         return response.features;