Merge branch 'feature/scts-2-react-leaflet-base-layer' into feature/s…

…torybook

package.json

@@ -32,7 +32,9 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.5",
     "@types/jsdom": "^21.1.6",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "^20.12.7",
+    "@types/proj4": "^2.5.5",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -69,8 +71,11 @@
     "@amsterdam/design-system-css": "^0.8.0",
     "@amsterdam/design-system-react": "^0.8.0",
     "@amsterdam/design-system-tokens": "^0.8.0",
+    "leaflet": "^1.9.4",
+    "proj4": "^2.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.23.0"
   }
 }

src/components/NavigationMenu/index.tsx

@@ -1,11 +1,32 @@
+import type { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
+import type { To } from 'react-router-dom';
+import { Heading } from '@amsterdam/design-system-react';
 import styles from './styles.module.css';
 
+const RRAmsLink = ({
+  to,
+  children,
+}: {
+  to: To;
+  children: ReactNode;
+}): JSX.Element => (
+  <Link className="ams-link ams-link--standalone" to={to}>
+    {children}
+  </Link>
+);
+
 const NavigationMenu = (): JSX.Element => (
-  <div className={styles.container} data-testid="navigation-menu">
-    <Link to="/">Home</Link>
-    <Link to="/contact">Contact</Link>
-  </div>
+  <nav className={styles.container} data-testid="navigation-menu">
+    <div>
+      <Heading level={4}>React + Leaflet</Heading>
+      <RRAmsLink to="/">Amsterdam Base Layer</RRAmsLink>
+    </div>
+    <div>
+      <Heading level={4}>React + React-Leaflet</Heading>
+      <RRAmsLink to="/react-leaflet/">Amsterdam Base Layer</RRAmsLink>
+    </div>
+  </nav>
 );
 
 export default NavigationMenu;

src/components/NavigationMenu/styles.module.css

@@ -7,6 +7,7 @@
   left: 0;
   position: fixed;
   right: 0;
+  text-align: center;
   top: 72px;
   z-index: 1000;
 }

src/pages/BaseLayer/index.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import BaseMap from './';
+
+describe('BaseMap', () => {
+  it('renders the component', () => {
+    const { container } = render(<BaseMap />);
+    expect(container.firstChild).toBeDefined();
+  });
+
+  it('uses the amsterdam base tile', () => {
+    const { container } = render(<BaseMap />);
+
+    // Only test on the less dynamic part of the URL
+    const imgSrc = (
+      container.querySelector('.leaflet-tile-container img') as HTMLImageElement
+    )?.src.substring(0, 38);
+
+    expect(
+      imgSrc.match(
+        /https:\/\/(t1)|(t2)|(t3)|(t4)\.data.amsterdam.nl\/topo_rd\//g
+      )
+    ).not.toEqual(null);
+  });
+});

src/pages/BaseLayer/index.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react';
+import type { FunctionComponent } from 'react';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import getCrsRd from '@/utils/getCrsRd';
+import styles from './styles.module.css';
+
+const BaseLayer: FunctionComponent = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<L.Map | null>(null);
+
+  useEffect(() => {
+    if (containerRef.current === null) {
+      return;
+    }
+
+    mapRef.current = new L.Map(containerRef.current, {
+      center: L.latLng([52.370216, 4.895168]),
+      zoom: 12,
+      layers: [
+        L.tileLayer('https://{s}.data.amsterdam.nl/topo_rd/{z}/{x}/{y}.png', {
+          attribution: '',
+          subdomains: ['t1', 't2', 't3', 't4'],
+          tms: true,
+        }),
+      ],
+      zoomControl: false,
+
+      // Copied from Amsterdam-react-maps
+      maxZoom: 16,
+      minZoom: 3,
+      crs: getCrsRd(),
+      maxBounds: [
+        [52.25168, 4.64034],
+        [52.50536, 5.10737],
+      ],
+    });
+
+    // Remove Leaflet link from the map
+    mapRef.current.attributionControl.setPrefix(false);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (mapRef.current) mapRef.current.remove();
+    };
+  }, []);
+
+  return <div className={styles.container} ref={containerRef} />;
+};
+
+export default BaseLayer;

src/pages/BaseLayer/styles.module.css

@@ -0,0 +1,4 @@
+.container {
+  height: 100%;
+  min-height: 100%;
+}

src/pages/ReactLeaflet/BaseLayer/index.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import BaseMap from './';
+
+describe('BaseMap', () => {
+  it('renders the component', () => {
+    const { container } = render(<BaseMap />);
+    expect(container.firstChild).toBeDefined();
+  });
+
+  it('uses the amsterdam base tile', () => {
+    const { container } = render(<BaseMap />);
+
+    // Only test on the less dynamic part of the URL
+    const imgSrc = (
+      container.querySelector('.leaflet-tile-container img') as HTMLImageElement
+    )?.src.substring(0, 38);
+
+    expect(
+      imgSrc.match(
+        /https:\/\/(t1)|(t2)|(t3)|(t4)\.data.amsterdam.nl\/topo_rd\//g
+      )
+    ).not.toEqual(null);
+  });
+});