Support api key in digitransit queries; add some data licenses

Author: Rikuoja

.github/workflows/ci.yml

@@ -83,6 +83,8 @@ jobs:
         if: github.ref == 'refs/heads/main'
         run: yarn run build
         env:
+          API_KEY_DIGITRANSIT: ${{ secrets.API_KEY_DIGITRANSIT }}
+          API_KEY_NLS: ${{ secrets.API_KEY_NLS }}
           TILESERVER_URL: ${{ secrets.TILESERVER_URL }}
           NLS_TILESERVER_URL: ${{ secrets.NLS_TILESERVER_URL }}
           CITIES: "'Kangasala','Lempäälä','Nokia','Orivesi','Pirkkala','Tampere','Vesilahti','Ylöjärvi'"
@@ -103,6 +105,7 @@ jobs:
         if: startsWith(github.ref, 'refs/tags/release')
         run: yarn run build
         env:
+          API_KEY_DIGITRANSIT: ${{ secrets.API_KEY_DIGITRANSIT }}
           API_KEY_NLS: ${{ secrets.API_KEY_NLS }}
           TILESERVER_URL: ${{ secrets.TAMPERE_TILESERVER_URL }}
           NLS_TILESERVER_URL: ${{ secrets.TAMPERE_NLS_TILESERVER_URL }}

README.md

@@ -26,12 +26,12 @@ Tarmo - Tampere Mobilemap
 
 Use Node>=v16.
 See [instructions](https://www.maanmittauslaitos.fi/rajapinnat/api-avaimen-ohje)
-for acquiring an NLS API key (in Finnish).
+for acquiring an NLS API key (in Finnish). Optionally, see [instructions](https://digitransit.fi/en/developers/api-registration/) for acquiring a Digitransit API key if you want bus stops on your map.
 
 1. Build and start the development containers with `docker-compose -f docker-compose.dev.yml up -d`
 2. Populate the database by running `make test-all-layers`.
 3. Navigate into the `web` directory.
-4. Copy `.env.sample` as `.env` and fill your NLS API key.
+4. Copy `.env.sample` as `.env` and fill your NLS API key (plus optionally Digitransit API key).
 5. Install dependencies:
    ```shell
    yarn

licenses.md

@@ -7,8 +7,8 @@
 [_Tampereen kaupungin WFS-rajapinta_](https://geodata.tampere.fi/geoserver/web/)
 
 - Aineiston lisenssi [Creative Commons Attribution 4.0](https://creativecommons.org/licenses/by/4.0/)
-- Luontopolkurastit
-- Luonnonmuistomerkit
+- Luontopolkurastit (Tampereen kaupunki, Ympäristönsuojelu)
+- Luonnonmuistomerkit (Tampereen kaupunki, Ympäristönsuojelu)
 
 _[Jyväskylän yliopisto, Lipas Liikuntapaikat.fi](https://www.lipas.fi/etusivu)_
 
@@ -25,6 +25,13 @@ _[Digitransit](https://digitransit.fi/en/developers/apis/)_
 - Lisenssi: [Creative Commons BY 4.0 International](https://creativecommons.org/licenses/by/4.0/)
 - Hyödynnetään toteutuksessa Digitransit-APIn Waltti-reititintä
 - Joukkoliikennepysäkit
+- Kaupunkipyöräasemat
+
+-[Suomen Ympäristökeskus](https://www.syke.fi/avointieto)
+
+- Lisenssi: [Creative Commons BY 4.0 International](https://creativecommons.org/licenses/by/4.0/)
+- Valtion maiden luonnonsuojelualueet (Metsähallitus)
+- Natura 2000 -alueet (Suomen Ympäristökeskus)
 
 _[Maanmittauslaitos](https://www.maanmittauslaitos.fi/tietoa-maanmittauslaitoksesta/teemat/tutustu-rajapintapalveluiden-kayttoon/rajapintojen-kautta)_
 

web/.env.sample

@@ -1,5 +1,6 @@
 API_KEY_NLS=<your-api-key>
 NLS_TILESERVER_URL=https://avoin-karttakuva.maanmittauslaitos.fi
+API_KEY_DIGITRANSIT=<your-api-key>
 TILESERVER_URL=http://localhost:7800
 CITIES="'Kangasala','Lempäälä','Nokia','Orivesi','Pirkkala','Tampere','Vesilahti','Ylöjärvi'"
 DISABLED_LAYERS="Roskikset;Penkit ja pöydät"

web/src/components/InfoSlider.tsx

@@ -145,11 +145,11 @@ export default function InfoSlider({ popupInfo }: PopupProps) {
   };
 
   const dataSources: {[prefix:string]: DataSource} = {
-    "lipas": {name: "LIPAS", url: "https://www.lipas.fi/"},
+    "lipas": {name: "Jyväskylän yliopisto, Lipas Liikuntapaikat.fi", url: "https://www.lipas.fi/"},
     "museovirastoarcrest": {name: "Museovirasto", url: "https://www.kyppi.fi/"},
-    "tamperewfs": {name: "Tampereen kaupunki", url: "https://data.tampere.fi/"},
-    "osm": {name: "OpenStreetMap", url: "https://www.openstreetmap.org/"},
-    "syke": {name: "Suomen ympäristökeskus", url: "https://www.syke.fi/"},
+    "tamperewfs": {name: "Tampereen kaupunki, Ympäristönsuojelu", url: "https://data.tampere.fi/"},
+    "osm": {name: "OpenStreetMapin tekijät", url: "https://www.openstreetmap.org/"},
+    "syke": {name: "Suomen ympäristökeskus/Metsähallitus", url: "https://www.syke.fi/"},
     "digitransit": {name: "Digitransit", url: "https://digitransit.fi"}
   }
 
@@ -178,7 +178,7 @@ export default function InfoSlider({ popupInfo }: PopupProps) {
     return (
       <Box pb={2}>
         <Typography variant="h6">
-          Tietolähde: <Link href={url} target="_blank" color="#fbfbfb">{name}</Link>
+          © <Link href={url} target="_blank" color="#fbfbfb">{name}</Link> {new Date().getFullYear()}
         </Typography>
       </Box>
     );

web/src/components/Map.tsx

@@ -107,6 +107,9 @@ export default function TarmoMap({ setPopupInfo }: TarmoMapProps): JSX.Element {
       LayerId.DigiTransitPoint,
       {
         url: "https://api.digitransit.fi/routing/v1/routers/waltti/index/graphql",
+        headers: {
+          "digitransit-subscription-key": `${process.env.API_KEY_DIGITRANSIT}`
+        },
         tarmo_category: "Pysäkit",
         zoomThreshold: minZoomByCategory.get("Pysäkit")!,
         reload: true,
@@ -131,6 +134,9 @@ export default function TarmoMap({ setPopupInfo }: TarmoMapProps): JSX.Element {
       LayerId.DigiTransitBikePoint,
       {
         url: "https://api.digitransit.fi/routing/v1/routers/waltti/index/graphql",
+        headers: {
+          "digitransit-subscription-key": `${process.env.API_KEY_DIGITRANSIT}`
+        },
         tarmo_category: "Pysäkit",
         zoomThreshold: minZoomByCategory.get("Pysäkit")!,
         reload: false,
@@ -162,9 +168,6 @@ export default function TarmoMap({ setPopupInfo }: TarmoMapProps): JSX.Element {
 
   const loadExternalData = () => {
     // Load external data for the visible area
-    const requestHeaders: HeadersInit = {
-      "User-Agent": "TARMO - Tampere Mobilemap",
-    };
     externalSources.forEach((value, key) => {
       // Do not reload if data is not visible
       if (
@@ -178,10 +181,14 @@ export default function TarmoMap({ setPopupInfo }: TarmoMapProps): JSX.Element {
       }
       const url = value.url;
       let query = value.gqlQuery ? value.gqlQuery : "";
+      const headers: HeadersInit = {
+        "User-Agent": "TARMO - Tampere Mobilemap",
+        ...value.headers
+      };
       if (bounds && query && zoom > value.zoomThreshold) {
         const params = new Map<string, string>(Object.entries(bounds));
         query = buildQuery(query, params);
-        rawRequest(url, query, requestHeaders).then(response => {
+        rawRequest(url, query, undefined, headers).then(response => {
           const featureCollection = parseResponse(response);
           // https://medium.com/swlh/using-es6-map-with-react-state-hooks-800b91eedd5f
           setExternalData(prevState => {

web/src/types.ts

@@ -25,6 +25,7 @@ export interface ExternalSource {
   url: string;
   tarmo_category: keyof CategoryFilters;
   zoomThreshold: number;
+  headers?: object;
   gqlQuery?: string;
   reload?: boolean;
 }