Replace mapbox with palvelukartta-iframe

- removes react-map-gl, mapbox-gl and mapboxToken

Author: vincit-matu

apps/ui/README.md

@@ -43,7 +43,6 @@ See `.env.local.example` and Azure DevOps library for values.
 | NEXT_PUBLIC_BASE_URL           | application baseUrl                                             |
 | TILAVARAUS_API_URL             | tilavaraus-core base url                                        |
 | PROFILE_UI_URL                 | helsinki profile frontend url for a link                        |
-| MAPBOX_TOKEN                   | token tor mapbox service                                        |
 | SENTRY_DSN                     | Sentry dsn                                                      |
 | SENTRY_ENVIRONMENT             | Sentry environment, for example 'test', 'prod'                  |
 | SENTRY_AUTH_TOKEN              | auth token for sentry cli                                       |

apps/ui/components/Map.tsx

@@ -1,65 +1,23 @@
-import React, { useState } from "react";
-import Image from "next/image";
-import ReactMapGL, { Marker, NavigationControl, ViewState } from "react-map-gl";
-import { mapStyle } from "../modules/const";
-import "mapbox-gl/dist/mapbox-gl.css";
+import React from "react";
+import { useTranslation } from "next-i18next";
+import { mapUrlPrefix } from "@/modules/const";
 
 type Props = {
-  title: string;
-  mapboxToken: string;
-  latitude?: number;
-  longitude?: number;
+  tprekId: string;
   height?: string;
 };
-const ZOOM = 14;
-
-const navControlStyle = {
-  right: 10,
-  bottom: 10,
-};
 
 export const Map = ({
-  title,
-  latitude,
-  longitude,
+  tprekId,
   height = "480px",
-  mapboxToken,
 }: Props): JSX.Element | null => {
-  const [viewport, setViewport] = useState({
-    latitude,
-    longitude,
-    zoom: ZOOM,
-  } as ViewState);
-
-  if (!latitude || !longitude) {
-    return null;
-  }
-
+  const { t, i18n } = useTranslation();
+  const mapUrl = `${mapUrlPrefix}${i18n.language}/embed/unit/${tprekId}`;
   return (
-    <ReactMapGL
-      {...viewport}
-      id="hel-osm-light"
-      mapStyle={mapStyle}
-      style={{ width: "100%", height }}
-      onMove={(event) => {
-        setViewport(event.viewState);
-      }}
-      initialViewState={{
-        longitude,
-        latitude,
-        zoom: ZOOM,
-      }}
-      mapboxAccessToken={mapboxToken}
-    >
-      <Marker
-        key={title}
-        longitude={longitude}
-        latitude={latitude}
-        anchor="bottom"
-      >
-        <NavigationControl style={navControlStyle} showCompass={false} />
-        <Image src="/icons/map_marker_icon.svg" height="42" width="32" alt="" />
-      </Marker>
-    </ReactMapGL>
+    <iframe
+      title={t("reservationUnit:mapTitle")}
+      style={{ border: "none", width: "100%", height }}
+      src={mapUrl}
+    />
   );
 };

apps/ui/components/reservation-unit/Address.tsx

@@ -7,6 +7,7 @@ import { IconLinkExternal } from "hds-react";
 import { IconButton } from "common/src/components";
 import type { ReservationUnitNode } from "common";
 import { getTranslation } from "../../modules/util";
+import { mapUrlPrefix } from "@/modules/const";
 
 type Props = {
   reservationUnit: ReservationUnitNode;
@@ -87,7 +88,7 @@ function createMapUrl(locale: string, unit?: Maybe<UnitType>): string {
     return "";
   }
 
-  return `https://palvelukartta.hel.fi/${locale}/unit/${unit.tprekId}`;
+  return `${mapUrlPrefix}${locale}/unit/${unit.tprekId}`;
 }
 
 function createAccessibilityUrl(

apps/ui/modules/const.ts

@@ -1,6 +1,5 @@
 import { i18n } from "next-i18next";
 import { OptionType } from "common/types/common";
-import { MapboxStyle } from "react-map-gl";
 
 export { isBrowser } from "common/src/helpers";
 export { getSignInUrl, getSignOutUrl } from "common/src/urlBuilder";
@@ -16,26 +15,7 @@ export const reservationsPrefix = "/reservations";
 export const criteriaPrefix = "/criteria";
 export const parametersPrefix = "/parameters";
 
-export const mapStyle: MapboxStyle = {
-  version: 8,
-  name: "hel-osm-light",
-  metadata: {},
-  sources: {
-    osm: {
-      type: "raster",
-      tiles: ["https://tiles.hel.ninja/styles/hel-osm-light/{z}/{x}/{y}.png"],
-      minzoom: 0,
-      maxzoom: 20,
-    },
-  },
-  layers: [
-    {
-      id: "osm",
-      type: "raster",
-      source: "osm",
-    },
-  ],
-};
+export const mapUrlPrefix = "https://palvelukartta.hel.fi/";
 
 export const reservationUnitPath = (id: number): string =>
   `${reservationUnitPrefix}/${id}`;

apps/ui/modules/serverUtils.ts

@@ -16,15 +16,13 @@ export function getCommonServerSideProps() {
   const hotjarEnabled = env.HOTJAR_ENABLED ?? false;
   const profileLink = env.PROFILE_UI_URL ?? "";
   const apiBaseUrl = env.TILAVARAUS_API_URL ?? "";
-  const mapboxToken = env.MAPBOX_TOKEN ?? "";
 
   return {
     cookiehubEnabled,
     matomoEnabled,
     hotjarEnabled,
     profileLink,
     apiBaseUrl,
-    mapboxToken,
   };
 }
 

apps/ui/package.json

@@ -31,7 +31,6 @@
     "hds-react": "^2.17.1",
     "i18next": "^23.10.1",
     "lodash": "^4.17.21",
-    "mapbox-gl": "^3.2.0",
     "next": "14.1.4",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^15.2.0",
@@ -42,7 +41,6 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.51.2",
     "react-i18next": "^14.1.0",
-    "react-map-gl": "^7.1.7",
     "react-transition-group": "^4.4.5",
     "react-use": "^17.5.0",
     "sanitize-html": "^2.13.0",
@@ -62,7 +60,6 @@
     "@types/node": "^18.18.8",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
-    "@types/react-map-gl": "^6.1.6",
     "@types/react-transition-group": "^4.4.10",
     "@types/sanitize-html": "^2.11.0",
     "@types/styled-components": "^5.1.29",

apps/ui/pages/reservation-unit/[id].tsx

@@ -377,7 +377,6 @@ const ReservationUnit = ({
   activeApplicationRounds,
   termsOfUse,
   isPostLogin,
-  mapboxToken,
   apiBaseUrl,
 }: PropsNarrowed): JSX.Element | null => {
   const { t, i18n } = useTranslation();
@@ -1089,18 +1088,13 @@ const ReservationUnit = ({
                 </PaddedContent>
               </Accordion>
             )}
-            {reservationUnit.unit?.location && (
+            {reservationUnit.unit?.tprekId && (
               <Accordion heading={t("common:location")} theme="thin" open>
                 <JustForMobile customBreakpoint={breakpoints.l}>
                   <AddressSection reservationUnit={reservationUnit} />
                 </JustForMobile>
                 <MapWrapper>
-                  <Map
-                    title={getTranslation(reservationUnit.unit, "name")}
-                    latitude={Number(reservationUnit.unit.location.latitude)}
-                    longitude={Number(reservationUnit.unit.location.longitude)}
-                    mapboxToken={mapboxToken}
-                  />
+                  <Map tprekId={reservationUnit.unit?.tprekId ?? ""} />
                 </MapWrapper>
               </Accordion>
             )}

apps/ui/public/locales/en/reservationUnit.json

@@ -5,6 +5,7 @@
   "maxDuration": "Duration",
   "price": "Price",
   "billableHours": "Chargeable hours",
+  "mapTitle": "Service Map - location",
   "linkMap": "Open map in a new window",
   "linkHSL": "HSL Route Guide",
   "linkGoogle": "Google Directions",

apps/ui/public/locales/fi/reservationUnit.json

@@ -5,6 +5,7 @@
   "maxDuration": "Varauksen kesto",
   "price": "Hinta",
   "billableHours": "Maksulliset tunnit",
+  "mapTitle": "Palvelukartta - sijainti",
   "linkMap": "Avaa kartta uuteen ikkunaan",
   "linkHSL": "HSL Reittiopas",
   "linkGoogle": "Google reittiohjeet",

apps/ui/public/locales/sv/reservationUnit.json

@@ -5,6 +5,7 @@
   "maxDuration": "Bokningens varaktighet",
   "price": "Pris",
   "billableHours": "Avgiftsbelagda timmar",
+  "mapTitle": "Servicekarta - verksamhetsställe",
   "linkMap": "Öppna kartan i ett nytt fönster",
   "linkHSL": "HRT Reseplaneraren",
   "linkGoogle": "Google vägbeskrivningar",