From 29d9707b7dd36d956511356cb7a98b8babec9e01 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 10 Apr 2024 12:02:40 +0300
Subject: [PATCH 01/32] Add components that render school accessibility areas

---
 package-lock.json                             | 13 +++
 package.json                                  |  1 +
 .../AccessibilityAreas/AccessibilityAreas.js  | 66 +++++++++++++
 .../AccessibilityAreas/index.js               |  3 +
 src/context/MobilityPlatformContext.js        |  3 +
 src/i18n/en.js                                |  3 +-
 src/i18n/fi.js                                |  3 +-
 src/i18n/sv.js                                |  3 +-
 .../MobilityPlatformMapView.js                |  2 +
 .../MobilityToggleButton.js                   |  1 -
 src/views/UnitView/UnitView.js                | 18 +++-
 .../AccessibilityAreasInfo.js                 | 67 +++++++++++++
 .../AccessibilityAreasToggle.js               | 93 +++++++++++++++++++
 .../AccessibilityAreasToggle/index.js         |  3 +
 .../AccessibilityAreasInfo/index.js           |  3 +
 15 files changed, 273 insertions(+), 9 deletions(-)
 create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
 create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/index.js
 create mode 100644 src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
 create mode 100644 src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js
 create mode 100644 src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/index.js
 create mode 100644 src/views/UnitView/components/AccessibilityAreasInfo/index.js

diff --git a/package-lock.json b/package-lock.json
index 32fda84c2..d6a4f52e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@datapunt/matomo-tracker-js": "^0.5.1",
+        "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.10.8",
         "@emotion/styled": "^11.10.8",
         "@formatjs/intl-pluralrules": "^1.5.9",
@@ -2312,6 +2313,18 @@
         "stylis": "4.2.0"
       }
     },
+    "node_modules/@emotion/css": {
+      "version": "11.11.2",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.11.2.tgz",
+      "integrity": "sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==",
+      "dependencies": {
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1"
+      }
+    },
     "node_modules/@emotion/hash": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
diff --git a/package.json b/package.json
index 05f703c6c..759e91263 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@datapunt/matomo-tracker-js": "^0.5.1",
+    "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.10.8",
     "@emotion/styled": "^11.10.8",
     "@formatjs/intl-pluralrules": "^1.5.9",
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
new file mode 100644
index 000000000..89faf3680
--- /dev/null
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -0,0 +1,66 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useMap } from 'react-leaflet';
+import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
+import { useAccessibleMap } from '../../../redux/selectors/settings';
+import useMobilityDataFetch from '../utils/useMobilityDataFetch';
+import {
+  isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase,
+} from '../utils/utils';
+import PolygonComponent from '../PolygonComponent';
+
+/**
+ * Displays school accessibility areas on the map in polygon format.
+ */
+
+const AccessibilityAreas = () => {
+  const options = {
+    type_name: 'SchoolAndKindergartenAccessibilityArea',
+    latlon: true,
+    page_size: 150,
+  };
+  const { showAccessibilityAreas } = useMobilityPlatformContext();
+
+  const selectedUnit = useSelector(state => state.selectedUnit?.unit?.data);
+  const unitName = selectedUnit?.name?.fi;
+  const useContrast = useSelector(useAccessibleMap);
+
+  const map = useMap();
+
+  const blueOptions = blueOptionsBase({ weight: 5 });
+  const whiteOptions = whiteOptionsBase({
+    fillOpacity: 0.3,
+    weight: 5,
+    dashArray: '12',
+  });
+  const pathOptions = useContrast ? whiteOptions : blueOptions;
+
+  const { data } = useMobilityDataFetch(options, showAccessibilityAreas);
+
+  const filteredAreas = data.filter(item => item.name === unitName);
+  const renderData = isDataValid(showAccessibilityAreas, filteredAreas);
+
+  useEffect(() => {
+    fitPolygonsToBounds(renderData, filteredAreas, map);
+  }, [showAccessibilityAreas, filteredAreas]);
+
+  return (
+    renderData
+      ? filteredAreas.map(item => (
+        <PolygonComponent
+          key={item.id}
+          item={item}
+          useContrast={useContrast}
+          pathOptions={pathOptions}
+        >
+          <p>{item.name}</p>
+          <p>{item.extra.Kulkumuoto}</p>
+          <p>{item.extra.Minuutit}</p>
+        </PolygonComponent>
+      ))
+      : null
+  );
+};
+
+export default AccessibilityAreas;
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/index.js b/src/components/MobilityPlatform/AccessibilityAreas/index.js
new file mode 100644
index 000000000..7ec4f14f7
--- /dev/null
+++ b/src/components/MobilityPlatform/AccessibilityAreas/index.js
@@ -0,0 +1,3 @@
+import AccessibilityAreas from './AccessibilityAreas';
+
+export default AccessibilityAreas;
diff --git a/src/context/MobilityPlatformContext.js b/src/context/MobilityPlatformContext.js
index aa9de8073..043bb81a6 100644
--- a/src/context/MobilityPlatformContext.js
+++ b/src/context/MobilityPlatformContext.js
@@ -103,6 +103,7 @@ const MobilityPlatformContextProvider = ({ children }) => {
   const [showUnderpasses, setShowUnderpasses] = useState(false);
   const [showPublicBenches, setShowPublicBenches] = useState(false);
   const [showRoadworks, setShowRoadworks] = useState(false);
+  const [showAccessibilityAreas, setShowAccessibilityAreas] = useState(false);
 
   const getters = {
     openMobilityPlatform,
@@ -172,6 +173,7 @@ const MobilityPlatformContextProvider = ({ children }) => {
     showUnderpasses,
     showPublicBenches,
     showRoadworks,
+    showAccessibilityAreas,
   };
 
   const setters = {
@@ -242,6 +244,7 @@ const MobilityPlatformContextProvider = ({ children }) => {
     setShowOverpasses,
     setShowPublicBenches,
     setShowRoadworks,
+    setShowAccessibilityAreas,
   };
 
   const contextValues = { ...getters, ...setters };
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 4717311c5..d6c093e72 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -461,7 +461,7 @@ const translations = {
   'unit.details.notFound': 'Service point info not available.',
   'unit.plural': 'Service points',
   'unit.distance': 'Distance',
-
+  'unit.accessibilityAreas': 'Accessibility areas',
   'unit.contact.info': 'Contact information',
   'unit.links': 'Web sites',
   'unit.eServices': 'Electronic services',
@@ -526,6 +526,7 @@ const translations = {
   'unit.outdoorLink': 'Check the condition of an exercise location in the ulkoliikunta.fi service',
   'unit.seo.description': 'View service point on the map',
   'unit.seo.description.accessibility': 'View accessibility info and service point on the map',
+  'unit.accessibilityAreas.all.label': 'All accessibility areas',
 
   // Search
   'search': 'Search',
diff --git a/src/i18n/fi.js b/src/i18n/fi.js
index 83a5c7a15..aea7ab3a4 100644
--- a/src/i18n/fi.js
+++ b/src/i18n/fi.js
@@ -464,7 +464,7 @@ const translations = {
   'unit.details.notFound': 'Toimipisteen tietoja ei saatavilla.',
   'unit.plural': 'Toimipisteet',
   'unit.distance': 'Etäisyys: ',
-
+  'unit.accessibilityAreas': 'Lähestymisalueet',
   'unit.contact.info': 'Yhteystiedot',
   'unit.links': 'Verkossa',
   'unit.eServices': 'Sähköinen asiointi',
@@ -530,6 +530,7 @@ const translations = {
   'unit.outdoorLink': 'Katso liikuntapaikan kunto ulkoliikunta.fi palvelusta',
   'unit.seo.description': 'Katso sijainti kartalla',
   'unit.seo.description.accessibility': 'Katso esteettömyystiedot ja sijainti kartalla',
+  'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet',
 
   // Search
   'search': 'Hae',
diff --git a/src/i18n/sv.js b/src/i18n/sv.js
index eb942f088..cc33d50bb 100644
--- a/src/i18n/sv.js
+++ b/src/i18n/sv.js
@@ -465,7 +465,7 @@ const translations = {
   'unit.details.notFound': 'Verksamhetsställets uppgifter finns inte att tillgå.',
   'unit.plural': 'Verksamhetsställen',
   'unit.distance': 'Avstånd',
-
+  'unit.accessibilityAreas': 'Tillgänglighetsområden',
   'unit.contact.info': 'Kontaktuppgifter',
   'unit.links': 'På webben',
   'unit.eServices': 'E-tjänster',
@@ -530,6 +530,7 @@ const translations = {
   'unit.outdoorLink': 'Kolla skicket på en motionsplats i tjänsten ulkoliikunta.fi',
   'unit.seo.description': 'Se läget på kartan',
   'unit.seo.description.accessibility': 'Se tillgänglighetsuppgifterna och läget på kartan',
+  'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden',
 
   // Search
   'search': 'Sök',
diff --git a/src/views/MobilityPlatformMapView/MobilityPlatformMapView.js b/src/views/MobilityPlatformMapView/MobilityPlatformMapView.js
index 918e8c499..4e63ef4a3 100644
--- a/src/views/MobilityPlatformMapView/MobilityPlatformMapView.js
+++ b/src/views/MobilityPlatformMapView/MobilityPlatformMapView.js
@@ -38,6 +38,7 @@ import Roadworks from '../../components/MobilityPlatform/Roadworks';
 import RailwayStations from '../../components/MobilityPlatform/RailwayStations';
 import AirMonitoring from '../../components/MobilityPlatform/EnvironmentObservations/AirMonitoring';
 import ParkAndRideBikes from '../../components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes';
+import AccessibilityAreas from '../../components/MobilityPlatform/AccessibilityAreas';
 
 const MobilityPlatformMapView = ({ mapObject }) => (
   <>
@@ -79,6 +80,7 @@ const MobilityPlatformMapView = ({ mapObject }) => (
     <RailwayStations />
     <AirMonitoring />
     <ParkAndRideBikes />
+    <AccessibilityAreas />
   </>
 );
 
diff --git a/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js b/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js
index 42c651943..707e45e72 100644
--- a/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js
+++ b/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js
@@ -29,7 +29,6 @@ const MobilityToggleButton = ({
         role: 'button',
         'aria-setsize': selectionSize ? selectionSize.toString() : null,
         'aria-pressed': checkedValue,
-        'aria-labelledby': msgId,
       }}
       onChange={(e) => onChangeValue(e)}
       checked={checkedValue}
diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index 4ba2ac8d5..b2e24f9d2 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -43,8 +43,9 @@ import { parseSearchParams } from '../../utils';
 import { fetchServiceUnits } from '../../redux/actions/services';
 import MapView from '../MapView';
 import Util from '../../utils/mapUtility';
+import AccessibilityAreasInfo from './components/AccessibilityAreasInfo';
 
-const UnitView = (props) => {
+const UnitView = props => {
   const {
     distance,
     stateUnit,
@@ -98,7 +99,7 @@ const UnitView = (props) => {
 
   const initializePTVAccessibilitySentences = () => {
     if (unit) {
-      unit.identifiers.forEach((element) => {
+      unit.identifiers.forEach(element => {
         if (element.namespace === 'ptv') {
           const ptvId = element.value;
           fetchAccessibilitySentences(ptvId);
@@ -112,7 +113,7 @@ const UnitView = (props) => {
     const unitId = params.unit;
     // If no selected unit data, or selected unit data is old, fetch new data
     if (!stateUnit || !checkCorrectUnit(stateUnit) || !stateUnit.complete) {
-      fetchSelectedUnit(unitId, (unit) => {
+      fetchSelectedUnit(unitId, unit => {
         setUnit(unit);
         if (unit?.keywords?.fi?.includes('kuuluvuuskartta')) {
           fetchHearingMaps(unitId);
@@ -392,7 +393,7 @@ const UnitView = (props) => {
         className={classes.mapButton}
         aria-label={intl.formatMessage({ id: 'map.button.expand.aria' })}
         icon={<StyledMapIcon />}
-        onClick={(e) => {
+        onClick={e => {
           e.preventDefault();
           if (navigator) {
             navigator.openMap();
@@ -409,7 +410,6 @@ const UnitView = (props) => {
     </div>
   );
 
-
   const render = () => {
     const title = unit && unit.name ? getLocaleText(unit.name) : '';
     const onLinkOpenClick = () => {
@@ -486,6 +486,14 @@ const UnitView = (props) => {
           itemsPerPage: null,
           title: intl.formatMessage({ id: 'service.tab' }),
         },
+        {
+          id: 'accessibilityAreas',
+          ariaLabel: intl.formatMessage({ id: 'unit.accessibilityAreas' }),
+          component: <AccessibilityAreasInfo />,
+          data: null,
+          itemsPerPage: null,
+          title: intl.formatMessage({ id: 'unit.accessibilityAreas' }),
+        },
       ];
       return (
         <div>
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
new file mode 100644
index 000000000..716a3e001
--- /dev/null
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import styled from '@emotion/styled';
+import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext';
+import AccessibilityAreasToggle from './components/AccessibilityAreasToggle';
+import { Container } from '../../../../components';
+
+const AccessibilityAreasInfo = () => {
+  const { showAccessibilityAreas, setShowAccessibilityAreas } = useMobilityPlatformContext();
+
+  const accessibilityAreasToggle = () => {
+    setShowAccessibilityAreas(current => !current);
+  };
+
+  const settingsData = [
+    {
+      type: 'allAccessibilityAreas',
+      msgId: 'unit.accessibilityAreas.all.label',
+      checkedValue: showAccessibilityAreas,
+      onChangeValue: accessibilityAreasToggle,
+    },
+  ];
+
+  const renderSettings = () => settingsData.map(item => (
+    <StyledCheckBoxContainer key={item.type}>
+      <AccessibilityAreasToggle
+        msgId={item.msgId}
+        checkedValue={item.checkedValue}
+        onChangeValue={item.onChangeValue}
+        selectionSize={settingsData.length}
+      />
+    </StyledCheckBoxContainer>
+  ));
+
+  return (
+    <StyledContent>
+      <Container>
+        <Typography variant="title">
+          Lähestymisalueet
+        </Typography>
+      </Container>
+      <Container>
+        <Typography variant="body2" component="p">
+          Lähestymisalueet ovat...
+        </Typography>
+      </Container>
+      <Container>
+        {renderSettings()}
+      </Container>
+    </StyledContent>
+  );
+};
+
+const StyledContent = styled.div(({ theme }) => ({
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  paddingBottom: theme.spacing(2),
+}));
+
+const StyledCheckBoxContainer = styled.div(({ theme }) => ({
+  width: '100%',
+  backgroundColor: 'rgb(250, 250, 250)',
+  paddingTop: theme.spacing(1.5),
+  paddingBottom: theme.spacing(1.5),
+}));
+
+export default AccessibilityAreasInfo;
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js
new file mode 100644
index 000000000..61f876663
--- /dev/null
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js
@@ -0,0 +1,93 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import styled from '@emotion/styled';
+import { css } from '@emotion/css';
+import { SMSwitch } from '../../../../../../components';
+
+/**
+ * Render 1 or more switches.
+ * @property {string} msgId
+ * @property {boolean} checkedValue
+ * @property {Function} onChangeValue
+ * @return {JSX Element}
+ */
+
+const AccessibilityAreasToggle = ({
+  msgId, checkedValue, onChangeValue, selectionSize, inputProps, ...rest
+}) => {
+  const intl = useIntl();
+
+  const switchBorderClass = css({
+    border: '1px solid #949494',
+  });
+
+  return (
+    <StyledContainer>
+      <StyledSMSwitch
+        color="primary"
+        classes={{ thumb: switchBorderClass }}
+        size="small"
+        value={checkedValue}
+        inputProps={{
+          ...inputProps,
+          role: 'button',
+          'aria-setsize': selectionSize ? selectionSize.toString() : null,
+          'aria-pressed': checkedValue,
+        }}
+        onChange={e => onChangeValue(e)}
+        checked={checkedValue}
+        {...rest}
+      />
+      <StyledLabelContainer>
+        <Typography
+          variant="body2"
+          aria-label={intl.formatMessage({
+            id: msgId,
+          })}
+        >
+          {intl.formatMessage({
+            id: msgId,
+          })}
+        </Typography>
+      </StyledLabelContainer>
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled.div(({ theme }) => ({
+  paddingLeft: theme.spacing(2),
+  display: 'inline-flex',
+  alignItems: 'center',
+  marginLeft: theme.spacing(2),
+  verticalAlign: 'middle',
+}));
+
+const StyledLabelContainer = styled.div(({ theme }) => ({
+  marginLeft: theme.spacing(2),
+}));
+
+const StyledSMSwitch = styled(SMSwitch)(() => ({
+  overflow: 'visible',
+}));
+
+AccessibilityAreasToggle.propTypes = {
+  msgId: PropTypes.string,
+  checkedValue: PropTypes.bool,
+  onChangeValue: PropTypes.func.isRequired,
+  selectionSize: PropTypes.number,
+  inputProps: PropTypes.shape({
+    tabindex: PropTypes.string,
+  }),
+};
+
+AccessibilityAreasToggle.defaultProps = {
+  msgId: '',
+  checkedValue: false,
+  selectionSize: null,
+  inputProps: {},
+};
+
+export default AccessibilityAreasToggle;
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/index.js b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/index.js
new file mode 100644
index 000000000..982638667
--- /dev/null
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/index.js
@@ -0,0 +1,3 @@
+import AccessibilityAreasToggle from './AccessibilityAreasToggle';
+
+export default AccessibilityAreasToggle;
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/index.js b/src/views/UnitView/components/AccessibilityAreasInfo/index.js
new file mode 100644
index 000000000..e18c4e25a
--- /dev/null
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/index.js
@@ -0,0 +1,3 @@
+import AccessibilityAreasInfo from './AccessibilityAreasInfo';
+
+export default AccessibilityAreasInfo;

From c43291f6575423901a82cd7a29ea3f25c5c64db9 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 10 Apr 2024 12:54:27 +0300
Subject: [PATCH 02/32] Update render tab function & remove color

---
 src/views/UnitView/UnitView.js                       | 12 +++++++++++-
 .../AccessibilityAreasInfo/AccessibilityAreasInfo.js |  1 -
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index b2e24f9d2..c9133e5c3 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -356,6 +356,16 @@ const UnitView = props => {
     );
   };
 
+  const renderAccessibilityAreasTab = () => {
+    if (!unit || !unit.complete) {
+      return null;
+    }
+
+    return (
+      <AccessibilityAreasInfo />
+    );
+  };
+
   const renderHead = () => {
     if (!unit || !unit.complete) {
       return null;
@@ -489,7 +499,7 @@ const UnitView = props => {
         {
           id: 'accessibilityAreas',
           ariaLabel: intl.formatMessage({ id: 'unit.accessibilityAreas' }),
-          component: <AccessibilityAreasInfo />,
+          component: renderAccessibilityAreasTab(),
           data: null,
           itemsPerPage: null,
           title: intl.formatMessage({ id: 'unit.accessibilityAreas' }),
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
index 716a3e001..8be43efbd 100644
--- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
@@ -59,7 +59,6 @@ const StyledContent = styled.div(({ theme }) => ({
 
 const StyledCheckBoxContainer = styled.div(({ theme }) => ({
   width: '100%',
-  backgroundColor: 'rgb(250, 250, 250)',
   paddingTop: theme.spacing(1.5),
   paddingBottom: theme.spacing(1.5),
 }));

From 692974cc2b25a17d867262758f4bd6490f66c34e Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 10 Apr 2024 14:54:42 +0300
Subject: [PATCH 03/32] Filter & render areas by transport type

---
 .../AccessibilityAreas/AccessibilityAreas.js  | 32 +++++++++++++++----
 src/context/MobilityPlatformContext.js        |  8 ++++-
 src/i18n/en.js                                |  2 ++
 src/i18n/fi.js                                |  2 ++
 src/i18n/sv.js                                |  2 ++
 src/views/MapView/utils/updateObject.js       | 14 ++++++++
 .../AccessibilityAreasInfo.js                 | 25 +++++++++++++--
 7 files changed, 76 insertions(+), 9 deletions(-)
 create mode 100644 src/views/MapView/utils/updateObject.js

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 89faf3680..7e2586fdd 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -39,15 +39,27 @@ const AccessibilityAreas = () => {
   const { data } = useMobilityDataFetch(options, showAccessibilityAreas);
 
   const filteredAreas = data.filter(item => item.name === unitName);
-  const renderData = isDataValid(showAccessibilityAreas, filteredAreas);
+  const filteredAreasWalking = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('kävely'));
+  const filteredAreasCycling = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('pyöräily'));
+  const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas);
+  const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking);
+  const renderCycling = isDataValid(showAccessibilityAreas.cycling, filteredAreasCycling);
 
   useEffect(() => {
-    fitPolygonsToBounds(renderData, filteredAreas, map);
-  }, [showAccessibilityAreas, filteredAreas]);
+    fitPolygonsToBounds(renderAll, filteredAreas, map);
+  }, [showAccessibilityAreas.all, filteredAreas]);
 
-  return (
-    renderData
-      ? filteredAreas.map(item => (
+  useEffect(() => {
+    fitPolygonsToBounds(renderWalking, filteredAreasWalking, map);
+  }, [showAccessibilityAreas.walking, filteredAreasWalking]);
+
+  useEffect(() => {
+    fitPolygonsToBounds(renderCycling, filteredAreasCycling, map);
+  }, [showAccessibilityAreas.cycling, filteredAreasCycling]);
+
+  const renderPolygons = (showData, data) => (
+    showData
+      ? data.map(item => (
         <PolygonComponent
           key={item.id}
           item={item}
@@ -61,6 +73,14 @@ const AccessibilityAreas = () => {
       ))
       : null
   );
+
+  return (
+    <>
+      {renderPolygons(renderAll, filteredAreas)}
+      {renderPolygons(renderWalking, filteredAreasWalking)}
+      {renderPolygons(renderCycling, filteredAreasCycling)}
+    </>
+  );
 };
 
 export default AccessibilityAreas;
diff --git a/src/context/MobilityPlatformContext.js b/src/context/MobilityPlatformContext.js
index 043bb81a6..8a5720f5a 100644
--- a/src/context/MobilityPlatformContext.js
+++ b/src/context/MobilityPlatformContext.js
@@ -22,6 +22,12 @@ const trafficCountersInitial = {
   driving: false,
 };
 
+const accessibilityAreasInitial = {
+  all: false,
+  walking: false,
+  cycling: false,
+};
+
 const MobilityPlatformContextProvider = ({ children }) => {
   // Check if mobility platform is open or not
   const [openMobilityPlatform, setOpenMobilityPlatform] = useState(false);
@@ -103,7 +109,7 @@ const MobilityPlatformContextProvider = ({ children }) => {
   const [showUnderpasses, setShowUnderpasses] = useState(false);
   const [showPublicBenches, setShowPublicBenches] = useState(false);
   const [showRoadworks, setShowRoadworks] = useState(false);
-  const [showAccessibilityAreas, setShowAccessibilityAreas] = useState(false);
+  const [showAccessibilityAreas, setShowAccessibilityAreas] = useState(accessibilityAreasInitial);
 
   const getters = {
     openMobilityPlatform,
diff --git a/src/i18n/en.js b/src/i18n/en.js
index d6c093e72..daa0f1958 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -527,6 +527,8 @@ const translations = {
   'unit.seo.description': 'View service point on the map',
   'unit.seo.description.accessibility': 'View accessibility info and service point on the map',
   'unit.accessibilityAreas.all.label': 'All accessibility areas',
+  'unit.accessibilityAreas.walking.label': 'Accessibility areas (walking)',
+  'unit.accessibilityAreas.cycling.label': 'Accessibility areas (cycling)',
 
   // Search
   'search': 'Search',
diff --git a/src/i18n/fi.js b/src/i18n/fi.js
index aea7ab3a4..324c6ce82 100644
--- a/src/i18n/fi.js
+++ b/src/i18n/fi.js
@@ -531,6 +531,8 @@ const translations = {
   'unit.seo.description': 'Katso sijainti kartalla',
   'unit.seo.description.accessibility': 'Katso esteettömyystiedot ja sijainti kartalla',
   'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet',
+  'unit.accessibilityAreas.walking.label': 'Lähestymisalueet (kävely)',
+  'unit.accessibilityAreas.cycling.label': 'Lähestymisalueet (pyöräily)',
 
   // Search
   'search': 'Hae',
diff --git a/src/i18n/sv.js b/src/i18n/sv.js
index cc33d50bb..8fa74a7f5 100644
--- a/src/i18n/sv.js
+++ b/src/i18n/sv.js
@@ -531,6 +531,8 @@ const translations = {
   'unit.seo.description': 'Se läget på kartan',
   'unit.seo.description.accessibility': 'Se tillgänglighetsuppgifterna och läget på kartan',
   'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden',
+  'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområden (promenad)',
+  'unit.accessibilityAreas.cycling.label': 'Tillgänglighetsområden (cykling)',
 
   // Search
   'search': 'Sök',
diff --git a/src/views/MapView/utils/updateObject.js b/src/views/MapView/utils/updateObject.js
new file mode 100644
index 000000000..9f87083c9
--- /dev/null
+++ b/src/views/MapView/utils/updateObject.js
@@ -0,0 +1,14 @@
+/**
+   * General function to update object values into state
+   * @param {*string} key
+   * @param {*Object} state
+   * @param {*function} setState
+   */
+const toggleObjectValue = (key, state, setState) => {
+  setState(prevState => ({
+    ...prevState,
+    [key]: !prevState[key],
+  }));
+};
+
+export default toggleObjectValue;
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
index 8be43efbd..5058bceff 100644
--- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
@@ -3,22 +3,43 @@ import { Typography } from '@mui/material';
 import styled from '@emotion/styled';
 import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext';
 import AccessibilityAreasToggle from './components/AccessibilityAreasToggle';
+import toggleObjectValue from '../../../MapView/utils/updateObject';
 import { Container } from '../../../../components';
 
 const AccessibilityAreasInfo = () => {
   const { showAccessibilityAreas, setShowAccessibilityAreas } = useMobilityPlatformContext();
 
   const accessibilityAreasToggle = () => {
-    setShowAccessibilityAreas(current => !current);
+    toggleObjectValue('all', showAccessibilityAreas, setShowAccessibilityAreas);
+  };
+
+  const accessibilityAreasWalkingToggle = () => {
+    toggleObjectValue('walking', showAccessibilityAreas, setShowAccessibilityAreas);
+  };
+
+  const accessibilityAreasCyclingToggle = () => {
+    toggleObjectValue('cycling', showAccessibilityAreas, setShowAccessibilityAreas);
   };
 
   const settingsData = [
     {
       type: 'allAccessibilityAreas',
       msgId: 'unit.accessibilityAreas.all.label',
-      checkedValue: showAccessibilityAreas,
+      checkedValue: showAccessibilityAreas.all,
       onChangeValue: accessibilityAreasToggle,
     },
+    {
+      type: 'accessibilityAreasWalking',
+      msgId: 'unit.accessibilityAreas.walking.label',
+      checkedValue: showAccessibilityAreas.walking,
+      onChangeValue: accessibilityAreasWalkingToggle,
+    },
+    {
+      type: 'accessibilityAreasCycling',
+      msgId: 'unit.accessibilityAreas.cycling.label',
+      checkedValue: showAccessibilityAreas.cycling,
+      onChangeValue: accessibilityAreasCyclingToggle,
+    },
   ];
 
   const renderSettings = () => settingsData.map(item => (

From 696c404b236fd51d6da76168f5ef3fb84b4c5456 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 10 Apr 2024 15:36:44 +0300
Subject: [PATCH 04/32] Set polygon color based on transport type

---
 .../AccessibilityAreas/AccessibilityAreas.js  | 23 ++++++++++++++++---
 .../MobilityPlatform/utils/utils.js           |  8 ++++---
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 7e2586fdd..a58eb412e 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -6,7 +6,8 @@ import { useMobilityPlatformContext } from '../../../context/MobilityPlatformCon
 import { useAccessibleMap } from '../../../redux/selectors/settings';
 import useMobilityDataFetch from '../utils/useMobilityDataFetch';
 import {
-  isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase,
+  isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase, greenOptionsBase,
+  blackOptionsBase,
 } from '../utils/utils';
 import PolygonComponent from '../PolygonComponent';
 
@@ -29,12 +30,28 @@ const AccessibilityAreas = () => {
   const map = useMap();
 
   const blueOptions = blueOptionsBase({ weight: 5 });
+  const greenOptions = greenOptionsBase({ weight: 5 });
+  const blackOptions = blackOptionsBase({ weight: 5 });
   const whiteOptions = whiteOptionsBase({
     fillOpacity: 0.3,
     weight: 5,
     dashArray: '12',
   });
-  const pathOptions = useContrast ? whiteOptions : blueOptions;
+
+  const getPathOptions = transportType => {
+    if (transportType.includes('kävely')) {
+      return blueOptions;
+    }
+    if (transportType.includes('pyöräily')) {
+      return greenOptions;
+    }
+    if (useContrast) {
+      return whiteOptions;
+    }
+    return blackOptions;
+  };
+
+  // const pathOptions = useContrast ? whiteOptions : blueOptions;
 
   const { data } = useMobilityDataFetch(options, showAccessibilityAreas);
 
@@ -64,7 +81,7 @@ const AccessibilityAreas = () => {
           key={item.id}
           item={item}
           useContrast={useContrast}
-          pathOptions={pathOptions}
+          pathOptions={getPathOptions(item.extra.Kulkumuoto)}
         >
           <p>{item.name}</p>
           <p>{item.extra.Kulkumuoto}</p>
diff --git a/src/components/MobilityPlatform/utils/utils.js b/src/components/MobilityPlatform/utils/utils.js
index b16ab830d..6e0d4d9c9 100644
--- a/src/components/MobilityPlatform/utils/utils.js
+++ b/src/components/MobilityPlatform/utils/utils.js
@@ -14,7 +14,7 @@ const isDataValid = (visibilityValue, data) => visibilityValue && data && data.l
  */
 const isObjValid = (visibilityValue, obj) => visibilityValue && obj && Object.entries(obj).length > 0;
 
-const createIcon = (icon) => ({
+const createIcon = icon => ({
   iconUrl: icon,
   iconSize: [45, 45],
 });
@@ -24,6 +24,7 @@ const blackOptionsBase = (attrs = {}) => ({ color: 'rgba(0, 0, 0, 255)', ...attr
 const blueOptionsBase = (attrs = {}) => ({ color: 'rgba(7, 44, 115, 255)', ...attrs });
 const redOptionsBase = (attrs = {}) => ({ color: 'rgba(251, 5, 21, 255)', ...attrs });
 const grayOptionsBase = (attrs = {}) => ({ color: 'rgba(64, 64, 64, 255)', ...attrs });
+const greenOptionsBase = (attrs = {}) => ({ color: 'rgba(15, 115, 6, 255)', ...attrs });
 
 /**
  * Return arrays of coordinates that fit markers inside map bounds
@@ -35,7 +36,7 @@ const grayOptionsBase = (attrs = {}) => ({ color: 'rgba(64, 64, 64, 255)', ...at
 const fitToMapBounds = (renderData, data, map) => {
   if (renderData) {
     const bounds = [];
-    data.forEach((item) => {
+    data.forEach(item => {
       bounds.push([item.geometry_coords.lat, item.geometry_coords.lon]);
     });
     map.fitBounds(bounds);
@@ -52,7 +53,7 @@ const fitToMapBounds = (renderData, data, map) => {
 const fitPolygonsToBounds = (renderData, data, map) => {
   if (renderData) {
     const bounds = [];
-    data.forEach((item) => {
+    data.forEach(item => {
       bounds.push(item.geometry_coords);
     });
     map.fitBounds(bounds);
@@ -100,6 +101,7 @@ export {
   blueOptionsBase,
   redOptionsBase,
   grayOptionsBase,
+  greenOptionsBase,
   fitToMapBounds,
   fitPolygonsToBounds,
   setRender,

From 04f0a433d563c298bf5eabca98e3ce3cc1f2763e Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Thu, 11 Apr 2024 09:54:58 +0300
Subject: [PATCH 05/32] Add dash array values

---
 .../MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index a58eb412e..3e2cecf90 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -29,8 +29,8 @@ const AccessibilityAreas = () => {
 
   const map = useMap();
 
-  const blueOptions = blueOptionsBase({ weight: 5 });
-  const greenOptions = greenOptionsBase({ weight: 5 });
+  const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3' });
+  const greenOptions = greenOptionsBase({ weight: 5, dashArray: '4 6 8' });
   const blackOptions = blackOptionsBase({ weight: 5 });
   const whiteOptions = whiteOptionsBase({
     fillOpacity: 0.3,

From ac253dceb5a38fd6dd0a93acdbdfa6235d7501ff Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Thu, 11 Apr 2024 11:18:51 +0300
Subject: [PATCH 06/32] Move content of accessibility areas into component

---
 .../AccessibilityAreas/AccessibilityAreas.js  |  5 +-
 .../AccessibilityAreasContent.js              | 70 +++++++++++++++++++
 .../AccessibilityAreasContent/index.js        |  3 +
 src/i18n/en.js                                |  3 +
 src/i18n/fi.js                                |  3 +
 src/i18n/sv.js                                |  3 +
 .../AccessibilityAreasInfo.js                 |  2 +-
 7 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
 create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/index.js

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 3e2cecf90..40ab25b05 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -10,6 +10,7 @@ import {
   blackOptionsBase,
 } from '../utils/utils';
 import PolygonComponent from '../PolygonComponent';
+import AccessibilityAreasContent from './components/AccessibilityAreasContent';
 
 /**
  * Displays school accessibility areas on the map in polygon format.
@@ -83,9 +84,7 @@ const AccessibilityAreas = () => {
           useContrast={useContrast}
           pathOptions={getPathOptions(item.extra.Kulkumuoto)}
         >
-          <p>{item.name}</p>
-          <p>{item.extra.Kulkumuoto}</p>
-          <p>{item.extra.Minuutit}</p>
+          <AccessibilityAreasContent item={item} />
         </PolygonComponent>
       ))
       : null
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
new file mode 100644
index 000000000..cecdabb75
--- /dev/null
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
+import { Typography } from '@mui/material';
+import { useIntl } from 'react-intl';
+
+const AccessibilityAreasContent = ({ item }) => {
+  const intl = useIntl();
+
+  const contentInfo = (
+    <StyledContainer>
+      <StyledHeaderContainer>
+        <Typography variant="subtitle1" component="h4">
+          {item.name_fi}
+        </Typography>
+      </StyledHeaderContainer>
+      <StyledTextContainer>
+        <StyledMargin>
+          <Typography variant="subtitle2" component="p">
+            {intl.formatMessage({ id: 'unit.accessibilityAreas.content.subtitle' })}
+          </Typography>
+        </StyledMargin>
+        <StyledMargin>
+          <Typography variant="body2" component="p">
+            {intl.formatMessage({ id: 'unit.accessibilityAreas.content.transport' }, { value: item.extra.Kulkumuoto })}
+          </Typography>
+          <Typography variant="body2" component="p">
+            {intl.formatMessage({ id: 'unit.accessibilityAreas.content.duration' }, { value: item.extra.Minuutit })}
+          </Typography>
+        </StyledMargin>
+      </StyledTextContainer>
+    </StyledContainer>
+  );
+
+  return <StyledContainer>{contentInfo}</StyledContainer>;
+};
+
+const StyledContainer = styled.div(({ theme }) => ({
+  margin: theme.spacing(1),
+}));
+
+const StyledHeaderContainer = styled.div(({ theme }) => ({
+  width: '85%',
+  borderBottom: '1px solid #000',
+  paddingBottom: theme.spacing(0.5),
+}));
+
+const StyledTextContainer = styled.div(({ theme }) => ({
+  marginTop: theme.spacing(0.5),
+}));
+
+const StyledMargin = styled.div(({ theme }) => ({
+  margin: theme.spacing(0.4),
+}));
+
+AccessibilityAreasContent.propTypes = {
+  item: PropTypes.shape({
+    name_fi: PropTypes.string,
+    extra: PropTypes.shape({
+      Kulkumuoto: PropTypes.string,
+      Minuutit: PropTypes.number,
+    }),
+  }),
+};
+
+AccessibilityAreasContent.defaultProps = {
+  item: {},
+};
+
+export default AccessibilityAreasContent;
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/index.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/index.js
new file mode 100644
index 000000000..2d5f73b4b
--- /dev/null
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/index.js
@@ -0,0 +1,3 @@
+import AccessibilityAreasContent from './AccessibilityAreasContent';
+
+export default AccessibilityAreasContent;
diff --git a/src/i18n/en.js b/src/i18n/en.js
index daa0f1958..8b97a867b 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -529,6 +529,9 @@ const translations = {
   'unit.accessibilityAreas.all.label': 'All accessibility areas',
   'unit.accessibilityAreas.walking.label': 'Accessibility areas (walking)',
   'unit.accessibilityAreas.cycling.label': 'Accessibility areas (cycling)',
+  'unit.accessibilityAreas.content.subtitle': 'Accessibility area:',
+  'unit.accessibilityAreas.content.transport': 'Mode of transport: {value}', // TODO verify
+  'unit.accessibilityAreas.content.duration': 'Estimated duration: {value} minutes', // TODO verify
 
   // Search
   'search': 'Search',
diff --git a/src/i18n/fi.js b/src/i18n/fi.js
index 324c6ce82..c4ab84d48 100644
--- a/src/i18n/fi.js
+++ b/src/i18n/fi.js
@@ -533,6 +533,9 @@ const translations = {
   'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet',
   'unit.accessibilityAreas.walking.label': 'Lähestymisalueet (kävely)',
   'unit.accessibilityAreas.cycling.label': 'Lähestymisalueet (pyöräily)',
+  'unit.accessibilityAreas.content.subtitle': 'Lähestymisalue:',
+  'unit.accessibilityAreas.content.transport': 'Kulkumuto: {value}', // TODO verify
+  'unit.accessibilityAreas.content.duration': 'Arvioitu aika: {value} minuuttia', // TODO verify
 
   // Search
   'search': 'Hae',
diff --git a/src/i18n/sv.js b/src/i18n/sv.js
index 8fa74a7f5..83a352f05 100644
--- a/src/i18n/sv.js
+++ b/src/i18n/sv.js
@@ -533,6 +533,9 @@ const translations = {
   'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden',
   'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområden (promenad)',
   'unit.accessibilityAreas.cycling.label': 'Tillgänglighetsområden (cykling)',
+  'unit.accessibilityAreas.content.subtitle': 'Tillgänglighetsområd:',
+  'unit.accessibilityAreas.content.transport': 'Transportsätt: {value}', // TODO verify
+  'unit.accessibilityAreas.content.duration': 'beräknad varaktighet: {value} minuter', // TODO verify
 
   // Search
   'search': 'Sök',
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
index 5058bceff..e7c60eaec 100644
--- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
@@ -56,7 +56,7 @@ const AccessibilityAreasInfo = () => {
   return (
     <StyledContent>
       <Container>
-        <Typography variant="title">
+        <Typography variant="subtitle1" component="h4">
           Lähestymisalueet
         </Typography>
       </Container>

From 4056ad2ca6fb7dca4686ff8434805ddbade6d648 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 12 Apr 2024 12:11:47 +0300
Subject: [PATCH 07/32] Update styles & add new texts

---
 src/i18n/en.js                                |  2 ++
 src/i18n/fi.js                                |  2 ++
 src/i18n/sv.js                                |  2 ++
 .../AccessibilityAreasInfo.js                 | 20 ++++++++++++-------
 .../AccessibilityAreasToggle.js               |  4 ++--
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/i18n/en.js b/src/i18n/en.js
index 891b6105b..576a1dd0a 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -526,6 +526,8 @@ const translations = {
   'unit.outdoorLink': 'Check the condition of an exercise location in the ulkoliikunta.fi service',
   'unit.seo.description': 'View service point on the map',
   'unit.seo.description.accessibility': 'View accessibility info and service point on the map',
+  'unit.accessibilityAreas.title': 'Accessibility areas',
+  'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text
   'unit.accessibilityAreas.all.label': 'All accessibility areas',
   'unit.accessibilityAreas.walking.label': 'Accessibility areas (walking)',
   'unit.accessibilityAreas.cycling.label': 'Accessibility areas (cycling)',
diff --git a/src/i18n/fi.js b/src/i18n/fi.js
index 5ccdbaed7..2bb65d7cf 100644
--- a/src/i18n/fi.js
+++ b/src/i18n/fi.js
@@ -530,6 +530,8 @@ const translations = {
   'unit.outdoorLink': 'Katso liikuntapaikan kunto ulkoliikunta.fi palvelusta',
   'unit.seo.description': 'Katso sijainti kartalla',
   'unit.seo.description.accessibility': 'Katso esteettömyystiedot ja sijainti kartalla',
+  'unit.accessibilityAreas.title': 'Lähestymisalueet',
+  'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text
   'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet',
   'unit.accessibilityAreas.walking.label': 'Lähestymisalueet (kävely)',
   'unit.accessibilityAreas.cycling.label': 'Lähestymisalueet (pyöräily)',
diff --git a/src/i18n/sv.js b/src/i18n/sv.js
index 0353c2c4a..3c1d06182 100644
--- a/src/i18n/sv.js
+++ b/src/i18n/sv.js
@@ -530,6 +530,8 @@ const translations = {
   'unit.outdoorLink': 'Kolla skicket på en motionsplats i tjänsten ulkoliikunta.fi',
   'unit.seo.description': 'Se läget på kartan',
   'unit.seo.description.accessibility': 'Se tillgänglighetsuppgifterna och läget på kartan',
+  'unit.accessibilityAreas.title': 'Tillgänglighetsområden',
+  'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text
   'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden',
   'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområden (promenad)',
   'unit.accessibilityAreas.cycling.label': 'Tillgänglighetsområden (cykling)',
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
index e7c60eaec..55476a546 100644
--- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Typography } from '@mui/material';
 import styled from '@emotion/styled';
+import { useIntl } from 'react-intl';
 import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext';
 import AccessibilityAreasToggle from './components/AccessibilityAreasToggle';
 import toggleObjectValue from '../../../MapView/utils/updateObject';
@@ -9,6 +10,8 @@ import { Container } from '../../../../components';
 const AccessibilityAreasInfo = () => {
   const { showAccessibilityAreas, setShowAccessibilityAreas } = useMobilityPlatformContext();
 
+  const intl = useIntl();
+
   const accessibilityAreasToggle = () => {
     toggleObjectValue('all', showAccessibilityAreas, setShowAccessibilityAreas);
   };
@@ -57,17 +60,15 @@ const AccessibilityAreasInfo = () => {
     <StyledContent>
       <Container>
         <Typography variant="subtitle1" component="h4">
-          Lähestymisalueet
+          {intl.formatMessage({ id: 'unit.accessibilityAreas.title' })}
         </Typography>
       </Container>
-      <Container>
+      <StyledContainer>
         <Typography variant="body2" component="p">
-          Lähestymisalueet ovat...
+          {intl.formatMessage({ id: 'unit.accessibilityAreas.description' })}
         </Typography>
-      </Container>
-      <Container>
-        {renderSettings()}
-      </Container>
+      </StyledContainer>
+      <Container>{renderSettings()}</Container>
     </StyledContent>
   );
 };
@@ -78,10 +79,15 @@ const StyledContent = styled.div(({ theme }) => ({
   paddingBottom: theme.spacing(2),
 }));
 
+const StyledContainer = styled(Container)(() => ({
+  alignItems: 'flex-start',
+}));
+
 const StyledCheckBoxContainer = styled.div(({ theme }) => ({
   width: '100%',
   paddingTop: theme.spacing(1.5),
   paddingBottom: theme.spacing(1.5),
+  textAlign: 'left',
 }));
 
 export default AccessibilityAreasInfo;
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js
index 61f876663..10aa0c9ea 100644
--- a/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js
@@ -58,10 +58,10 @@ const AccessibilityAreasToggle = ({
 };
 
 const StyledContainer = styled.div(({ theme }) => ({
-  paddingLeft: theme.spacing(2),
+  paddingLeft: theme.spacing(1),
   display: 'inline-flex',
   alignItems: 'center',
-  marginLeft: theme.spacing(2),
+  marginLeft: theme.spacing(1),
   verticalAlign: 'middle',
 }));
 

From 8f425621c709949448ed89d89c7cb1f053654c7c Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 12 Apr 2024 13:00:07 +0300
Subject: [PATCH 08/32] Remove dash array value

---
 .../MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 40ab25b05..1b82f8bc6 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -31,7 +31,7 @@ const AccessibilityAreas = () => {
   const map = useMap();
 
   const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3' });
-  const greenOptions = greenOptionsBase({ weight: 5, dashArray: '4 6 8' });
+  const greenOptions = greenOptionsBase({ weight: 5 });
   const blackOptions = blackOptionsBase({ weight: 5 });
   const whiteOptions = whiteOptionsBase({
     fillOpacity: 0.3,

From de55ab41a9fb262caa444959f69922b984fa3bcb Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 12 Apr 2024 14:23:18 +0300
Subject: [PATCH 09/32] Render markers as well when all areas will be shown

---
 .../AccessibilityAreas/AccessibilityAreas.js  | 68 ++++++++++++++-----
 1 file changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 1b82f8bc6..7cef00625 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -2,11 +2,20 @@
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useMap } from 'react-leaflet';
+import walkingIcon from 'servicemap-ui-turku/assets/icons/icons-icon_walking_area.svg';
+import walkingIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_walking_area-bw.svg';
+import cyclingIcon from 'servicemap-ui-turku/assets/icons/icons-icon_cycling_area.svg';
+import cyclingIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_cycling_area-bw.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
 import useMobilityDataFetch from '../utils/useMobilityDataFetch';
 import {
-  isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase, greenOptionsBase,
+  isDataValid,
+  createIcon,
+  fitPolygonsToBounds,
+  blueOptionsBase,
+  whiteOptionsBase,
+  greenOptionsBase,
   blackOptionsBase,
 } from '../utils/utils';
 import PolygonComponent from '../PolygonComponent';
@@ -29,6 +38,8 @@ const AccessibilityAreas = () => {
   const useContrast = useSelector(useAccessibleMap);
 
   const map = useMap();
+  const { Marker, Popup } = global.rL;
+  const { icon } = global.L;
 
   const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3' });
   const greenOptions = greenOptionsBase({ weight: 5 });
@@ -52,13 +63,23 @@ const AccessibilityAreas = () => {
     return blackOptions;
   };
 
-  // const pathOptions = useContrast ? whiteOptions : blueOptions;
+  const walkingAreaIcon = icon(createIcon(useContrast ? walkingIconBw : walkingIcon));
+  const cyclingAreaIcon = icon(createIcon(useContrast ? cyclingIconBw : cyclingIcon));
+
+  const getCorrectIcon = transportType => {
+    if (transportType.includes('kävely')) {
+      return walkingAreaIcon;
+    }
+    return cyclingAreaIcon;
+  };
 
   const { data } = useMobilityDataFetch(options, showAccessibilityAreas);
 
   const filteredAreas = data.filter(item => item.name === unitName);
   const filteredAreasWalking = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('kävely'));
-  const filteredAreasCycling = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('pyöräily'));
+  const filteredAreasCycling = data.filter(
+    item => item.name === unitName && item.extra.Kulkumuoto.includes('pyöräily'),
+  );
   const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas);
   const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking);
   const renderCycling = isDataValid(showAccessibilityAreas.cycling, filteredAreasCycling);
@@ -75,23 +96,36 @@ const AccessibilityAreas = () => {
     fitPolygonsToBounds(renderCycling, filteredAreasCycling, map);
   }, [showAccessibilityAreas.cycling, filteredAreasCycling]);
 
-  const renderPolygons = (showData, data) => (
-    showData
-      ? data.map(item => (
-        <PolygonComponent
-          key={item.id}
-          item={item}
-          useContrast={useContrast}
-          pathOptions={getPathOptions(item.extra.Kulkumuoto)}
-        >
-          <AccessibilityAreasContent item={item} />
-        </PolygonComponent>
-      ))
-      : null
-  );
+  const getSingleCoordinates = data => data[0][0];
+
+  const renderMarkers = (showData, data) => (showData
+    ? data.map(item => (
+      <div key={item.id}>
+        <Marker icon={getCorrectIcon(item.extra.Kulkumuoto)} position={getSingleCoordinates(item.geometry_coords)}>
+          <Popup>
+            <AccessibilityAreasContent item={item} />
+          </Popup>
+        </Marker>
+      </div>
+    ))
+    : null);
+
+  const renderPolygons = (showData, data) => (showData
+    ? data.map(item => (
+      <PolygonComponent
+        key={item.id}
+        item={item}
+        useContrast={useContrast}
+        pathOptions={getPathOptions(item.extra.Kulkumuoto)}
+      >
+        <AccessibilityAreasContent item={item} />
+      </PolygonComponent>
+    ))
+    : null);
 
   return (
     <>
+      {renderMarkers(renderAll, filteredAreas)}
       {renderPolygons(renderAll, filteredAreas)}
       {renderPolygons(renderWalking, filteredAreasWalking)}
       {renderPolygons(renderCycling, filteredAreasCycling)}

From 6e7afeccd0e431bed867df56660c3013799e2ef2 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 12 Apr 2024 15:11:07 +0300
Subject: [PATCH 10/32] Render default tabs if isExternalTheme is false

---
 src/views/UnitView/UnitView.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index c9133e5c3..98682d03f 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -78,6 +78,10 @@ const UnitView = props => {
   const getLocaleText = useLocaleText();
   const dispatch = useDispatch();
 
+  // If external theme (by Turku) is true, then can be used to select which content to render
+  const externalTheme = config.themePKG;
+  const isExternalTheme = !externalTheme || externalTheme === 'undefined' ? null : externalTheme;
+
   const map = useSelector(state => state.mapRef);
 
   const getImageAlt = () => `${intl.formatMessage({ id: 'unit.picture' })}${getLocaleText(unit.name)}`;
@@ -420,6 +424,18 @@ const UnitView = props => {
     </div>
   );
 
+  /**
+   * Filter out the accessibility areas object from tabs if isExternalTheme is false.
+   * @param {*} tabsData
+   * @returns array
+   */
+  const getTabsData = tabsData => {
+    if (isExternalTheme) {
+      return tabsData;
+    }
+    return tabsData.filter(item => item.id !== 'accessibilityAreas');
+  };
+
   const render = () => {
     const title = unit && unit.name ? getLocaleText(unit.name) : '';
     const onLinkOpenClick = () => {
@@ -524,7 +540,7 @@ const UnitView = props => {
             renderHead()
           }
           <TabLists
-            data={tabs}
+            data={getTabsData(tabs)}
             headerComponents={(
               <>
                 {TopArea}

From 4cf13577d95549ae0364f37f143b15ec55ad3ca1 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 12 Apr 2024 15:22:43 +0300
Subject: [PATCH 11/32] Align title text to left

---
 .../AccessibilityAreasInfo/AccessibilityAreasInfo.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
index 55476a546..db8fe9e1b 100644
--- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
@@ -58,11 +58,11 @@ const AccessibilityAreasInfo = () => {
 
   return (
     <StyledContent>
-      <Container>
+      <StyledContainer>
         <Typography variant="subtitle1" component="h4">
           {intl.formatMessage({ id: 'unit.accessibilityAreas.title' })}
         </Typography>
-      </Container>
+      </StyledContainer>
       <StyledContainer>
         <Typography variant="body2" component="p">
           {intl.formatMessage({ id: 'unit.accessibilityAreas.description' })}

From 13cde4aebae2ee0987c53e7f3c9fbe3a2d36429b Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 19 Apr 2024 09:55:28 +0300
Subject: [PATCH 12/32] Update code to match data & use updated icons

---
 .../AccessibilityAreas/AccessibilityAreas.js   | 18 +++++++++---------
 .../AccessibilityAreasContent.js               |  8 ++++----
 src/components/MobilityPlatform/utils/utils.js |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 7cef00625..503b77997 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -51,10 +51,10 @@ const AccessibilityAreas = () => {
   });
 
   const getPathOptions = transportType => {
-    if (transportType.includes('kävely')) {
+    if (transportType?.includes('kävely')) {
       return blueOptions;
     }
-    if (transportType.includes('pyöräily')) {
+    if (transportType?.includes('pyöräily')) {
       return greenOptions;
     }
     if (useContrast) {
@@ -63,11 +63,11 @@ const AccessibilityAreas = () => {
     return blackOptions;
   };
 
-  const walkingAreaIcon = icon(createIcon(useContrast ? walkingIconBw : walkingIcon));
-  const cyclingAreaIcon = icon(createIcon(useContrast ? cyclingIconBw : cyclingIcon));
+  const walkingAreaIcon = icon(createIcon(useContrast ? walkingIconBw : walkingIcon, true));
+  const cyclingAreaIcon = icon(createIcon(useContrast ? cyclingIconBw : cyclingIcon, true));
 
   const getCorrectIcon = transportType => {
-    if (transportType.includes('kävely')) {
+    if (transportType?.includes('kävely')) {
       return walkingAreaIcon;
     }
     return cyclingAreaIcon;
@@ -76,9 +76,9 @@ const AccessibilityAreas = () => {
   const { data } = useMobilityDataFetch(options, showAccessibilityAreas);
 
   const filteredAreas = data.filter(item => item.name === unitName);
-  const filteredAreasWalking = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('kävely'));
+  const filteredAreasWalking = data.filter(item => item.name === unitName && item?.extra?.kulkumuoto?.includes('kävely'));
   const filteredAreasCycling = data.filter(
-    item => item.name === unitName && item.extra.Kulkumuoto.includes('pyöräily'),
+    item => item.name === unitName && item?.extra?.kulkumuoto?.includes('pyöräily'),
   );
   const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas);
   const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking);
@@ -101,7 +101,7 @@ const AccessibilityAreas = () => {
   const renderMarkers = (showData, data) => (showData
     ? data.map(item => (
       <div key={item.id}>
-        <Marker icon={getCorrectIcon(item.extra.Kulkumuoto)} position={getSingleCoordinates(item.geometry_coords)}>
+        <Marker icon={getCorrectIcon(item.extra.kulkumuoto)} position={getSingleCoordinates(item.geometry_coords)}>
           <Popup>
             <AccessibilityAreasContent item={item} />
           </Popup>
@@ -116,7 +116,7 @@ const AccessibilityAreas = () => {
         key={item.id}
         item={item}
         useContrast={useContrast}
-        pathOptions={getPathOptions(item.extra.Kulkumuoto)}
+        pathOptions={getPathOptions(item.extra.kulkumuoto)}
       >
         <AccessibilityAreasContent item={item} />
       </PolygonComponent>
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
index cecdabb75..3b4eb7b4a 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
@@ -22,10 +22,10 @@ const AccessibilityAreasContent = ({ item }) => {
         </StyledMargin>
         <StyledMargin>
           <Typography variant="body2" component="p">
-            {intl.formatMessage({ id: 'unit.accessibilityAreas.content.transport' }, { value: item.extra.Kulkumuoto })}
+            {intl.formatMessage({ id: 'unit.accessibilityAreas.content.transport' }, { value: item?.extra?.kulkumuoto })}
           </Typography>
           <Typography variant="body2" component="p">
-            {intl.formatMessage({ id: 'unit.accessibilityAreas.content.duration' }, { value: item.extra.Minuutit })}
+            {intl.formatMessage({ id: 'unit.accessibilityAreas.content.duration' }, { value: item?.extra?.minuutit })}
           </Typography>
         </StyledMargin>
       </StyledTextContainer>
@@ -57,8 +57,8 @@ AccessibilityAreasContent.propTypes = {
   item: PropTypes.shape({
     name_fi: PropTypes.string,
     extra: PropTypes.shape({
-      Kulkumuoto: PropTypes.string,
-      Minuutit: PropTypes.number,
+      kulkumuoto: PropTypes.string,
+      minuutit: PropTypes.number,
     }),
   }),
 };
diff --git a/src/components/MobilityPlatform/utils/utils.js b/src/components/MobilityPlatform/utils/utils.js
index 6e0d4d9c9..1e26a51d7 100644
--- a/src/components/MobilityPlatform/utils/utils.js
+++ b/src/components/MobilityPlatform/utils/utils.js
@@ -14,9 +14,9 @@ const isDataValid = (visibilityValue, data) => visibilityValue && data && data.l
  */
 const isObjValid = (visibilityValue, obj) => visibilityValue && obj && Object.entries(obj).length > 0;
 
-const createIcon = icon => ({
+const createIcon = (icon, isSmall) => ({
   iconUrl: icon,
-  iconSize: [45, 45],
+  iconSize: isSmall ? [35, 35] : [45, 45],
 });
 
 const whiteOptionsBase = (attrs = {}) => ({ color: 'rgba(255, 255, 255, 255)', ...attrs });

From caecc17f6ffae93785ee2310b7191e706da1cd5b Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 19 Apr 2024 10:16:26 +0300
Subject: [PATCH 13/32] Use id to filter areas

---
 .../AccessibilityAreas/AccessibilityAreas.js              | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 503b77997..c375be836 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -34,7 +34,7 @@ const AccessibilityAreas = () => {
   const { showAccessibilityAreas } = useMobilityPlatformContext();
 
   const selectedUnit = useSelector(state => state.selectedUnit?.unit?.data);
-  const unitName = selectedUnit?.name?.fi;
+  const unitId = selectedUnit?.id;
   const useContrast = useSelector(useAccessibleMap);
 
   const map = useMap();
@@ -75,10 +75,10 @@ const AccessibilityAreas = () => {
 
   const { data } = useMobilityDataFetch(options, showAccessibilityAreas);
 
-  const filteredAreas = data.filter(item => item.name === unitName);
-  const filteredAreasWalking = data.filter(item => item.name === unitName && item?.extra?.kulkumuoto?.includes('kävely'));
+  const filteredAreas = data.filter(item => item.extra?.kohde_ID === unitId);
+  const filteredAreasWalking = data.filter(item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('kävely'));
   const filteredAreasCycling = data.filter(
-    item => item.name === unitName && item?.extra?.kulkumuoto?.includes('pyöräily'),
+    item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('pyöräily'),
   );
   const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas);
   const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking);

From b00bd78524638b937190018eb328c4543dd5dd62 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 19 Apr 2024 10:53:55 +0300
Subject: [PATCH 14/32] Update function that filters tabs' data

---
 src/views/UnitView/UnitView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index 98682d03f..e0deb75ba 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -430,7 +430,7 @@ const UnitView = props => {
    * @returns array
    */
   const getTabsData = tabsData => {
-    if (isExternalTheme) {
+    if (isExternalTheme && unit.service_names_fi.includes('Perusopetus')) {
       return tabsData;
     }
     return tabsData.filter(item => item.id !== 'accessibilityAreas');

From 9732ab9e84ca84897f4f2364bbb10b7977127d7f Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 24 Apr 2024 15:30:36 +0300
Subject: [PATCH 15/32] Fetch accessibility areas in unit view & update
 condition that creates tabs

---
 .../AccessibilityAreas/AccessibilityAreas.js  | 28 ++++++---------
 src/context/MobilityPlatformContext.js        | 13 +++++--
 src/views/UnitView/UnitView.js                | 36 ++++++++++++++++++-
 3 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index c375be836..3c05e56bb 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -8,7 +8,6 @@ import cyclingIcon from 'servicemap-ui-turku/assets/icons/icons-icon_cycling_are
 import cyclingIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_cycling_area-bw.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
-import useMobilityDataFetch from '../utils/useMobilityDataFetch';
 import {
   isDataValid,
   createIcon,
@@ -24,14 +23,8 @@ import AccessibilityAreasContent from './components/AccessibilityAreasContent';
 /**
  * Displays school accessibility areas on the map in polygon format.
  */
-
 const AccessibilityAreas = () => {
-  const options = {
-    type_name: 'SchoolAndKindergartenAccessibilityArea',
-    latlon: true,
-    page_size: 150,
-  };
-  const { showAccessibilityAreas } = useMobilityPlatformContext();
+  const { showAccessibilityAreas, accessibilityAreasData } = useMobilityPlatformContext();
 
   const selectedUnit = useSelector(state => state.selectedUnit?.unit?.data);
   const unitId = selectedUnit?.id;
@@ -73,20 +66,19 @@ const AccessibilityAreas = () => {
     return cyclingAreaIcon;
   };
 
-  const { data } = useMobilityDataFetch(options, showAccessibilityAreas);
-
-  const filteredAreas = data.filter(item => item.extra?.kohde_ID === unitId);
-  const filteredAreasWalking = data.filter(item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('kävely'));
-  const filteredAreasCycling = data.filter(
+  const filteredAreasWalking = accessibilityAreasData.filter(
+    item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('kävely'),
+  );
+  const filteredAreasCycling = accessibilityAreasData.filter(
     item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('pyöräily'),
   );
-  const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas);
+  const renderAll = isDataValid(showAccessibilityAreas.all, accessibilityAreasData);
   const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking);
   const renderCycling = isDataValid(showAccessibilityAreas.cycling, filteredAreasCycling);
 
   useEffect(() => {
-    fitPolygonsToBounds(renderAll, filteredAreas, map);
-  }, [showAccessibilityAreas.all, filteredAreas]);
+    fitPolygonsToBounds(renderAll, accessibilityAreasData, map);
+  }, [showAccessibilityAreas.all, accessibilityAreasData]);
 
   useEffect(() => {
     fitPolygonsToBounds(renderWalking, filteredAreasWalking, map);
@@ -125,8 +117,8 @@ const AccessibilityAreas = () => {
 
   return (
     <>
-      {renderMarkers(renderAll, filteredAreas)}
-      {renderPolygons(renderAll, filteredAreas)}
+      {renderMarkers(renderAll, accessibilityAreasData)}
+      {renderPolygons(renderAll, accessibilityAreasData)}
       {renderPolygons(renderWalking, filteredAreasWalking)}
       {renderPolygons(renderCycling, filteredAreasCycling)}
     </>
diff --git a/src/context/MobilityPlatformContext.js b/src/context/MobilityPlatformContext.js
index 4f01e1d54..16d79c8b7 100644
--- a/src/context/MobilityPlatformContext.js
+++ b/src/context/MobilityPlatformContext.js
@@ -100,6 +100,10 @@ const MobilityPlatformContextProvider = ({ children }) => {
   const [showBusStops, setShowBusStops] = useState(false);
   const [showRailwayStations, setShowRailwayStations] = useState(false);
 
+  // units
+  const [showAccessibilityAreas, setShowAccessibilityAreas] = useState(accessibilityAreasInitial);
+  const [accessibilityAreasData, setAccessibilityAreasData] = useState([]);
+
   // other
   const [showOutdoorGymDevices, setShowOutdoorGymDevices] = useState(false);
   const [showLoadingPlaces, setShowLoadingPlaces] = useState(false);
@@ -110,7 +114,6 @@ const MobilityPlatformContextProvider = ({ children }) => {
   const [showPublicBenches, setShowPublicBenches] = useState(false);
   const [showRoadworks, setShowRoadworks] = useState(false);
   const [showBarbecuePlaces, setShowBarbecuePlaces] = useState(false);
-  const [showAccessibilityAreas, setShowAccessibilityAreas] = useState(accessibilityAreasInitial);
 
   const getters = {
     openMobilityPlatform,
@@ -171,6 +174,9 @@ const MobilityPlatformContextProvider = ({ children }) => {
     // public transport
     showBusStops,
     showRailwayStations,
+    // units
+    showAccessibilityAreas,
+    accessibilityAreasData,
     // other
     showOutdoorGymDevices,
     showPublicToilets,
@@ -181,7 +187,6 @@ const MobilityPlatformContextProvider = ({ children }) => {
     showPublicBenches,
     showRoadworks,
     showBarbecuePlaces,
-    showAccessibilityAreas,
   };
 
   const setters = {
@@ -243,6 +248,9 @@ const MobilityPlatformContextProvider = ({ children }) => {
     // public transport
     setShowBusStops,
     setShowRailwayStations,
+    // units
+    setShowAccessibilityAreas,
+    setAccessibilityAreasData,
     // other
     setShowOutdoorGymDevices,
     setShowPublicToilets,
@@ -253,7 +261,6 @@ const MobilityPlatformContextProvider = ({ children }) => {
     setShowPublicBenches,
     setShowRoadworks,
     setShowBarbecuePlaces,
-    setShowAccessibilityAreas,
   };
 
   const contextValues = { ...getters, ...setters };
diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index e0deb75ba..689fa0df4 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -43,6 +43,8 @@ import { parseSearchParams } from '../../utils';
 import { fetchServiceUnits } from '../../redux/actions/services';
 import MapView from '../MapView';
 import Util from '../../utils/mapUtility';
+import useMobilityDataFetch from '../../components/MobilityPlatform/utils/useMobilityDataFetch';
+import { useMobilityPlatformContext } from '../../context/MobilityPlatformContext';
 import AccessibilityAreasInfo from './components/AccessibilityAreasInfo';
 
 const UnitView = props => {
@@ -82,6 +84,38 @@ const UnitView = props => {
   const externalTheme = config.themePKG;
   const isExternalTheme = !externalTheme || externalTheme === 'undefined' ? null : externalTheme;
 
+  const { setAccessibilityAreasData } = useMobilityPlatformContext();
+
+  const options = {
+    type_name: 'SchoolAndKindergartenAccessibilityArea',
+    latlon: true,
+    page_size: 150,
+  };
+
+  /**
+   * Fetch unit (school) accessibility areas data
+   */
+  const { data: accessibilityAreas } = useMobilityDataFetch(options, isExternalTheme);
+
+  /**
+   * Filter unit accessibility areas based on unit id.
+   */
+  const filteredAreas = accessibilityAreas.filter(item => item?.extra?.kohde_ID === unit.id);
+
+  /**
+   * Set unit accessibility areas data into state
+   */
+  useEffect(() => {
+    if (filteredAreas?.length) {
+      setAccessibilityAreasData(filteredAreas);
+    }
+  }, [filteredAreas.length]);
+
+  /**
+   * Check if unit id exists in accessibility areas data and return boolean value.
+   */
+  const hasAccessibilityAreas = accessibilityAreas.some(item => item?.extra?.kohde_ID === unit.id);
+
   const map = useSelector(state => state.mapRef);
 
   const getImageAlt = () => `${intl.formatMessage({ id: 'unit.picture' })}${getLocaleText(unit.name)}`;
@@ -430,7 +464,7 @@ const UnitView = props => {
    * @returns array
    */
   const getTabsData = tabsData => {
-    if (isExternalTheme && unit.service_names_fi.includes('Perusopetus')) {
+    if (isExternalTheme && hasAccessibilityAreas) {
       return tabsData;
     }
     return tabsData.filter(item => item.id !== 'accessibilityAreas');

From 895fb809a7dc9e53eb8175f5ceb1666ac86f998d Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 24 Apr 2024 16:10:40 +0300
Subject: [PATCH 16/32] Update styles & add new tests

---
 .../AccessibilityAreasContent.js              | 32 +++----------
 .../AccessibilityAreasContent.test.js         | 42 +++++++++++++++++
 .../AccessibilityAreasContent.test.js.snap    | 46 +++++++++++++++++++
 .../__tests__/BarbecuePlacesContent.test.js   |  2 +-
 4 files changed, 96 insertions(+), 26 deletions(-)
 create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/AccessibilityAreasContent.test.js
 create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
index 3b4eb7b4a..b274600d1 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from '@emotion/styled';
 import { Typography } from '@mui/material';
 import { useIntl } from 'react-intl';
+import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled';
 
 const AccessibilityAreasContent = ({ item }) => {
   const intl = useIntl();
@@ -14,45 +14,27 @@ const AccessibilityAreasContent = ({ item }) => {
           {item.name_fi}
         </Typography>
       </StyledHeaderContainer>
-      <StyledTextContainer>
-        <StyledMargin>
+      <div>
+        <StyledTextContainer>
           <Typography variant="subtitle2" component="p">
             {intl.formatMessage({ id: 'unit.accessibilityAreas.content.subtitle' })}
           </Typography>
-        </StyledMargin>
-        <StyledMargin>
+        </StyledTextContainer>
+        <StyledTextContainer>
           <Typography variant="body2" component="p">
             {intl.formatMessage({ id: 'unit.accessibilityAreas.content.transport' }, { value: item?.extra?.kulkumuoto })}
           </Typography>
           <Typography variant="body2" component="p">
             {intl.formatMessage({ id: 'unit.accessibilityAreas.content.duration' }, { value: item?.extra?.minuutit })}
           </Typography>
-        </StyledMargin>
-      </StyledTextContainer>
+        </StyledTextContainer>
+      </div>
     </StyledContainer>
   );
 
   return <StyledContainer>{contentInfo}</StyledContainer>;
 };
 
-const StyledContainer = styled.div(({ theme }) => ({
-  margin: theme.spacing(1),
-}));
-
-const StyledHeaderContainer = styled.div(({ theme }) => ({
-  width: '85%',
-  borderBottom: '1px solid #000',
-  paddingBottom: theme.spacing(0.5),
-}));
-
-const StyledTextContainer = styled.div(({ theme }) => ({
-  marginTop: theme.spacing(0.5),
-}));
-
-const StyledMargin = styled.div(({ theme }) => ({
-  margin: theme.spacing(0.4),
-}));
-
 AccessibilityAreasContent.propTypes = {
   item: PropTypes.shape({
     name_fi: PropTypes.string,
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/AccessibilityAreasContent.test.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/AccessibilityAreasContent.test.js
new file mode 100644
index 000000000..dec0feccc
--- /dev/null
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/AccessibilityAreasContent.test.js
@@ -0,0 +1,42 @@
+// Link.react.test.js
+import React from 'react';
+import AccessibilityAreasContent from '../index';
+import { getRenderWithProviders } from '../../../../../../../jestUtils';
+import finnishTranslations from '../../../../../../i18n/fi';
+
+const mockProps = {
+  item: {
+    extra: {
+      kulkumuoto: 'Kävely',
+      minuutit: 10,
+    },
+  },
+};
+
+const renderWithProviders = getRenderWithProviders({});
+
+describe('<AccessibilityAreasContent />', () => {
+  it('should work', () => {
+    const { container } = renderWithProviders(<AccessibilityAreasContent {...mockProps} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('does show text correctly', () => {
+    const { container } = renderWithProviders(<AccessibilityAreasContent {...mockProps} />);
+
+    const p = container.querySelectorAll('p');
+    expect(p[0].textContent).toContain(`${finnishTranslations['unit.accessibilityAreas.content.subtitle']}`);
+    expect(p[1].textContent).toContain(
+      `${finnishTranslations['unit.accessibilityAreas.content.transport'].replace(
+        '{value}',
+        `${mockProps.item.extra.kulkumuoto}`,
+      )}`,
+    );
+    expect(p[2].textContent).toContain(
+      `${finnishTranslations['unit.accessibilityAreas.content.duration'].replace(
+        '{value}',
+        `${mockProps.item.extra.minuutit}`,
+      )}`,
+    );
+  });
+});
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap
new file mode 100644
index 000000000..e3a01fcb0
--- /dev/null
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AccessibilityAreasContent /> should work 1`] = `
+<div>
+  <div
+    class="css-1ynyhby"
+  >
+    <div
+      class="css-1ynyhby"
+    >
+      <div
+        class="css-1dznbe2"
+      >
+        <h4
+          class="MuiTypography-root MuiTypography-subtitle1 css-dlbwt1-MuiTypography-root"
+        />
+      </div>
+      <div>
+        <div
+          class="css-1fhgjcy"
+        >
+          <p
+            class="MuiTypography-root MuiTypography-subtitle2 css-chrj9w-MuiTypography-root"
+          >
+            Lähestymisalue:
+          </p>
+        </div>
+        <div
+          class="css-1fhgjcy"
+        >
+          <p
+            class="MuiTypography-root MuiTypography-body2 css-1ak20dk-MuiTypography-root"
+          >
+            Kulkumuto: Kävely
+          </p>
+          <p
+            class="MuiTypography-root MuiTypography-body2 css-1ak20dk-MuiTypography-root"
+          >
+            Arvioitu aika: 10 minuuttia
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/BarbecuePlacesContent.test.js b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/BarbecuePlacesContent.test.js
index 2df378443..67e127d5f 100644
--- a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/BarbecuePlacesContent.test.js
+++ b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/BarbecuePlacesContent.test.js
@@ -1,6 +1,6 @@
 // Link.react.test.js
 import React from 'react';
-import BarbecuePlacesContent from '../BarbecuePlacesContent';
+import BarbecuePlacesContent from '../index';
 import { getRenderWithProviders } from '../../../../../../../jestUtils';
 import finnishTranslations from '../../../../../../i18n/fi';
 

From 406bff0dbb076756cb50d6025b498e8963a6408d Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 24 Apr 2024 16:25:34 +0300
Subject: [PATCH 17/32] Update component structure

---
 .../AccessibilityAreasContent/AccessibilityAreasContent.js    | 2 ++
 .../__snapshots__/AccessibilityAreasContent.test.js.snap      | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
index b274600d1..a10ad0817 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
@@ -24,6 +24,8 @@ const AccessibilityAreasContent = ({ item }) => {
           <Typography variant="body2" component="p">
             {intl.formatMessage({ id: 'unit.accessibilityAreas.content.transport' }, { value: item?.extra?.kulkumuoto })}
           </Typography>
+        </StyledTextContainer>
+        <StyledTextContainer>
           <Typography variant="body2" component="p">
             {intl.formatMessage({ id: 'unit.accessibilityAreas.content.duration' }, { value: item?.extra?.minuutit })}
           </Typography>
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap
index e3a01fcb0..a1b596c87 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap
@@ -33,6 +33,10 @@ exports[`<AccessibilityAreasContent /> should work 1`] = `
           >
             Kulkumuto: Kävely
           </p>
+        </div>
+        <div
+          class="css-1fhgjcy"
+        >
           <p
             class="MuiTypography-root MuiTypography-body2 css-1ak20dk-MuiTypography-root"
           >

From b2d5c7e91f82d528bce018597d1c6aecba00c12a Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Thu, 25 Apr 2024 09:50:34 +0300
Subject: [PATCH 18/32] Limit number of fetch requests & add optional chaining

---
 src/views/UnitView/UnitView.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index 689fa0df4..a7adb2367 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -49,7 +49,6 @@ import AccessibilityAreasInfo from './components/AccessibilityAreasInfo';
 
 const UnitView = props => {
   const {
-    distance,
     stateUnit,
     intl,
     classes,
@@ -92,15 +91,18 @@ const UnitView = props => {
     page_size: 150,
   };
 
+  const isUnitSchool = unit?.service_names_fi?.includes('Perusopetus');
+  const fetchAccessibiliyAreas = isExternalTheme && isUnitSchool;
+
   /**
    * Fetch unit (school) accessibility areas data
    */
-  const { data: accessibilityAreas } = useMobilityDataFetch(options, isExternalTheme);
+  const { data: accessibilityAreas } = useMobilityDataFetch(options, fetchAccessibiliyAreas);
 
   /**
    * Filter unit accessibility areas based on unit id.
    */
-  const filteredAreas = accessibilityAreas.filter(item => item?.extra?.kohde_ID === unit.id);
+  const filteredAreas = accessibilityAreas.filter(item => item?.extra?.kohde_ID === unit?.id);
 
   /**
    * Set unit accessibility areas data into state
@@ -114,7 +116,7 @@ const UnitView = props => {
   /**
    * Check if unit id exists in accessibility areas data and return boolean value.
    */
-  const hasAccessibilityAreas = accessibilityAreas.some(item => item?.extra?.kohde_ID === unit.id);
+  const hasAccessibilityAreas = accessibilityAreas.some(item => item?.extra?.kohde_ID === unit?.id);
 
   const map = useSelector(state => state.mapRef);
 

From 31a482a09d74834cec5faf4d74c9eb92de66647a Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 26 Apr 2024 10:34:07 +0300
Subject: [PATCH 19/32] Change opacity value

---
 .../AccessibilityAreas/AccessibilityAreas.js           |  5 +++--
 .../PolygonComponent/PolygonComponent.js               | 10 +++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 3c05e56bb..826726868 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -34,8 +34,8 @@ const AccessibilityAreas = () => {
   const { Marker, Popup } = global.rL;
   const { icon } = global.L;
 
-  const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3' });
-  const greenOptions = greenOptionsBase({ weight: 5 });
+  const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3', fillOpacity: '0' });
+  const greenOptions = greenOptionsBase({ weight: 5, fillOpacity: '0' });
   const blackOptions = blackOptionsBase({ weight: 5 });
   const whiteOptions = whiteOptionsBase({
     fillOpacity: 0.3,
@@ -109,6 +109,7 @@ const AccessibilityAreas = () => {
         item={item}
         useContrast={useContrast}
         pathOptions={getPathOptions(item.extra.kulkumuoto)}
+        isTransparent
       >
         <AccessibilityAreasContent item={item} />
       </PolygonComponent>
diff --git a/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js b/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js
index 3d27c08a9..8d04340b2 100644
--- a/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js
+++ b/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js
@@ -3,10 +3,12 @@ import { PropTypes } from 'prop-types';
 import { StyledPopupWrapper, StyledPopupInner } from '../styled/styled';
 
 const PolygonComponent = ({
-  item, useContrast, pathOptions, children,
+  item, useContrast, pathOptions, isTransparent, children,
 }) => {
   const { Polygon, Popup } = global.rL;
 
+  const opacityValue = isTransparent ? '0' : '0.2';
+
   return (
     <Polygon
       key={item.id}
@@ -14,10 +16,10 @@ const PolygonComponent = ({
       positions={item.geometry_coords}
       eventHandlers={{
         mouseover: e => {
-          e.target.setStyle({ fillOpacity: useContrast ? '0.6' : '0.2' });
+          e.target.setStyle({ fillOpacity: useContrast ? '0.6' : opacityValue });
         },
         mouseout: e => {
-          e.target.setStyle({ fillOpacity: useContrast ? '0.3' : '0.2' });
+          e.target.setStyle({ fillOpacity: useContrast ? '0.3' : opacityValue });
         },
       }}
     >
@@ -40,11 +42,13 @@ PolygonComponent.propTypes = {
     color: PropTypes.string,
     weight: PropTypes.number,
   }).isRequired,
+  isTransparent: PropTypes.bool,
   children: PropTypes.node,
 };
 
 PolygonComponent.defaultProps = {
   useContrast: false,
+  isTransparent: false,
   children: null,
 };
 

From 7723f33c945e6925ec082d3a95b66a8fb95b80fd Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Mon, 13 May 2024 14:35:57 +0300
Subject: [PATCH 20/32] Show accessibility areas in embedder

---
 .../AccessibilityAreas/AccessibilityAreas.js  | 12 +++-
 src/i18n/en.js                                |  1 +
 src/i18n/fi.js                                |  1 +
 src/i18n/sv.js                                |  1 +
 src/views/EmbedderView/EmbedderView.js        | 71 +++++++++++--------
 src/views/EmbedderView/utils/utils.js         |  3 +
 6 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 826726868..273e1164a 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -12,11 +12,13 @@ import {
   isDataValid,
   createIcon,
   fitPolygonsToBounds,
+  setRender,
   blueOptionsBase,
   whiteOptionsBase,
   greenOptionsBase,
   blackOptionsBase,
 } from '../utils/utils';
+import { isEmbed } from '../../../utils/path';
 import PolygonComponent from '../PolygonComponent';
 import AccessibilityAreasContent from './components/AccessibilityAreasContent';
 
@@ -30,6 +32,9 @@ const AccessibilityAreas = () => {
   const unitId = selectedUnit?.id;
   const useContrast = useSelector(useAccessibleMap);
 
+  const url = new URL(window.location);
+  const embedded = isEmbed({ url: url.toString() });
+
   const map = useMap();
   const { Marker, Popup } = global.rL;
   const { icon } = global.L;
@@ -66,18 +71,21 @@ const AccessibilityAreas = () => {
     return cyclingAreaIcon;
   };
 
+  const paramValue = url.searchParams.get('accessibility_areas') === '1';
   const filteredAreasWalking = accessibilityAreasData.filter(
     item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('kävely'),
   );
   const filteredAreasCycling = accessibilityAreasData.filter(
     item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('pyöräily'),
   );
-  const renderAll = isDataValid(showAccessibilityAreas.all, accessibilityAreasData);
+  const renderAll = setRender(paramValue, embedded, showAccessibilityAreas.all, accessibilityAreasData, isDataValid);
   const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking);
   const renderCycling = isDataValid(showAccessibilityAreas.cycling, filteredAreasCycling);
 
   useEffect(() => {
-    fitPolygonsToBounds(renderAll, accessibilityAreasData, map);
+    if (!embedded) {
+      fitPolygonsToBounds(renderAll, accessibilityAreasData, map);
+    }
   }, [showAccessibilityAreas.all, accessibilityAreasData]);
 
   useEffect(() => {
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 75a837572..e603281df 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -236,6 +236,7 @@ const translations = {
   'embedder.preview.title': 'Map preview',
   'embedder.options.title': 'Show on the map',
   'embedder.options.label.units': 'Show service points',
+  'embedder.options.label.units.accessibilityAreas': 'Show accessibility areas',
   'embedder.options.list.title': 'List of service points',
   'embedder.options.label.list.none': 'Hide the list of service points',
   'embedder.options.label.list.side': 'Show service points as a list (beside the map)',
diff --git a/src/i18n/fi.js b/src/i18n/fi.js
index 3a4c3721a..81b5892ac 100644
--- a/src/i18n/fi.js
+++ b/src/i18n/fi.js
@@ -238,6 +238,7 @@ const translations = {
   'embedder.map.aria.label': 'Valitse taustakartta',
   'embedder.options.title': 'Näytä kartalla',
   'embedder.options.label.units': 'Näytä toimipisteet',
+  'embedder.options.label.units.accessibilityAreas': 'Näytä lähestymisalueet',
   'embedder.options.list.title': 'Toimipistelista',
   'embedder.options.label.list.none': 'Piilota toimipistelista',
   'embedder.options.label.list.side': 'Näytä toimipisteet listana (kartan vieressä)',
diff --git a/src/i18n/sv.js b/src/i18n/sv.js
index ddd8ded87..fcd55af17 100644
--- a/src/i18n/sv.js
+++ b/src/i18n/sv.js
@@ -239,6 +239,7 @@ const translations = {
   'embedder.map.aria.label': 'Välj bakgrundskarta',
   'embedder.options.title': 'Visa på kartan',
   'embedder.options.label.units': 'Visa verksamhetsställen',
+  'embedder.options.label.units.accessibilityAreas': 'Visa tillgänglighetsområden',
   'embedder.options.list.title': 'List med verksamhetsställen',
   'embedder.options.label.list.none': 'Ta bort listan med verksamhetsställen',
   'embedder.options.label.list.side': 'Visa verksamhetsställen som en lista (intill kartan)',
diff --git a/src/views/EmbedderView/EmbedderView.js b/src/views/EmbedderView/EmbedderView.js
index c8c57ca36..7259765cb 100644
--- a/src/views/EmbedderView/EmbedderView.js
+++ b/src/views/EmbedderView/EmbedderView.js
@@ -60,7 +60,7 @@ const EmbedderView = ({
   }
 
   const cityOption = (search?.city !== '' && search?.city?.split(',')) || citySettings;
-  const citiesToReduce = cityOption.length > 0 ? cityOption : embedderConfig.CITIES.filter((v) => v);
+  const citiesToReduce = cityOption.length > 0 ? cityOption : embedderConfig.CITIES.filter(v => v);
 
   // If external theme (by Turku) is true, then can be used to select which content to render
   const externalTheme = config.themePKG;
@@ -77,9 +77,9 @@ const EmbedderView = ({
   const defaultFixedHeight = embedderConfig.DEFAULT_CUSTOM_WIDTH;
   const iframeConfig = embedderConfig.DEFAULT_IFRAME_PROPERTIES || {};
   const defaultService = 'none';
-  const page = useSelector((state) => state.user.page);
-  const selectedUnit = useSelector((state) => state.selectedUnit.unit.data);
-  const currentService = useSelector((state) => state.service.current);
+  const page = useSelector(state => state.user.page);
+  const selectedUnit = useSelector(state => state.selectedUnit.unit.data);
+  const currentService = useSelector(state => state.service.current);
   const getLocaleText = useLocaleText();
   const userLocale = useUserLocale();
 
@@ -109,6 +109,7 @@ const EmbedderView = ({
   const [underPass, setUnderpass] = useState(false);
   const [overPass, setOverPass] = useState(false);
   const [publicBenches, setPublicBenches] = useState(false);
+  const [accessibilityAreas, setAccessibilityAreas] = useState(false);
 
   const boundsRef = useRef([]);
   const dialogRef = useRef();
@@ -136,6 +137,7 @@ const EmbedderView = ({
     underPass,
     overPass,
     publicBenches,
+    accessibilityAreas,
     bbox: selectedBbox,
   });
 
@@ -171,7 +173,7 @@ const EmbedderView = ({
     buttons[0].focus();
   };
 
-  const setBoundsRef = useCallback((bounds) => {
+  const setBoundsRef = useCallback(bounds => {
     boundsRef.current = bounds;
   }, []);
 
@@ -194,7 +196,7 @@ const EmbedderView = ({
   };
 
   // Run timeout function and cancel previous if it exists
-  const runTimeoutFunction = (func) => {
+  const runTimeoutFunction = func => {
     if (timeout) {
       clearTimeout(timeout);
     }
@@ -202,7 +204,7 @@ const EmbedderView = ({
   };
 
   // Figure out embed html
-  const createEmbedHTML = useCallback((url) => {
+  const createEmbedHTML = useCallback(url => {
     const showListBottom = showUnitList === 'bottom';
     if (!url) {
       return '';
@@ -247,13 +249,13 @@ const EmbedderView = ({
     showUnitList,
   ]);
 
-  const showCities = (embedUrl) => {
+  const showCities = embedUrl => {
     if (typeof embedUrl !== 'string') {
       return false;
     }
     const originalUrl = embedUrl.replace('/embed', '');
     let show = true;
-    hideCitiesIn.forEach((r) => {
+    hideCitiesIn.forEach(r => {
       if (show) {
         show = !r.test(originalUrl);
       }
@@ -261,13 +263,13 @@ const EmbedderView = ({
     return show;
   };
 
-  const showServices = (embedUrl) => {
+  const showServices = embedUrl => {
     if (typeof embedUrl !== 'string') {
       return false;
     }
     const originalUrl = embedUrl.replace('/embed', '');
     let show = true;
-    hideServicesIn.forEach((r) => {
+    hideServicesIn.forEach(r => {
       if (show) {
         show = !r.test(originalUrl);
       }
@@ -279,8 +281,8 @@ const EmbedderView = ({
    * Render language controls
    */
   const renderLanguageControl = () => {
-    const description = (locale) => intl.formatMessage({ id: `embedder.language.description.${locale}` });
-    const languageControls = (generateLabel) => Object.keys(embedderConfig.LANGUAGES).map((lang) => ({
+    const description = locale => intl.formatMessage({ id: `embedder.language.description.${locale}` });
+    const languageControls = generateLabel => Object.keys(embedderConfig.LANGUAGES).map(lang => ({
       value: lang,
       label: `${uppercaseFirst(
         embedderConfig.LANGUAGES[userLocale][lang],
@@ -306,8 +308,8 @@ const EmbedderView = ({
    * Render map controls
    */
   const renderMapTypeControl = () => {
-    const getLabel = (map) => intl.formatMessage({ id: `settings.map.${map}` });
-    const mapControls = (generateLabel) => embedderConfig.BACKGROUND_MAPS.map((map) => ({
+    const getLabel = map => intl.formatMessage({ id: `settings.map.${map}` });
+    const mapControls = generateLabel => embedderConfig.BACKGROUND_MAPS.map(map => ({
       value: map,
       label: `${generateLabel(map)}`,
     }));
@@ -332,12 +334,12 @@ const EmbedderView = ({
       return null;
     }
     const cities = city;
-    const cityControls = embedderConfig.CITIES.filter((v) => v).map((city) => ({
+    const cityControls = embedderConfig.CITIES.filter(v => v).map(city => ({
       key: city,
       value: !!cities[city],
       label: uppercaseFirst(city),
       icon: null,
-      onChange: (v) => {
+      onChange: v => {
         const newCities = {};
         Object.assign(newCities, cities);
         newCities[city] = v;
@@ -362,8 +364,8 @@ const EmbedderView = ({
     if (!showServices(embedUrl)) {
       return null;
     }
-    const getLabel = (service) => intl.formatMessage({ id: `embedder.service.${service}` });
-    const serviceControls = (generateLabel) => ['none', 'common', 'all'].map((service) => ({
+    const getLabel = service => intl.formatMessage({ id: `embedder.service.${service}` });
+    const serviceControls = generateLabel => ['none', 'common', 'all'].map(service => ({
       value: service,
       label: generateLabel(service),
     }));
@@ -491,10 +493,17 @@ const EmbedderView = ({
       {
         key: 'units',
         value: showUnits,
-        onChange: (v) => setShowUnits(v),
+        onChange: v => setShowUnits(v),
         icon: null,
         labelId: 'embedder.options.label.units',
       },
+      {
+        key: 'accessibilityAreas',
+        value: accessibilityAreas,
+        onChange: v => setAccessibilityAreas(v),
+        icon: null,
+        labelId: 'embedder.options.label.units.accessibilityAreas',
+      },
     ];
 
     return (
@@ -517,77 +526,77 @@ const EmbedderView = ({
       {
         key: 'bicycleStands',
         value: bicycleStands,
-        onChange: (v) => setBicycleStands(v),
+        onChange: v => setBicycleStands(v),
         icon: null,
         labelId: 'mobilityPlatform.menu.showBicycleStands',
       },
       {
         key: 'frameLockable',
         value: frameLockable,
-        onChange: (v) => setFrameLockable(v),
+        onChange: v => setFrameLockable(v),
         icon: null,
         labelId: 'mobilityPlatform.menu.show.hullLockableStands',
       },
       {
         key: 'cityBikes',
         value: cityBikes,
-        onChange: (v) => setCityBikes(v),
+        onChange: v => setCityBikes(v),
         icon: null,
         labelId: 'mobilityPlatform.menu.showCityBikes',
       },
       {
         key: 'cargoBikes',
         value: cargoBikes,
-        onChange: (v) => setCargoBikes(v),
+        onChange: v => setCargoBikes(v),
         icon: null,
         labelId: 'mobilityPlatform.menu.show.cargoBikes',
       },
       {
         key: 'transit',
         value: transit,
-        onChange: (v) => setTransit(v),
+        onChange: v => setTransit(v),
         icon: null,
         labelId: 'embedder.options.label.transit',
       },
       {
         key: 'crossWalks',
         value: crossWalks,
-        onChange: (v) => setCrossWalks(v),
+        onChange: v => setCrossWalks(v),
         icon: null,
         labelId: 'mobilityPlatform.embedded.label.crossWalks',
       },
       {
         key: 'publicBenches',
         value: publicBenches,
-        onChange: (v) => setPublicBenches(v),
+        onChange: v => setPublicBenches(v),
         icon: null,
         labelId: 'mobilityPlatform.embedded.label.publicBenches',
       },
       {
         key: 'underPass',
         value: underPass,
-        onChange: (v) => setUnderpass(v),
+        onChange: v => setUnderpass(v),
         icon: null,
         labelId: 'mobilityPlatform.menu.show.underPasses',
       },
       {
         key: 'overPass',
         value: overPass,
-        onChange: (v) => setOverPass(v),
+        onChange: v => setOverPass(v),
         icon: null,
         labelId: 'mobilityPlatform.menu.show.overPasses',
       },
       {
         key: 'chargingStation',
         value: chargingStation,
-        onChange: (v) => setChargingStation(v),
+        onChange: v => setChargingStation(v),
         icon: null,
         labelId: 'mobilityPlatform.menu.showChargingStations',
       },
       {
         key: 'rentalCars',
         value: rentalCars,
-        onChange: (v) => setRentalCars(v),
+        onChange: v => setRentalCars(v),
         icon: null,
         labelId: 'mobilityPlatform.menu.showRentalCars',
       },
diff --git a/src/views/EmbedderView/utils/utils.js b/src/views/EmbedderView/utils/utils.js
index d165fd378..b38d255e8 100644
--- a/src/views/EmbedderView/utils/utils.js
+++ b/src/views/EmbedderView/utils/utils.js
@@ -70,6 +70,9 @@ export const getEmbedURL = (url, params = {}) => {
   if (params.overPass) {
     data.overpass = params.overPass ? 1 : 0;
   }
+  if (params.accessibilityAreas) {
+    data.accessibility_areas = params.accessibilityAreas ? 1 : 0;
+  }
   if (params.bbox) {
     data.bbox = params.bbox;
   }

From 38f7f7c51693b9cb040d43e10e246936cea9e365 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Tue, 14 May 2024 10:54:46 +0300
Subject: [PATCH 21/32] Show new input in embedder only for certain units

---
 src/views/EmbedderView/EmbedderView.js           |  6 +++++-
 .../EmbedderView/components/EmbedController.js   | 16 +++++++---------
 src/views/UnitView/UnitView.js                   |  6 +++---
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/views/EmbedderView/EmbedderView.js b/src/views/EmbedderView/EmbedderView.js
index 7259765cb..fb8d856ad 100644
--- a/src/views/EmbedderView/EmbedderView.js
+++ b/src/views/EmbedderView/EmbedderView.js
@@ -83,6 +83,8 @@ const EmbedderView = ({
   const getLocaleText = useLocaleText();
   const userLocale = useUserLocale();
 
+  const isBasicEducation = selectedUnit?.service_names_en?.includes('Basic education');
+
   // States
   const [language, setLanguage] = useState(defaultLanguage);
   const [map, setMap] = useState(defaultMap);
@@ -506,11 +508,13 @@ const EmbedderView = ({
       },
     ];
 
+    const controlsBasic = controls.filter(item => item.key !== 'accessibilityAreas');
+
     return (
       <EmbedController
         titleID="embedder.options.title"
         titleComponent="h2"
-        checkboxControls={controls}
+        checkboxControls={isBasicEducation ? controls : controlsBasic}
         checkboxLabelledBy="embedder.options.title"
       />
     );
diff --git a/src/views/EmbedderView/components/EmbedController.js b/src/views/EmbedderView/components/EmbedController.js
index a671d5cf3..94618833e 100644
--- a/src/views/EmbedderView/components/EmbedController.js
+++ b/src/views/EmbedderView/components/EmbedController.js
@@ -48,7 +48,7 @@ const CustomInput = withStyles(customStyles)(({
     setValue(initialValue);
   }, [initialValue]);
 
-  const inputOnChange = (e) => {
+  const inputOnChange = e => {
     setValue(e.target.value);
     if (onChange) {
       onChange(e, e.target.value);
@@ -81,7 +81,7 @@ const CustomInput = withStyles(customStyles)(({
               aria-label={buttonText}
               color="primary"
               className={classes.iconButton}
-              onClick={(e) => { buttonClick(e, value); }}
+              onClick={e => { buttonClick(e, value); }}
               variant="contained"
             >
               {buttonText}
@@ -121,10 +121,9 @@ const EmbedController = ({
       return null;
     }
     return (
-      <>
-        <FormGroup row role="group" aria-labelledby={checkboxLabelledBy}>
-          <List className={classes.list}>
-            {
+      <FormGroup row role="group" aria-labelledby={checkboxLabelledBy}>
+        <List className={classes.list}>
+          {
               checkboxControls.map(item => (
                 <ListItem className={classes.checkbox} key={item.key}>
                   <FormControlLabel
@@ -152,9 +151,8 @@ const EmbedController = ({
                 </ListItem>
               ))
             }
-          </List>
-        </FormGroup>
-      </>
+        </List>
+      </FormGroup>
     );
   };
 
diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index a7adb2367..8aae6058a 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -91,8 +91,8 @@ const UnitView = props => {
     page_size: 150,
   };
 
-  const isUnitSchool = unit?.service_names_fi?.includes('Perusopetus');
-  const fetchAccessibiliyAreas = isExternalTheme && isUnitSchool;
+  const isBasicEducation = unit?.service_names_en?.includes('Basic education');
+  const fetchAccessibiliyAreas = isExternalTheme && isBasicEducation;
 
   /**
    * Fetch unit (school) accessibility areas data
@@ -466,7 +466,7 @@ const UnitView = props => {
    * @returns array
    */
   const getTabsData = tabsData => {
-    if (isExternalTheme && hasAccessibilityAreas) {
+    if (hasAccessibilityAreas) {
       return tabsData;
     }
     return tabsData.filter(item => item.id !== 'accessibilityAreas');

From 1cc3b0277aca9218fd751468b182f60ef203870a Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 15 May 2024 15:39:38 +0300
Subject: [PATCH 22/32] Show filtered accessibility areas in embedder

---
 .../AccessibilityAreas/AccessibilityAreas.js  | 14 +++++++++----
 src/i18n/en.js                                |  2 ++
 src/i18n/fi.js                                |  2 ++
 src/i18n/sv.js                                |  2 ++
 src/views/EmbedderView/EmbedderView.js        | 20 ++++++++++++++++++-
 src/views/EmbedderView/utils/utils.js         |  6 ++++++
 6 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 273e1164a..52499554f 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -72,6 +72,8 @@ const AccessibilityAreas = () => {
   };
 
   const paramValue = url.searchParams.get('accessibility_areas') === '1';
+  const paramValueWalk = url.searchParams.get('accessibility_areas_walk') === '1';
+  const paramValueBicycle = url.searchParams.get('accessibility_areas_bicycle') === '1';
   const filteredAreasWalking = accessibilityAreasData.filter(
     item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('kävely'),
   );
@@ -79,8 +81,8 @@ const AccessibilityAreas = () => {
     item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('pyöräily'),
   );
   const renderAll = setRender(paramValue, embedded, showAccessibilityAreas.all, accessibilityAreasData, isDataValid);
-  const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking);
-  const renderCycling = isDataValid(showAccessibilityAreas.cycling, filteredAreasCycling);
+  const renderWalking = setRender(paramValueWalk, embedded, showAccessibilityAreas.walking, filteredAreasWalking, isDataValid);
+  const renderCycling = setRender(paramValueBicycle, embedded, showAccessibilityAreas.cycling, filteredAreasCycling, isDataValid);
 
   useEffect(() => {
     if (!embedded) {
@@ -89,11 +91,15 @@ const AccessibilityAreas = () => {
   }, [showAccessibilityAreas.all, accessibilityAreasData]);
 
   useEffect(() => {
-    fitPolygonsToBounds(renderWalking, filteredAreasWalking, map);
+    if (!embedded) {
+      fitPolygonsToBounds(renderWalking, filteredAreasWalking, map);
+    }
   }, [showAccessibilityAreas.walking, filteredAreasWalking]);
 
   useEffect(() => {
-    fitPolygonsToBounds(renderCycling, filteredAreasCycling, map);
+    if (!embedded) {
+      fitPolygonsToBounds(renderCycling, filteredAreasCycling, map);
+    }
   }, [showAccessibilityAreas.cycling, filteredAreasCycling]);
 
   const getSingleCoordinates = data => data[0][0];
diff --git a/src/i18n/en.js b/src/i18n/en.js
index e603281df..d588cbdf3 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -237,6 +237,8 @@ const translations = {
   'embedder.options.title': 'Show on the map',
   'embedder.options.label.units': 'Show service points',
   'embedder.options.label.units.accessibilityAreas': 'Show accessibility areas',
+  'embedder.options.label.units.accessibilityAreas.walk': 'Show accessibility areas (walking)',
+  'embedder.options.label.units.accessibilityAreas.bicycle': 'Show accessibility areas (cycling)',
   'embedder.options.list.title': 'List of service points',
   'embedder.options.label.list.none': 'Hide the list of service points',
   'embedder.options.label.list.side': 'Show service points as a list (beside the map)',
diff --git a/src/i18n/fi.js b/src/i18n/fi.js
index 81b5892ac..a73e83547 100644
--- a/src/i18n/fi.js
+++ b/src/i18n/fi.js
@@ -239,6 +239,8 @@ const translations = {
   'embedder.options.title': 'Näytä kartalla',
   'embedder.options.label.units': 'Näytä toimipisteet',
   'embedder.options.label.units.accessibilityAreas': 'Näytä lähestymisalueet',
+  'embedder.options.label.units.accessibilityAreas.walk': 'Näytä lähestymisalueet (kävely)',
+  'embedder.options.label.units.accessibilityAreas.bicycle': 'Näytä lähestymisalueet (pyöräily)',
   'embedder.options.list.title': 'Toimipistelista',
   'embedder.options.label.list.none': 'Piilota toimipistelista',
   'embedder.options.label.list.side': 'Näytä toimipisteet listana (kartan vieressä)',
diff --git a/src/i18n/sv.js b/src/i18n/sv.js
index fcd55af17..ba2b28a36 100644
--- a/src/i18n/sv.js
+++ b/src/i18n/sv.js
@@ -240,6 +240,8 @@ const translations = {
   'embedder.options.title': 'Visa på kartan',
   'embedder.options.label.units': 'Visa verksamhetsställen',
   'embedder.options.label.units.accessibilityAreas': 'Visa tillgänglighetsområden',
+  'embedder.options.label.units.accessibilityAreas.walk': 'Visa tillgänglighetsområden (promenad)',
+  'embedder.options.label.units.accessibilityAreas.bicycle': 'Visa tillgänglighetsområden (cykling)',
   'embedder.options.list.title': 'List med verksamhetsställen',
   'embedder.options.label.list.none': 'Ta bort listan med verksamhetsställen',
   'embedder.options.label.list.side': 'Visa verksamhetsställen som en lista (intill kartan)',
diff --git a/src/views/EmbedderView/EmbedderView.js b/src/views/EmbedderView/EmbedderView.js
index fb8d856ad..d7f54f2c2 100644
--- a/src/views/EmbedderView/EmbedderView.js
+++ b/src/views/EmbedderView/EmbedderView.js
@@ -112,6 +112,8 @@ const EmbedderView = ({
   const [overPass, setOverPass] = useState(false);
   const [publicBenches, setPublicBenches] = useState(false);
   const [accessibilityAreas, setAccessibilityAreas] = useState(false);
+  const [accessibilityAreasWalk, setAccessibilityAreasWalk] = useState(false);
+  const [accessibilityAreasBicycle, setAccessibilityAreasBicycle] = useState(false);
 
   const boundsRef = useRef([]);
   const dialogRef = useRef();
@@ -140,6 +142,8 @@ const EmbedderView = ({
     overPass,
     publicBenches,
     accessibilityAreas,
+    accessibilityAreasWalk,
+    accessibilityAreasBicycle,
     bbox: selectedBbox,
   });
 
@@ -506,9 +510,23 @@ const EmbedderView = ({
         icon: null,
         labelId: 'embedder.options.label.units.accessibilityAreas',
       },
+      {
+        key: 'accessibilityAreasWalk',
+        value: accessibilityAreasWalk,
+        onChange: v => setAccessibilityAreasWalk(v),
+        icon: null,
+        labelId: 'embedder.options.label.units.accessibilityAreas.walk',
+      },
+      {
+        key: 'accessibilityAreasBicycle',
+        value: accessibilityAreasBicycle,
+        onChange: v => setAccessibilityAreasBicycle(v),
+        icon: null,
+        labelId: 'embedder.options.label.units.accessibilityAreas.bicycle',
+      },
     ];
 
-    const controlsBasic = controls.filter(item => item.key !== 'accessibilityAreas');
+    const controlsBasic = controls.filter(item => item.key === 'units');
 
     return (
       <EmbedController
diff --git a/src/views/EmbedderView/utils/utils.js b/src/views/EmbedderView/utils/utils.js
index b38d255e8..bf3e55d62 100644
--- a/src/views/EmbedderView/utils/utils.js
+++ b/src/views/EmbedderView/utils/utils.js
@@ -73,6 +73,12 @@ export const getEmbedURL = (url, params = {}) => {
   if (params.accessibilityAreas) {
     data.accessibility_areas = params.accessibilityAreas ? 1 : 0;
   }
+  if (params.accessibilityAreasWalk) {
+    data.accessibility_areas_walk = params.accessibilityAreasWalk ? 1 : 0;
+  }
+  if (params.accessibilityAreasBicycle) {
+    data.accessibility_areas_bicycle = params.accessibilityAreasBicycle ? 1 : 0;
+  }
   if (params.bbox) {
     data.bbox = params.bbox;
   }

From 643e20c5acf52e7ab423aff3978e7f781744a66a Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 15 May 2024 16:13:51 +0300
Subject: [PATCH 23/32] Show filtered areas with markers

---
 .../MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index 52499554f..b7e25049c 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -133,6 +133,8 @@ const AccessibilityAreas = () => {
   return (
     <>
       {renderMarkers(renderAll, accessibilityAreasData)}
+      {renderMarkers(renderWalking, filteredAreasWalking)}
+      {renderMarkers(renderCycling, filteredAreasCycling)}
       {renderPolygons(renderAll, accessibilityAreasData)}
       {renderPolygons(renderWalking, filteredAreasWalking)}
       {renderPolygons(renderCycling, filteredAreasCycling)}

From ecf47dfda86f8ffb84f635c5e99def6d0d14a1d1 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Thu, 16 May 2024 16:04:50 +0300
Subject: [PATCH 24/32] Get initial values from context in the embedder

---
 src/views/EmbedderView/EmbedderView.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/views/EmbedderView/EmbedderView.js b/src/views/EmbedderView/EmbedderView.js
index d7f54f2c2..c9889580a 100644
--- a/src/views/EmbedderView/EmbedderView.js
+++ b/src/views/EmbedderView/EmbedderView.js
@@ -12,16 +12,17 @@ import { useSelector } from 'react-redux';
 import * as smurl from './utils/url';
 import isClient, { uppercaseFirst } from '../../utils';
 import { getEmbedURL, getLanguage } from './utils/utils';
-import EmbedController from './components/EmbedController';
-import IFramePreview from './components/IFramePreview';
 import paths from '../../../config/paths';
 import embedderConfig from './embedderConfig';
 import SettingsUtility from '../../utils/settings';
 import useLocaleText from '../../utils/useLocaleText';
 import { useUserLocale } from '../../utils/user';
+import { useMobilityPlatformContext } from '../../context/MobilityPlatformContext';
+import config from '../../../config';
+import EmbedController from './components/EmbedController';
+import IFramePreview from './components/IFramePreview';
 import EmbedHTML from './components/EmbedHTML';
 import TopBar from '../../components/TopBar';
-import config from '../../../config';
 import { CloseButton, SMButton } from '../../components';
 
 const hideCitiesIn = [
@@ -83,6 +84,7 @@ const EmbedderView = ({
   const getLocaleText = useLocaleText();
   const userLocale = useUserLocale();
 
+  const { showAccessibilityAreas } = useMobilityPlatformContext();
   const isBasicEducation = selectedUnit?.service_names_en?.includes('Basic education');
 
   // States
@@ -111,9 +113,9 @@ const EmbedderView = ({
   const [underPass, setUnderpass] = useState(false);
   const [overPass, setOverPass] = useState(false);
   const [publicBenches, setPublicBenches] = useState(false);
-  const [accessibilityAreas, setAccessibilityAreas] = useState(false);
-  const [accessibilityAreasWalk, setAccessibilityAreasWalk] = useState(false);
-  const [accessibilityAreasBicycle, setAccessibilityAreasBicycle] = useState(false);
+  const [accessibilityAreas, setAccessibilityAreas] = useState(showAccessibilityAreas.all);
+  const [accessibilityAreasWalk, setAccessibilityAreasWalk] = useState(showAccessibilityAreas.walking);
+  const [accessibilityAreasBicycle, setAccessibilityAreasBicycle] = useState(showAccessibilityAreas.cycling);
 
   const boundsRef = useRef([]);
   const dialogRef = useRef();

From 8b87f2a234e3e428c336d628b5049d38ea8a82fb Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Tue, 21 May 2024 14:01:14 +0300
Subject: [PATCH 25/32] Improve contrast view & update styles

---
 .../AccessibilityAreas/AccessibilityAreas.js  | 75 ++++++++++++-------
 .../AccessibilityAreasContent.js              |  2 +-
 .../AccessibilityAreasContent.test.js.snap    |  4 +-
 .../PolygonComponent/PolygonComponent.js      | 10 +--
 4 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index b7e25049c..b5c46e415 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -19,7 +19,7 @@ import {
   blackOptionsBase,
 } from '../utils/utils';
 import { isEmbed } from '../../../utils/path';
-import PolygonComponent from '../PolygonComponent';
+import { StyledPopupWrapper, StyledPopupInner } from '../styled/styled';
 import AccessibilityAreasContent from './components/AccessibilityAreasContent';
 
 /**
@@ -36,27 +36,34 @@ const AccessibilityAreas = () => {
   const embedded = isEmbed({ url: url.toString() });
 
   const map = useMap();
-  const { Marker, Popup } = global.rL;
+  const { Marker, Polygon, Popup } = global.rL;
   const { icon } = global.L;
 
   const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3', fillOpacity: '0' });
   const greenOptions = greenOptionsBase({ weight: 5, fillOpacity: '0' });
   const blackOptions = blackOptionsBase({ weight: 5 });
-  const whiteOptions = whiteOptionsBase({
-    fillOpacity: 0.3,
+  const whiteOptionsDashed = whiteOptionsBase({
+    fillOpacity: '0.1',
+    weight: 5,
+    dashArray: '12 6 3',
+  });
+  const whiteOptionsSolid = whiteOptionsBase({
+    fillOpacity: '0.1',
     weight: 5,
-    dashArray: '12',
   });
 
   const getPathOptions = transportType => {
-    if (transportType?.includes('kävely')) {
+    if (!useContrast && transportType?.includes('kävely')) {
       return blueOptions;
     }
-    if (transportType?.includes('pyöräily')) {
+    if (!useContrast && transportType?.includes('pyöräily')) {
       return greenOptions;
     }
-    if (useContrast) {
-      return whiteOptions;
+    if (useContrast && transportType?.includes('kävely')) {
+      return whiteOptionsDashed;
+    }
+    if (useContrast && transportType?.includes('pyöräily')) {
+      return whiteOptionsSolid;
     }
     return blackOptions;
   };
@@ -81,8 +88,20 @@ const AccessibilityAreas = () => {
     item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('pyöräily'),
   );
   const renderAll = setRender(paramValue, embedded, showAccessibilityAreas.all, accessibilityAreasData, isDataValid);
-  const renderWalking = setRender(paramValueWalk, embedded, showAccessibilityAreas.walking, filteredAreasWalking, isDataValid);
-  const renderCycling = setRender(paramValueBicycle, embedded, showAccessibilityAreas.cycling, filteredAreasCycling, isDataValid);
+  const renderWalking = setRender(
+    paramValueWalk,
+    embedded,
+    showAccessibilityAreas.walking,
+    filteredAreasWalking,
+    isDataValid,
+  );
+  const renderCycling = setRender(
+    paramValueBicycle,
+    embedded,
+    showAccessibilityAreas.cycling,
+    filteredAreasCycling,
+    isDataValid,
+  );
 
   useEffect(() => {
     if (!embedded) {
@@ -106,27 +125,33 @@ const AccessibilityAreas = () => {
 
   const renderMarkers = (showData, data) => (showData
     ? data.map(item => (
-      <div key={item.id}>
-        <Marker icon={getCorrectIcon(item.extra.kulkumuoto)} position={getSingleCoordinates(item.geometry_coords)}>
+      <Marker
+        key={item.id}
+        icon={getCorrectIcon(item.extra.kulkumuoto)}
+        position={getSingleCoordinates(item.geometry_coords)}
+      >
+        <StyledPopupWrapper>
           <Popup>
-            <AccessibilityAreasContent item={item} />
+            <StyledPopupInner>
+              <AccessibilityAreasContent item={item} />
+            </StyledPopupInner>
           </Popup>
-        </Marker>
-      </div>
+        </StyledPopupWrapper>
+      </Marker>
     ))
     : null);
 
   const renderPolygons = (showData, data) => (showData
     ? data.map(item => (
-      <PolygonComponent
-        key={item.id}
-        item={item}
-        useContrast={useContrast}
-        pathOptions={getPathOptions(item.extra.kulkumuoto)}
-        isTransparent
-      >
-        <AccessibilityAreasContent item={item} />
-      </PolygonComponent>
+      <Polygon key={item.id} pathOptions={getPathOptions(item.extra.kulkumuoto)} positions={item.geometry_coords}>
+        <StyledPopupWrapper>
+          <Popup>
+            <StyledPopupInner>
+              <AccessibilityAreasContent item={item} />
+            </StyledPopupInner>
+          </Popup>
+        </StyledPopupWrapper>
+      </Polygon>
     ))
     : null);
 
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
index a10ad0817..d6dd5e066 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js
@@ -34,7 +34,7 @@ const AccessibilityAreasContent = ({ item }) => {
     </StyledContainer>
   );
 
-  return <StyledContainer>{contentInfo}</StyledContainer>;
+  return <div>{contentInfo}</div>;
 };
 
 AccessibilityAreasContent.propTypes = {
diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap
index a1b596c87..0b629c5ee 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap
+++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/__tests__/__snapshots__/AccessibilityAreasContent.test.js.snap
@@ -2,9 +2,7 @@
 
 exports[`<AccessibilityAreasContent /> should work 1`] = `
 <div>
-  <div
-    class="css-1ynyhby"
-  >
+  <div>
     <div
       class="css-1ynyhby"
     >
diff --git a/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js b/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js
index 8d04340b2..3d27c08a9 100644
--- a/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js
+++ b/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js
@@ -3,12 +3,10 @@ import { PropTypes } from 'prop-types';
 import { StyledPopupWrapper, StyledPopupInner } from '../styled/styled';
 
 const PolygonComponent = ({
-  item, useContrast, pathOptions, isTransparent, children,
+  item, useContrast, pathOptions, children,
 }) => {
   const { Polygon, Popup } = global.rL;
 
-  const opacityValue = isTransparent ? '0' : '0.2';
-
   return (
     <Polygon
       key={item.id}
@@ -16,10 +14,10 @@ const PolygonComponent = ({
       positions={item.geometry_coords}
       eventHandlers={{
         mouseover: e => {
-          e.target.setStyle({ fillOpacity: useContrast ? '0.6' : opacityValue });
+          e.target.setStyle({ fillOpacity: useContrast ? '0.6' : '0.2' });
         },
         mouseout: e => {
-          e.target.setStyle({ fillOpacity: useContrast ? '0.3' : opacityValue });
+          e.target.setStyle({ fillOpacity: useContrast ? '0.3' : '0.2' });
         },
       }}
     >
@@ -42,13 +40,11 @@ PolygonComponent.propTypes = {
     color: PropTypes.string,
     weight: PropTypes.number,
   }).isRequired,
-  isTransparent: PropTypes.bool,
   children: PropTypes.node,
 };
 
 PolygonComponent.defaultProps = {
   useContrast: false,
-  isTransparent: false,
   children: null,
 };
 

From 1bbb6ea8b1769ab0351a130235833881074e1488 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Fri, 24 May 2024 15:14:26 +0300
Subject: [PATCH 26/32] Render new embedder controls only when unit has
 accessibility areas

---
 src/views/EmbedderView/EmbedderView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/EmbedderView/EmbedderView.js b/src/views/EmbedderView/EmbedderView.js
index c9889580a..ebcb62892 100644
--- a/src/views/EmbedderView/EmbedderView.js
+++ b/src/views/EmbedderView/EmbedderView.js
@@ -84,8 +84,8 @@ const EmbedderView = ({
   const getLocaleText = useLocaleText();
   const userLocale = useUserLocale();
 
-  const { showAccessibilityAreas } = useMobilityPlatformContext();
-  const isBasicEducation = selectedUnit?.service_names_en?.includes('Basic education');
+  const { showAccessibilityAreas, accessibilityAreasData } = useMobilityPlatformContext();
+  const hasAccessibilityAreas = accessibilityAreasData.some(item => item?.extra?.kohde_ID === selectedUnit?.id);
 
   // States
   const [language, setLanguage] = useState(defaultLanguage);
@@ -534,7 +534,7 @@ const EmbedderView = ({
       <EmbedController
         titleID="embedder.options.title"
         titleComponent="h2"
-        checkboxControls={isBasicEducation ? controls : controlsBasic}
+        checkboxControls={hasAccessibilityAreas ? controls : controlsBasic}
         checkboxLabelledBy="embedder.options.title"
       />
     );

From 46485d1cba2655e16236ce494864ba8ea583a9b0 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Tue, 28 May 2024 10:35:31 +0300
Subject: [PATCH 27/32] Add finalized texts & translations

---
 src/i18n/en.js | 24 ++++++++++++------------
 src/i18n/fi.js |  6 +++---
 src/i18n/sv.js | 14 +++++++-------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/i18n/en.js b/src/i18n/en.js
index d918d7467..23f682cb9 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -242,9 +242,9 @@ const translations = {
   'embedder.preview.title': 'Map preview',
   'embedder.options.title': 'Show on the map',
   'embedder.options.label.units': 'Show service points',
-  'embedder.options.label.units.accessibilityAreas': 'Show accessibility areas',
-  'embedder.options.label.units.accessibilityAreas.walk': 'Show accessibility areas (walking)',
-  'embedder.options.label.units.accessibilityAreas.bicycle': 'Show accessibility areas (cycling)',
+  'embedder.options.label.units.accessibilityAreas': 'Show accessibility zones',
+  'embedder.options.label.units.accessibilityAreas.walk': 'Show accessibility zones (walking)',
+  'embedder.options.label.units.accessibilityAreas.bicycle': 'Show accessibility zones (cycling)',
   'embedder.options.list.title': 'List of service points',
   'embedder.options.label.list.none': 'Hide the list of service points',
   'embedder.options.label.list.side': 'Show service points as a list (beside the map)',
@@ -470,7 +470,7 @@ const translations = {
   'unit.details.notFound': 'Service point info not available.',
   'unit.plural': 'Service points',
   'unit.distance': 'Distance',
-  'unit.accessibilityAreas': 'Accessibility areas',
+  'unit.accessibilityAreas': 'Accessibility zones',
   'unit.contact.info': 'Contact information',
   'unit.links': 'Web sites',
   'unit.eServices': 'Electronic services',
@@ -535,14 +535,14 @@ const translations = {
   'unit.outdoorLink': 'Check the condition of an exercise location in the ulkoliikunta.fi service',
   'unit.seo.description': 'View service point on the map',
   'unit.seo.description.accessibility': 'View accessibility info and service point on the map',
-  'unit.accessibilityAreas.title': 'Accessibility areas',
-  'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text
-  'unit.accessibilityAreas.all.label': 'All accessibility areas',
-  'unit.accessibilityAreas.walking.label': 'Accessibility areas (walking)',
-  'unit.accessibilityAreas.cycling.label': 'Accessibility areas (cycling)',
-  'unit.accessibilityAreas.content.subtitle': 'Accessibility area:',
-  'unit.accessibilityAreas.content.transport': 'Mode of transport: {value}', // TODO verify
-  'unit.accessibilityAreas.content.duration': 'Estimated duration: {value} minutes', // TODO verify
+  'unit.accessibilityAreas.title': 'Accessibility zones',
+  'unit.accessibilityAreas.description': 'Accessibility zones indicate how long it takes to reach a destination by walking or cycling. The times are calculated based on average speeds of children (walking 4 km/h, cycling 10 km/h).',
+  'unit.accessibilityAreas.all.label': 'All accessibility zones',
+  'unit.accessibilityAreas.walking.label': 'Accessibility zones (walking)',
+  'unit.accessibilityAreas.cycling.label': 'Accessibility zones (cycling)',
+  'unit.accessibilityAreas.content.subtitle': 'Accessibility zone:',
+  'unit.accessibilityAreas.content.transport': 'Mode of transport: {value}',
+  'unit.accessibilityAreas.content.duration': 'Estimated duration: {value} minutes',
 
   // Search
   'search': 'Search',
diff --git a/src/i18n/fi.js b/src/i18n/fi.js
index 2a776c2aa..2ce91b006 100644
--- a/src/i18n/fi.js
+++ b/src/i18n/fi.js
@@ -540,13 +540,13 @@ const translations = {
   'unit.seo.description': 'Katso sijainti kartalla',
   'unit.seo.description.accessibility': 'Katso esteettömyystiedot ja sijainti kartalla',
   'unit.accessibilityAreas.title': 'Lähestymisalueet',
-  'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text
+  'unit.accessibilityAreas.description': 'Lähestymisalueet kertovat, kuinka pitkä ajallinen etäisyys kohteeseen on kävellen tai pyöräillen. Ajat on laskettu keskimääräisillä lasten nopeuksilla (kävely 4 km/h, pyöräily 10 km/h).',
   'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet',
   'unit.accessibilityAreas.walking.label': 'Lähestymisalueet (kävely)',
   'unit.accessibilityAreas.cycling.label': 'Lähestymisalueet (pyöräily)',
   'unit.accessibilityAreas.content.subtitle': 'Lähestymisalue:',
-  'unit.accessibilityAreas.content.transport': 'Kulkumuto: {value}', // TODO verify
-  'unit.accessibilityAreas.content.duration': 'Arvioitu aika: {value} minuuttia', // TODO verify
+  'unit.accessibilityAreas.content.transport': 'Kulkumuto: {value}',
+  'unit.accessibilityAreas.content.duration': 'Arvioitu aika: {value} minuuttia',
 
   // Search
   'search': 'Hae',
diff --git a/src/i18n/sv.js b/src/i18n/sv.js
index 16093ac80..5c10b10b8 100644
--- a/src/i18n/sv.js
+++ b/src/i18n/sv.js
@@ -539,14 +539,14 @@ const translations = {
   'unit.outdoorLink': 'Kolla skicket på en motionsplats i tjänsten ulkoliikunta.fi',
   'unit.seo.description': 'Se läget på kartan',
   'unit.seo.description.accessibility': 'Se tillgänglighetsuppgifterna och läget på kartan',
-  'unit.accessibilityAreas.title': 'Tillgänglighetsområden',
-  'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text
-  'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden',
-  'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområden (promenad)',
-  'unit.accessibilityAreas.cycling.label': 'Tillgänglighetsområden (cykling)',
+  'unit.accessibilityAreas.title': 'Tillgänglighetsområdena',
+  'unit.accessibilityAreas.description': 'Tillgänglighetsområdena berättar hur lång tid det tar att gå eller cykla till destinationen. Tiderna har beräknats med genomsnittliga barnhastigheter (gång 4 km/h, cykling 10 km/h).',
+  'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområdena',
+  'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområdena (promenad)',
+  'unit.accessibilityAreas.cycling.label': 'Tillgänglighetsområdena (cykling)',
   'unit.accessibilityAreas.content.subtitle': 'Tillgänglighetsområd:',
-  'unit.accessibilityAreas.content.transport': 'Transportsätt: {value}', // TODO verify
-  'unit.accessibilityAreas.content.duration': 'beräknad varaktighet: {value} minuter', // TODO verify
+  'unit.accessibilityAreas.content.transport': 'Transportsätt: {value}',
+  'unit.accessibilityAreas.content.duration': 'Beräknad varaktighet: {value} minuter',
 
   // Search
   'search': 'Sök',

From 4aa8f905f99c15bf7911c577d13078be5c1e02ec Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Tue, 28 May 2024 12:30:37 +0300
Subject: [PATCH 28/32] Adjust styles

---
 .../AccessibilityAreasInfo/AccessibilityAreasInfo.js      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
index db8fe9e1b..a114b4ba4 100644
--- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
+++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js
@@ -75,18 +75,18 @@ const AccessibilityAreasInfo = () => {
 
 const StyledContent = styled.div(({ theme }) => ({
   paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  paddingBottom: theme.spacing(2),
+  paddingRight: theme.spacing(1),
 }));
 
 const StyledContainer = styled(Container)(() => ({
   alignItems: 'flex-start',
+  textAlign: 'left',
 }));
 
 const StyledCheckBoxContainer = styled.div(({ theme }) => ({
   width: '100%',
-  paddingTop: theme.spacing(1.5),
-  paddingBottom: theme.spacing(1.5),
+  paddingTop: theme.spacing(1),
+  paddingBottom: theme.spacing(1),
   textAlign: 'left',
 }));
 

From 9ea8ad086270e1c88e6436479c23344c6031b999 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Tue, 28 May 2024 12:50:37 +0300
Subject: [PATCH 29/32] Update comment

---
 src/views/UnitView/UnitView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index 8aae6058a..6604eff31 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -461,7 +461,7 @@ const UnitView = props => {
   );
 
   /**
-   * Filter out the accessibility areas object from tabs if isExternalTheme is false.
+   * Filter out the accessibility areas object from tabs if unit doesn't have them.
    * @param {*} tabsData
    * @returns array
    */

From 3c0ab5ab90629096e5cf230084d647e640c08a59 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Tue, 28 May 2024 14:08:23 +0300
Subject: [PATCH 30/32] Update text

---
 src/i18n/en.js | 2 +-
 src/i18n/fi.js | 2 +-
 src/i18n/sv.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/en.js b/src/i18n/en.js
index 23f682cb9..dc1e22dc4 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -535,7 +535,7 @@ const translations = {
   'unit.outdoorLink': 'Check the condition of an exercise location in the ulkoliikunta.fi service',
   'unit.seo.description': 'View service point on the map',
   'unit.seo.description.accessibility': 'View accessibility info and service point on the map',
-  'unit.accessibilityAreas.title': 'Accessibility zones',
+  'unit.accessibilityAreas.title': 'Accessibility zones of schools and daycares',
   'unit.accessibilityAreas.description': 'Accessibility zones indicate how long it takes to reach a destination by walking or cycling. The times are calculated based on average speeds of children (walking 4 km/h, cycling 10 km/h).',
   'unit.accessibilityAreas.all.label': 'All accessibility zones',
   'unit.accessibilityAreas.walking.label': 'Accessibility zones (walking)',
diff --git a/src/i18n/fi.js b/src/i18n/fi.js
index 2ce91b006..c098a12f8 100644
--- a/src/i18n/fi.js
+++ b/src/i18n/fi.js
@@ -539,7 +539,7 @@ const translations = {
   'unit.outdoorLink': 'Katso liikuntapaikan kunto ulkoliikunta.fi palvelusta',
   'unit.seo.description': 'Katso sijainti kartalla',
   'unit.seo.description.accessibility': 'Katso esteettömyystiedot ja sijainti kartalla',
-  'unit.accessibilityAreas.title': 'Lähestymisalueet',
+  'unit.accessibilityAreas.title': 'Koulujen ja päiväkotien lähestymisalueet',
   'unit.accessibilityAreas.description': 'Lähestymisalueet kertovat, kuinka pitkä ajallinen etäisyys kohteeseen on kävellen tai pyöräillen. Ajat on laskettu keskimääräisillä lasten nopeuksilla (kävely 4 km/h, pyöräily 10 km/h).',
   'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet',
   'unit.accessibilityAreas.walking.label': 'Lähestymisalueet (kävely)',
diff --git a/src/i18n/sv.js b/src/i18n/sv.js
index 5c10b10b8..5cd9bf78d 100644
--- a/src/i18n/sv.js
+++ b/src/i18n/sv.js
@@ -539,7 +539,7 @@ const translations = {
   'unit.outdoorLink': 'Kolla skicket på en motionsplats i tjänsten ulkoliikunta.fi',
   'unit.seo.description': 'Se läget på kartan',
   'unit.seo.description.accessibility': 'Se tillgänglighetsuppgifterna och läget på kartan',
-  'unit.accessibilityAreas.title': 'Tillgänglighetsområdena',
+  'unit.accessibilityAreas.title': 'Tillgänglighetsområdena av skolor och daghem',
   'unit.accessibilityAreas.description': 'Tillgänglighetsområdena berättar hur lång tid det tar att gå eller cykla till destinationen. Tiderna har beräknats med genomsnittliga barnhastigheter (gång 4 km/h, cykling 10 km/h).',
   'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområdena',
   'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområdena (promenad)',

From 6f3a5f137bd20dd056387ac8369ad4e303972110 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Wed, 29 May 2024 12:44:33 +0300
Subject: [PATCH 31/32] Change tab id

---
 src/views/UnitView/UnitView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
index 6604eff31..9e189e4d4 100644
--- a/src/views/UnitView/UnitView.js
+++ b/src/views/UnitView/UnitView.js
@@ -469,7 +469,7 @@ const UnitView = props => {
     if (hasAccessibilityAreas) {
       return tabsData;
     }
-    return tabsData.filter(item => item.id !== 'accessibilityAreas');
+    return tabsData.filter(item => item.id !== 'accessibilityZones');
   };
 
   const render = () => {
@@ -549,7 +549,7 @@ const UnitView = props => {
           title: intl.formatMessage({ id: 'service.tab' }),
         },
         {
-          id: 'accessibilityAreas',
+          id: 'accessibilityZones',
           ariaLabel: intl.formatMessage({ id: 'unit.accessibilityAreas' }),
           component: renderAccessibilityAreasTab(),
           data: null,

From 1cdafa83cfb3972c4e0f11d5ae67bbef325a7e56 Mon Sep 17 00:00:00 2001
From: juhomakkonen <juho.makkonen@turku.fi>
Date: Thu, 30 May 2024 10:40:04 +0300
Subject: [PATCH 32/32] Use variable when checking object values

---
 .../AccessibilityAreas/AccessibilityAreas.js  | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
index b5c46e415..43736b41c 100644
--- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
+++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js
@@ -39,6 +39,9 @@ const AccessibilityAreas = () => {
   const { Marker, Polygon, Popup } = global.rL;
   const { icon } = global.L;
 
+  const walk = 'kävely';
+  const bicycle = 'pyöräily';
+
   const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3', fillOpacity: '0' });
   const greenOptions = greenOptionsBase({ weight: 5, fillOpacity: '0' });
   const blackOptions = blackOptionsBase({ weight: 5 });
@@ -53,16 +56,18 @@ const AccessibilityAreas = () => {
   });
 
   const getPathOptions = transportType => {
-    if (!useContrast && transportType?.includes('kävely')) {
+    const isWalk = transportType.includes(walk);
+    const isBicycle = transportType.includes(bicycle);
+    if (!useContrast && isWalk) {
       return blueOptions;
     }
-    if (!useContrast && transportType?.includes('pyöräily')) {
+    if (!useContrast && isBicycle) {
       return greenOptions;
     }
-    if (useContrast && transportType?.includes('kävely')) {
+    if (useContrast && isWalk) {
       return whiteOptionsDashed;
     }
-    if (useContrast && transportType?.includes('pyöräily')) {
+    if (useContrast && isBicycle) {
       return whiteOptionsSolid;
     }
     return blackOptions;
@@ -72,7 +77,7 @@ const AccessibilityAreas = () => {
   const cyclingAreaIcon = icon(createIcon(useContrast ? cyclingIconBw : cyclingIcon, true));
 
   const getCorrectIcon = transportType => {
-    if (transportType?.includes('kävely')) {
+    if (transportType?.includes(walk)) {
       return walkingAreaIcon;
     }
     return cyclingAreaIcon;
@@ -82,10 +87,10 @@ const AccessibilityAreas = () => {
   const paramValueWalk = url.searchParams.get('accessibility_areas_walk') === '1';
   const paramValueBicycle = url.searchParams.get('accessibility_areas_bicycle') === '1';
   const filteredAreasWalking = accessibilityAreasData.filter(
-    item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('kävely'),
+    item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes(walk),
   );
   const filteredAreasCycling = accessibilityAreasData.filter(
-    item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('pyöräily'),
+    item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes(bicycle),
   );
   const renderAll = setRender(paramValue, embedded, showAccessibilityAreas.all, accessibilityAreasData, isDataValid);
   const renderWalking = setRender(