126 lines
3.2 KiB
TypeScript
126 lines
3.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
|
|
import { Map, MapProps } from '../src/components/Map';
|
|
|
|
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
|
|
const meta: Meta = {
|
|
title: 'Components/Geospatial/Map',
|
|
component: Map,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
layers: {
|
|
description:
|
|
'Data to be displayed.\n\n GeoJSON Object \n\nOR\n\n URL to GeoJSON Object',
|
|
},
|
|
title: {
|
|
description: 'Title to display on the map. Optional.',
|
|
},
|
|
center: {
|
|
description: 'Initial coordinates of the center of the map',
|
|
},
|
|
zoom: {
|
|
description: 'Zoom level',
|
|
},
|
|
style: {
|
|
description: "Styles for the container"
|
|
},
|
|
autoZoomConfiguration: {
|
|
description: "Configuration to auto zoom in the specified layer data"
|
|
}
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<MapProps>;
|
|
|
|
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
|
|
export const GeoJSONPolygons: Story = {
|
|
name: 'GeoJSON polygons map',
|
|
args: {
|
|
layers: [
|
|
{
|
|
data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
|
|
name: 'Polygons',
|
|
tooltip: { propNames: ['name'] },
|
|
colorScale: {
|
|
starting: '#ff0000',
|
|
ending: '#00ff00',
|
|
},
|
|
},
|
|
],
|
|
title: 'Seas and Oceans Map',
|
|
center: { latitude: 45, longitude: 0 },
|
|
zoom: 2,
|
|
},
|
|
};
|
|
|
|
export const GeoJSONPoints: Story = {
|
|
name: 'GeoJSON points map',
|
|
args: {
|
|
layers: [
|
|
{
|
|
data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
|
|
name: 'Points',
|
|
tooltip: { propNames: ['Location'] },
|
|
},
|
|
],
|
|
title: 'Roads in York',
|
|
center: { latitude: 53.9614, longitude: -1.0739 },
|
|
zoom: 12,
|
|
},
|
|
};
|
|
|
|
export const GeoJSONMultipleLayers: Story = {
|
|
name: 'GeoJSON polygons and points map',
|
|
args: {
|
|
layers: [
|
|
{
|
|
data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
|
|
name: 'Points',
|
|
tooltip: true,
|
|
},
|
|
{
|
|
data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
|
|
name: 'Polygons',
|
|
tooltip: true,
|
|
colorScale: {
|
|
starting: '#ff0000',
|
|
ending: '#00ff00',
|
|
},
|
|
},
|
|
],
|
|
title: 'Polygons and points',
|
|
center: { latitude: 45, longitude: 0 },
|
|
zoom: 2,
|
|
},
|
|
}
|
|
|
|
export const GeoJSONMultipleLayersWithAutoZoomInSpecifiedLayer: Story = {
|
|
name: 'GeoJSON polygons and points map with auto zoom in the points layer',
|
|
args: {
|
|
layers: [
|
|
{
|
|
data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
|
|
name: 'Points',
|
|
tooltip: true,
|
|
},
|
|
{
|
|
data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
|
|
name: 'Polygons',
|
|
tooltip: true,
|
|
colorScale: {
|
|
starting: '#ff0000',
|
|
ending: '#00ff00',
|
|
},
|
|
},
|
|
],
|
|
title: 'Polygons and points',
|
|
center: { latitude: 45, longitude: 0 },
|
|
zoom: 2,
|
|
autoZoomConfiguration: {
|
|
layerName: 'Points'
|
|
}
|
|
},
|
|
};
|