Map component

.gitignore

@@ -380,3 +380,6 @@ MigrationBackup/
 
 # Ionide (cross platform F# VS Code tools) working folder
 .ionide/
+
+# JetBrains IntelliJ IDEA
+.idea/

.storybook/main.js

@@ -88,6 +88,11 @@ module.exports = {
       ],
     });
 
+    config.module.rules.push({
+      test: /\.png$/i,
+      type: 'asset/resource'
+    });
+
     config.resolve.alias = {
       ...config.resolve.alias,
       '@': AppSourceDir,

__mocks__/png.ts

@@ -0,0 +1,2 @@
+export default 'PngURL';
+export const ReactComponent = 'div';

custom.d.ts

@@ -11,3 +11,8 @@ declare module '*.css' {
   const styles: { [className: string]: string };
   export default styles;
 }
+
+declare module '*.png' {
+  const value: any;
+  export = value;
+}

jest.config.js

@@ -6,10 +6,20 @@ module.exports = {
   moduleNameMapper: {
     '.(css|less|scss)$': 'identity-obj-proxy',
     '\\.svg$': '<rootDir>/__mocks__/svg.ts',
+    '\\.png$': '<rootDir>/__mocks__/png.ts',
     '^@/(.*)$': '<rootDir>/src/$1',
     '^@test/(.*)$': '<rootDir>/test/$1',
   },
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
   setupFilesAfterEnv: ['<rootDir>/test/jest.setup.ts'],
   testPathIgnorePatterns: ['/node_modules/', '/scripts/templates/'],
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        allowJs: true,
+      },
+    },
+  },
+  transform: { '\\.js$': ['ts-jest'] },
+  transformIgnorePatterns: ['node_modules/(?!react-leaflet)/'],
 };

package.json

@@ -28,6 +28,8 @@
   "dependencies": {
     "@altinn/figma-design-tokens": "^0.3.0",
     "@react-hookz/web": "^15.0.1",
+    "leaflet": "^1.8.0",
+    "react-leaflet": "^4.0.1",
     "react-number-format": "^4.9.3"
   },
   "resolutions": {
@@ -37,6 +39,7 @@
     "@babel/core": "^7.18.10",
     "@mdx-js/react": "^1.6.22",
     "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -65,6 +68,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.3.0",
     "@types/jest": "^28.1.6",
+    "@types/leaflet": "^1.7.11",
     "@types/node": "^17.0.45",
     "@types/react": "^18.0.15",
     "@types/testing-library__jest-dom": "^5.14.5",

rollup.config.js

@@ -2,6 +2,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
+import image from '@rollup/plugin-image';
 import dts from 'rollup-plugin-dts';
 import postcss from 'rollup-plugin-postcss';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
@@ -30,6 +31,8 @@ export default [
       altinnFigmaTokensExceptCss,
       /@react-hookz\/web/,
       /react-number-format/,
+      /react-leaflet/,
+      /leaflet/,
     ],
     plugins: [
       peerDepsExternal(),
@@ -40,6 +43,7 @@ export default [
       svgr({ exportType: 'named' }),
       postcss(),
       terser(),
+      image(),
     ],
   },
   {

src/components/Map/Map.module.css

@@ -0,0 +1,5 @@
+.map {
+  position: relative;
+  height: 50rem;
+  width: 100%;
+}

src/components/Map/Map.stories.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import { config } from 'storybook-addon-designs';
+
+import { StoryPage } from '@sb/StoryPage';
+
+import type { Location } from './Map';
+import { Map } from './Map';
+
+const figmaLink = '';
+
+export default {
+  title: `Components/Map`,
+  component: Map,
+  parameters: {
+    layout: 'fullscreen',
+    design: config([
+      {
+        type: 'figma',
+        url: figmaLink,
+      },
+      {
+        type: 'link',
+        url: figmaLink,
+      },
+    ]),
+    docs: {
+      page: () => <StoryPage description={`Map component`} />,
+    },
+  },
+  args: {
+    //
+  },
+} as ComponentMeta<typeof Map>;
+
+const Template: ComponentStory<typeof Map> = (args) => {
+  const [markerLocation, setMarkerLocation] = useState<Location | undefined>(
+    args.markerLocation,
+  );
+
+  const mapClicked = (location: Location) => {
+    setMarkerLocation(location);
+    console.log(`Map clicked at [${location.latitude},${location.longitude}]`);
+  };
+
+  return (
+    <Map
+      {...args}
+      markerLocation={markerLocation}
+      onClick={mapClicked}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+  docs: {
+    description: {
+      story:
+        'This is the default map you get if you do not specify any map layers. Kartverket with layers "europa_forenklet" and "norgeskart_bakgrunn2"',
+    },
+  },
+};
+
+export const MapWithMarkerZoomAndCenter = Template.bind({});
+MapWithMarkerZoomAndCenter.args = {
+  markerLocation: {
+    latitude: 59.2641592,
+    longitude: 10.4036248,
+  },
+  zoom: 16,
+  centerLocation: {
+    latitude: 59.2641592,
+    longitude: 10.4036248,
+  },
+};
+MapWithMarkerZoomAndCenter.parameters = {
+  docs: {
+    description: {
+      story: 'Default map with marker location and center location set',
+    },
+  },
+};
+
+export const OpenStreetMap = Template.bind({});
+OpenStreetMap.args = {
+  layers: [
+    {
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      subdomains: ['a', 'b', 'c'],
+      attribution:
+        '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
+    },
+  ],
+};
+OpenStreetMap.parameters = {
+  docs: {
+    description: {
+      story: 'OpenStreetMap',
+    },
+  },
+};
+
+export const KartverketTerrain = Template.bind({});
+KartverketTerrain.args = {
+  layers: [
+    {
+      url: 'https://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=terreng_norgeskart&zoom={z}&x={x}&y={y}',
+      attribution: 'Data © <a href="https://www.kartverket.no/">Kartverket</a>',
+    },
+  ],
+};
+KartverketTerrain.parameters = {
+  docs: {
+    description: {
+      story: 'Kartverket terrain map',
+    },
+  },
+};
+
+export const KartverketSea = Template.bind({});
+KartverketSea.args = {
+  layers: [
+    {
+      url: 'https://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=sjokartraster&zoom={z}&x={x}&y={y}',
+      attribution: 'Data © <a href="https://www.kartverket.no/">Kartverket</a>',
+    },
+  ],
+};
+KartverketSea.parameters = {
+  docs: {
+    description: {
+      story: 'Kartverket sea map',
+    },
+  },
+};
+
+export const GoogleMaps = Template.bind({});
+GoogleMaps.args = {
+  layers: [
+    {
+      url: 'https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
+      subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+      attribution: '© Google Maps',
+    },
+  ],
+};
+GoogleMaps.parameters = {
+  docs: {
+    description: {
+      story: 'Google Maps',
+    },
+  },
+};