Merge branch 'develop' of https://github.com/Amsterdam/ee-react-map-d…

…emos into feature/SCTS-7-legenda-styling
Amsterdam · May 22, 2024 · 55734cf · 55734cf
2 parents 45fe4c2 + e1b6949
commit 55734cf
Show file tree

Hide file tree

Showing 28 changed files with 829 additions and 2 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -20,6 +20,20 @@ export const parameters = {
   backgrounds: {
     disable: true,
   },
+  options: {
+    storySort: {
+      order: [
+        'Introduction',
+        'Alternative*',
+        'Coordinate*',
+        'Global',
+        'React',
+        'React-Leaflet',
+        'Components',
+        'Patterns',
+      ],
+    },
+  },
   viewport: {
     viewports,
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "@amsterdam/design-system-assets": "^0.2.0",
     "@amsterdam/design-system-css": "^0.8.0",
     "@amsterdam/design-system-react": "^0.8.0",
+    "@amsterdam/design-system-react-icons": "^0.1.12",
     "@amsterdam/design-system-tokens": "^0.8.0",
     "leaflet": "^1.9.4",
     "proj4": "^2.11.0",

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react';
+import L from 'leaflet';
+import { MapContext } from './MapContext';
+import { DEFAULT_MAP_OPTIONS } from './defaultMapOptions';
+import 'leaflet/dist/leaflet.css';
+import styles from './MapStyles.module.css';
+
+export type MapProps = {
+  mapOptions?: L.MapOptions;
+  children?: React.ReactNode;
+};
+
+export default function Map({
+  mapOptions = DEFAULT_MAP_OPTIONS,
+  children,
+}: MapProps) {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const [mapInstance, setMapInstance] = useState<L.Map | null>(null);
+  const createdMapInstance = useRef(false);
+
+  useEffect(() => {
+    if (mapRef.current === null || createdMapInstance.current !== false) {
+      return;
+    }
+
+    createdMapInstance.current = true;
+    const map = new L.Map(mapRef.current, {
+      ...DEFAULT_MAP_OPTIONS,
+      ...mapOptions,
+    });
+    L.tileLayer(`https://{s}.data.amsterdam.nl/topo_rd/{z}/{x}/{y}.png`, {
+      subdomains: ['t1', 't2', 't3', 't4'],
+      tms: true,
+    }).addTo(map);
+
+    // Remove Leaflet link from the map
+    map.attributionControl.setPrefix(false);
+
+    setMapInstance(map);
+
+    return () => {
+      mapInstance?.remove();
+    };
+  }, [mapInstance, mapOptions, mapRef]);
+
+  return (
+    <div ref={mapRef} className={styles.container}>
+      {!!mapInstance && (
+        <MapContext.Provider value={{ mapInstance }}>
+          {children}
+        </MapContext.Provider>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Map/MapContext.ts b/src/components/Map/MapContext.ts
@@ -0,0 +1,16 @@
+import type { Map } from 'leaflet';
+import { createContext, useContext } from 'react';
+
+export const MapContext = createContext<{ mapInstance: Map | null }>({
+  mapInstance: null,
+});
+
+export function useMapInstance() {
+  const { mapInstance } = useContext(MapContext);
+
+  if (mapInstance === null) {
+    throw Error('Fout, geen mapinstance gevonden in context.');
+  }
+
+  return mapInstance;
+}
diff --git a/src/components/Map/MapStyles.module.css b/src/components/Map/MapStyles.module.css
@@ -0,0 +1,5 @@
+.container {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
diff --git a/src/components/Map/defaultMapOptions.ts b/src/components/Map/defaultMapOptions.ts
@@ -0,0 +1,16 @@
+import getCrsRd from '@/utils/getCrsRd';
+
+export const DEFAULT_MAP_OPTIONS = {
+  center: [52.370216, 4.895168] as [number, number],
+  zoom: 12,
+  zoomControl: false,
+  maxZoom: 16,
+  minZoom: 3,
+  // Ensure proper handling for Rijksdriehoekcoördinaten
+  crs: getCrsRd(),
+  // Prevent the user browsing too far outside Amsterdam otherwise the map will render blank greyspace. Amsterdam tile layer only supports Amsterdam and the immediate surrounding areas
+  maxBounds: [
+    [52.25168, 4.64034],
+    [52.50536, 5.10737],
+  ] as [number, number][],
+};
diff --git a/src/components/ZoomControl/ZoomControl.tsx b/src/components/ZoomControl/ZoomControl.tsx
@@ -0,0 +1,39 @@
+import { Button, Icon, VisuallyHidden } from '@amsterdam/design-system-react';
+import { FunctionComponent } from 'react';
+import {
+  EnlargeIcon,
+  MinimiseIcon,
+} from '@amsterdam/design-system-react-icons';
+
+import styles from './styles.module.css';
+import { useMapInstance } from '@/components/Map/MapContext';
+
+const ZoomControl: FunctionComponent = () => {
+  const mapInstance = useMapInstance();
+
+  const handleZoomInClick = () => {
+    if (mapInstance) {
+      mapInstance?.setZoom(mapInstance.getZoom() + 1);
+    }
+  };
+  const handleZoomOutClick = () => {
+    if (mapInstance) {
+      mapInstance?.setZoom(mapInstance.getZoom() - 1);
+    }
+  };
+
+  return (
+    <div className={styles.buttons}>
+      <Button variant="secondary" onClick={handleZoomInClick}>
+        <VisuallyHidden>Zoom in</VisuallyHidden>
+        <Icon svg={EnlargeIcon} size="level-5" />
+      </Button>
+      <Button variant="secondary" onClick={handleZoomOutClick}>
+        <VisuallyHidden>Zoom out</VisuallyHidden>
+        <Icon svg={MinimiseIcon} size="level-5" />
+      </Button>
+    </div>
+  );
+};
+
+export default ZoomControl;
diff --git a/src/components/ZoomControl/styles.module.css b/src/components/ZoomControl/styles.module.css
@@ -0,0 +1,10 @@
+.buttons {
+  bottom: var(--ams-space-inside-lg, 24px);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ams-space-inside-xs, 8px);
+  position: absolute;
+  right: var(--ams-space-inside-lg, 24px);
+  /* TODO Temporary fix, need to hook into control layer */
+  z-index: 999;
+}
diff --git a/src/pages/Fullscreen/FullscreenPage.tsx b/src/pages/Fullscreen/FullscreenPage.tsx
@@ -0,0 +1,25 @@
+import { Screen, SkipLink } from '@amsterdam/design-system-react';
+import { ReactElement } from 'react';
+
+export type FullscreenPageProps = {
+  header?: ReactElement;
+  map?: ReactElement;
+  footer?: ReactElement;
+};
+
+export const FullscreenPage = ({
+  header,
+  map,
+  footer,
+}: FullscreenPageProps) => {
+  return (
+    <>
+      <SkipLink href="#main">Direct naar inhoud</SkipLink>
+      <Screen maxWidth="wide">
+        {header}
+        {map}
+        {footer}
+      </Screen>
+    </>
+  );
+};
diff --git a/src/pages/Fullscreen/FullscreenPageFooter.tsx b/src/pages/Fullscreen/FullscreenPageFooter.tsx
@@ -0,0 +1,187 @@
+import {
+  Column,
+  Footer,
+  Grid,
+  Heading,
+  Link,
+  LinkList,
+  PageMenu,
+  Paragraph,
+  VisuallyHidden,
+} from '@amsterdam/design-system-react';
+import { ChattingIcon, PhoneIcon } from '@amsterdam/design-system-react-icons';
+
+export const FullscreenPageFooter = () => {
+  return (
+    <>
+      <Footer>
+        <Footer.Top>
+          <VisuallyHidden>
+            <Heading>Colofon</Heading>
+          </VisuallyHidden>
+          <Grid gapVertical="large" paddingVertical="medium">
+            <Grid.Cell span={3}>
+              <Column gap="extra-small">
+                <Heading level={2} size="level-4" inverseColor>
+                  Contact
+                </Heading>
+                <Paragraph size="small" inverseColor>
+                  Heeft u een vraag en kunt u het antwoord niet vinden op deze
+                  site? Neem dan contact met ons op.
+                </Paragraph>
+                <LinkList>
+                  <LinkList.Link
+                    href="https://formulieren.amsterdam.nl/TriplEforms/DirectRegelen/formulier/nl-NL/evAmsterdam/contactformulier.aspx/?pk_vid=9f948f5fae0c5e90169952648840adc6"
+                    icon={ChattingIcon}
+                    onBackground="dark"
+                    size="small"
+                  >
+                    Contactformulier
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="https://www.amsterdam.nl/contact/"
+                    onBackground="dark"
+                    size="small"
+                  >
+                    Adressen en openingstijden
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="tel:+3114020"
+                    icon={PhoneIcon}
+                    onBackground="dark"
+                    size="small"
+                  >
+                    Bel 14 020
+                  </LinkList.Link>
+                </LinkList>
+              </Column>
+            </Grid.Cell>
+            <Grid.Cell span={3} start={{ narrow: 1, medium: 5, wide: 5 }}>
+              <Column gap="extra-small">
+                <Heading level={2} size="level-4" inverseColor>
+                  Volg de gemeente
+                </Heading>
+                <LinkList>
+                  <LinkList.Link
+                    href="https://www.amsterdam.nl/nieuws/volg-de-gemeente/nieuwsbrief-amsterdam/"
+                    onBackground="dark"
+                    size="small"
+                  >
+                    Nieuwsbrief Amsterdam
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="https://twitter.com/AmsterdamNL"
+                    onBackground="dark"
+                    rel="external"
+                    size="small"
+                  >
+                    Twitter
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="https://www.facebook.com/gemeenteamsterdam"
+                    onBackground="dark"
+                    rel="external"
+                    size="small"
+                  >
+                    Facebook
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="https://www.instagram.com/gemeenteamsterdam/"
+                    onBackground="dark"
+                    rel="external"
+                    size="small"
+                  >
+                    Instagram
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="https://www.linkedin.com/company/gemeente-amsterdam"
+                    onBackground="dark"
+                    rel="external"
+                    size="small"
+                  >
+                    LinkedIn
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="https://social.amsterdam.nl/@gemeenteamsterdam"
+                    onBackground="dark"
+                    rel="external"
+                    size="small"
+                  >
+                    Mastodon
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="https://www.youtube.com/channel/UCEiYFPFR5jGhFakHhbswlig"
+                    onBackground="dark"
+                    rel="external"
+                    size="small"
+                  >
+                    YouTube
+                  </LinkList.Link>
+                  <LinkList.Link
+                    href="https://werkenbij.amsterdam.nl/"
+                    onBackground="dark"
+                    size="small"
+                  >
+                    Werkenbij
+                  </LinkList.Link>
+                </LinkList>
+              </Column>
+            </Grid.Cell>
+            <Grid.Cell span={3} start={{ narrow: 1, medium: 1, wide: 9 }}>
+              <Column gap="small">
+                <Column as="section" gap="extra-small">
+                  <Heading level={2} size="level-4" inverseColor>
+                    Kalender
+                  </Heading>
+                  <Paragraph size="small" inverseColor>
+                    Van buurtactiviteiten tot inspraakavonden. Wat organiseert
+                    de gemeente voor u? Kijk op{' '}
+                    <Link
+                      href="https://activiteiten.amsterdam.nl/?pk_vid=9f948f5fae0c5e90169952714540adc6"
+                      onBackground="dark"
+                      variant="inline"
+                    >
+                      Kalender Amsterdam
+                    </Link>
+                    .
+                  </Paragraph>
+                </Column>
+                <Column as="section" gap="extra-small">
+                  <Heading level={3} size="level-4" inverseColor>
+                    Uit in Amsterdam
+                  </Heading>
+                  <Paragraph size="small" inverseColor>
+                    Benieuwd wat er allemaal te doen is in de stad? Op{' '}
+                    <Link
+                      href="https://www.iamsterdam.com/"
+                      onBackground="dark"
+                      variant="inline"
+                    >
+                      Iamsterdam.com
+                    </Link>{' '}
+                    vindt u de beste tips op het gebied van cultuur, uitgaan en
+                    evenementen.
+                  </Paragraph>
+                </Column>
+              </Column>
+            </Grid.Cell>
+          </Grid>
+        </Footer.Top>
+      </Footer>
+      <Grid paddingVertical="small">
+        <Grid.Cell span="all">
+          <PageMenu>
+            <PageMenu.Link href="#">Home</PageMenu.Link>
+            <PageMenu.Link href="#">Zoeken</PageMenu.Link>
+            <PageMenu.Link href="#">Nieuws</PageMenu.Link>
+            <PageMenu.Link href="#">Burgerzaken</PageMenu.Link>
+            <PageMenu.Link href="#">Kunst en cultuur</PageMenu.Link>
+            <PageMenu.Link href="#">Projecten</PageMenu.Link>
+            <PageMenu.Link href="#">Project</PageMenu.Link>
+            <PageMenu.Link href="#">Parkeren</PageMenu.Link>
+          </PageMenu>
+        </Grid.Cell>
+      </Grid>
+    </>
+  );
+};