Merge branch 'feature/leaflet-map' into feature/openlayers-map
This commit is contained in:
Luccas Mateus
GitHub
commit
f9181355bf
93
package-lock.json
generated
93
package-lock.json
generated
@ -8808,6 +8808,16 @@
|
||||
"resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
|
||||
"integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
|
||||
},
|
||||
"node_modules/@react-leaflet/core": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
|
||||
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -12696,6 +12706,15 @@
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/leaflet": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz",
|
||||
"integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.195",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
|
||||
@ -15525,6 +15544,11 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/chroma-js": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
|
||||
"integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
|
||||
},
|
||||
"node_modules/chrome-trace-event": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
|
||||
@ -27579,6 +27603,11 @@
|
||||
"url": "https://github.com/motdotla/dotenv?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
|
||||
},
|
||||
"node_modules/leven": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
|
||||
@ -32646,6 +32675,19 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-leaflet": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
|
||||
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-query": {
|
||||
"version": "3.39.3",
|
||||
"resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
|
||||
@ -39254,17 +39296,20 @@
|
||||
},
|
||||
"packages/components": {
|
||||
"name": "@portaljs/components",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.12",
|
||||
"dependencies": {
|
||||
"@githubocto/flat-ui": "^0.14.1",
|
||||
"@heroicons/react": "^2.0.17",
|
||||
"@tanstack/react-table": "^8.8.5",
|
||||
"chroma-js": "^2.4.2",
|
||||
"flexsearch": "0.7.21",
|
||||
"leaflet": "^1.9.4",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"papaparse": "^5.4.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.43.9",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-query": "^3.39.3",
|
||||
"react-vega": "^7.6.0",
|
||||
"rollup-plugin-re": "^1.0.7",
|
||||
@ -39281,6 +39326,7 @@
|
||||
"@storybook/react-vite": "^7.0.7",
|
||||
"@storybook/testing-library": "^0.0.14-next.2",
|
||||
"@types/flexsearch": "^0.7.3",
|
||||
"@types/leaflet": "^1.9.3",
|
||||
"@types/papaparse": "^5.3.7",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
@ -39627,7 +39673,7 @@
|
||||
},
|
||||
"packages/core": {
|
||||
"name": "@portaljs/core",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@docsearch/react": "^3.3.3",
|
||||
@ -39653,7 +39699,7 @@
|
||||
},
|
||||
"packages/remark-callouts": {
|
||||
"name": "@portaljs/remark-callouts",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mdast-util-from-markdown": "^1.2.0",
|
||||
@ -39663,7 +39709,7 @@
|
||||
},
|
||||
"packages/remark-embed": {
|
||||
"name": "@portaljs/remark-embed",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.4",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"unist-util-visit": "^4.1.1"
|
||||
@ -39671,7 +39717,7 @@
|
||||
},
|
||||
"packages/remark-wiki-link": {
|
||||
"name": "@portaljs/remark-wiki-link",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.4",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mdast-util-to-markdown": "^1.5.0",
|
||||
@ -46416,6 +46462,7 @@
|
||||
"@storybook/testing-library": "^0.0.14-next.2",
|
||||
"@tanstack/react-table": "^8.8.5",
|
||||
"@types/flexsearch": "^0.7.3",
|
||||
"@types/leaflet": "^1.9.3",
|
||||
"@types/papaparse": "^5.3.7",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
@ -46423,12 +46470,14 @@
|
||||
"@typescript-eslint/parser": "^5.57.1",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"chroma-js": "2.4.2",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.3.4",
|
||||
"eslint-plugin-storybook": "^0.6.11",
|
||||
"flexsearch": "0.7.21",
|
||||
"json": "^11.0.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"papaparse": "^5.4.1",
|
||||
"postcss": "^8.4.23",
|
||||
@ -46436,6 +46485,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.43.9",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-query": "^3.39.3",
|
||||
"react-vega": "^7.6.0",
|
||||
"rollup-plugin-re": "^1.0.7",
|
||||
@ -46799,6 +46849,12 @@
|
||||
"resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
|
||||
"integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
|
||||
},
|
||||
"@react-leaflet/core": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
|
||||
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
|
||||
"requires": {}
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -49605,6 +49661,15 @@
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/leaflet": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz",
|
||||
"integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.14.195",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
|
||||
@ -51793,6 +51858,11 @@
|
||||
"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
|
||||
"dev": true
|
||||
},
|
||||
"chroma-js": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
|
||||
"integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
|
||||
},
|
||||
"chrome-trace-event": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
|
||||
@ -61034,6 +61104,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
|
||||
},
|
||||
"leven": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
|
||||
@ -64650,6 +64725,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-leaflet": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
|
||||
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
|
||||
"requires": {
|
||||
"@react-leaflet/core": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"react-query": {
|
||||
"version": "3.39.3",
|
||||
"resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
|
||||
|
||||
10
packages/components/.storybook/preview-head.html
Normal file
10
packages/components/.storybook/preview-head.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!--
|
||||
This is necessary for Leaflet maps to work.
|
||||
-->
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""
|
||||
/>
|
||||
@ -1,6 +1,7 @@
|
||||
import 'tailwindcss/tailwind.css'
|
||||
import '../src/index.css'
|
||||
|
||||
|
||||
import type { Preview } from '@storybook/react';
|
||||
|
||||
const preview: Preview = {
|
||||
|
||||
@ -12,12 +12,14 @@
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "npm run storybook",
|
||||
"build": "tsc && vite build && npm run build-tailwind",
|
||||
"example": "vite",
|
||||
"build": "tsc && vite build && npm run build-tailwind && npm run fix-leaflet",
|
||||
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build",
|
||||
"build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/styles.css --minify",
|
||||
"prepare": "npm run build"
|
||||
"build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/styles.css --minify",
|
||||
"prepare": "npm run build",
|
||||
"fix-leaflet": "node ./scripts/fix-leaflet.cjs"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0",
|
||||
@ -28,13 +30,16 @@
|
||||
"@heroicons/react": "^2.0.17",
|
||||
"@planet/maps": "^8.1.0",
|
||||
"@tanstack/react-table": "^8.8.5",
|
||||
"chroma-js": "^2.4.2",
|
||||
"flexsearch": "0.7.21",
|
||||
"leaflet": "^1.9.4",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"ol": "^7.4.0",
|
||||
"papaparse": "^5.4.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.43.9",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-query": "^3.39.3",
|
||||
"react-vega": "^7.6.0",
|
||||
"vega": "5.25.0",
|
||||
@ -51,6 +56,7 @@
|
||||
"@storybook/testing-library": "^0.0.14-next.2",
|
||||
"@swc/core": "^1.3.68",
|
||||
"@types/flexsearch": "^0.7.3",
|
||||
"@types/leaflet": "^1.9.3",
|
||||
"@types/papaparse": "^5.3.7",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
@ -65,6 +71,8 @@
|
||||
"eslint-plugin-storybook": "^0.6.11",
|
||||
"json": "^11.0.0",
|
||||
"postcss": "^8.4.23",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-import-url": "^7.2.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"storybook": "^7.0.7",
|
||||
"tailwindcss": "^3.3.2",
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
console.log('PostCSS')
|
||||
|
||||
export default {
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
6
packages/components/scripts/fix-leaflet.cjs
Normal file
6
packages/components/scripts/fix-leaflet.cjs
Normal file
@ -0,0 +1,6 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const leafletPath = path.join(require.resolve('leaflet'), '../')
|
||||
|
||||
fs.cpSync(`${leafletPath}images`,'./dist/images', { recursive: true });
|
||||
139
packages/components/src/components/Map.tsx
Normal file
139
packages/components/src/components/Map.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
import loadData from '../lib/loadData';
|
||||
import chroma from 'chroma-js';
|
||||
import {
|
||||
MapContainer,
|
||||
TileLayer,
|
||||
GeoJSON as GeoJSONLayer,
|
||||
} from 'react-leaflet';
|
||||
|
||||
import * as L from 'leaflet';
|
||||
|
||||
export type MapProps = {
|
||||
data: string | GeoJSON.GeoJSON;
|
||||
title?: string;
|
||||
colorScale?: {
|
||||
starting: string;
|
||||
ending: string;
|
||||
};
|
||||
center?: { latitude: number | undefined; longitude: number | undefined };
|
||||
zoom?: number;
|
||||
tooltip?: {
|
||||
prop: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function Map({
|
||||
data,
|
||||
title = '',
|
||||
colorScale = { starting: 'blue', ending: 'red' },
|
||||
center = { latitude: 45, longitude: 45 },
|
||||
zoom = 2,
|
||||
tooltip = {
|
||||
prop: '',
|
||||
},
|
||||
}: MapProps) {
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
|
||||
// By default, assumes data is an Array...
|
||||
const [geoJsonData, setGeoJsonData] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// If data is string, assume it's a URL
|
||||
if (typeof data === 'string') {
|
||||
setIsLoading(true);
|
||||
|
||||
loadData(data).then((res: any) => {
|
||||
const geoJsonObject = JSON.parse(res);
|
||||
|
||||
const colorScaleAr = chroma
|
||||
.scale([colorScale.starting, colorScale.ending])
|
||||
.mode('lch')
|
||||
.colors(geoJsonObject.features.length);
|
||||
|
||||
geoJsonObject.features.forEach((feature, i) => {
|
||||
if (feature.color === undefined) {
|
||||
feature.color = colorScaleAr[i];
|
||||
}
|
||||
});
|
||||
|
||||
setGeoJsonData(geoJsonObject);
|
||||
setIsLoading(false);
|
||||
});
|
||||
} else {
|
||||
setGeoJsonData(data);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onEachFeature = (feature, layer) => {
|
||||
const geometryType = feature.type;
|
||||
|
||||
if (tooltip.prop)
|
||||
layer.bindTooltip(feature.properties[tooltip.prop], {
|
||||
direction: 'center',
|
||||
});
|
||||
|
||||
layer.on({
|
||||
mouseover: (event) => {
|
||||
if (['Polygon', 'MultiPolygon'].includes(geometryType)) {
|
||||
event.target.setStyle({
|
||||
fillColor: '#B85042',
|
||||
});
|
||||
}
|
||||
},
|
||||
mouseout: (event) => {
|
||||
if (['Polygon', 'MultiPolygon'].includes(geometryType)) {
|
||||
event.target.setStyle({
|
||||
fillColor: '#A7BEAE',
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return isLoading || !geoJsonData ? (
|
||||
<div className="w-full flex items-center justify-center w-[600px] h-[300px]">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : (
|
||||
<MapContainer
|
||||
center={[center.latitude, center.longitude]}
|
||||
zoom={zoom}
|
||||
scrollWheelZoom={false}
|
||||
className="h-80 w-full"
|
||||
// @ts-ignore
|
||||
whenReady={(map: any) => {
|
||||
map.target.scrollWheelZoom.enable();
|
||||
|
||||
var info = new L.Control() as any;
|
||||
|
||||
info.onAdd = function () {
|
||||
this._div = L.DomUtil.create('div', 'info');
|
||||
this.update();
|
||||
return this._div;
|
||||
};
|
||||
|
||||
info.update = function () {
|
||||
this._div.innerHTML = `<h4 style="font-weight: 600; background: #f9f9f9; padding: 5px; border-radius: 5px; color: #464646;">${title}</h4>`;
|
||||
};
|
||||
|
||||
if (title) info.addTo(map.target);
|
||||
|
||||
setTimeout(() => map.target.invalidateSize(), 5000);
|
||||
}}
|
||||
>
|
||||
<GeoJSONLayer
|
||||
data={geoJsonData}
|
||||
style={(geoJsonFeature: any) => {
|
||||
return { color: geoJsonFeature?.color };
|
||||
}}
|
||||
onEachFeature={onEachFeature}
|
||||
/>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
</MapContainer>
|
||||
);
|
||||
}
|
||||
6
packages/components/src/include.css
Normal file
6
packages/components/src/include.css
Normal file
@ -0,0 +1,6 @@
|
||||
/* Temporary fix for a size issue with FlatUiTable loading indicator on Firefox */
|
||||
@layer base {
|
||||
svg[tw^='animate-pulse w-12'] {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Temporary fix for a size issue with FlatUiTable loading indicator on Firefox */
|
||||
@layer base {
|
||||
svg[tw^='animate-pulse w-12'] {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "leaflet";
|
||||
@import "include";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
export * from './components/Table';
|
||||
export * from './components/Catalog';
|
||||
export * from './components/LineChart';
|
||||
export * from './components/Vega';
|
||||
export * from './components/VegaLite';
|
||||
export * from './components/FlatUiTable';
|
||||
export * from "./components/Table";
|
||||
export * from "./components/Catalog";
|
||||
export * from "./components/LineChart";
|
||||
export * from "./components/Vega";
|
||||
export * from "./components/VegaLite";
|
||||
export * from "./components/FlatUiTable";
|
||||
export * from './components/OpenLayers/OpenLayers';
|
||||
export * from "./components/Map";
|
||||
|
||||
171
packages/components/src/types/GeoJSON.tsx
Normal file
171
packages/components/src/types/GeoJSON.tsx
Normal file
@ -0,0 +1,171 @@
|
||||
/**
|
||||
* Typescript types for the GeoJSON RFC7946 specification. This is not fully RFC-compliant due to lack of support for
|
||||
* ranged number data types.
|
||||
*
|
||||
* See https://tools.ietf.org/html/rfc7946
|
||||
*/
|
||||
export declare namespace GeoJSON {
|
||||
/**
|
||||
* Inside this document, the term "geometry type" refers to seven case-sensitive strings: "Point", "MultiPoint",
|
||||
* "LineString", "MultiLineString", "Polygon", "MultiPolygon", and "GeometryCollection".
|
||||
*/
|
||||
export type Geometry = Point | MultiPoint | LineString | MultiLineString | Polygon | MultiPolygon
|
||||
| GeometryCollection;
|
||||
export type GeometryType = Geometry["type"];
|
||||
|
||||
/**
|
||||
* ...the term "GeoJSON types" refers to nine case-sensitive strings: "Feature", "FeatureCollection", and the
|
||||
* geometry types listed above.
|
||||
*/
|
||||
export type GeoJson = Geometry | Feature | FeatureCollection;
|
||||
export type GeoJsonType = GeoJson["type"];
|
||||
|
||||
// types
|
||||
|
||||
/**
|
||||
* A position is an array of numbers. There MUST be two or more elements. The first two elements are longitude and
|
||||
* latitude, or easting and northing, precisely in that order and using decimal numbers. Altitude or elevation MAY
|
||||
* be included as an optional third element.
|
||||
*
|
||||
* Implementations SHOULD NOT extend positions beyond three elements because the semantics of extra elements are
|
||||
* unspecified and ambiguous.
|
||||
*/
|
||||
export type Position = [longitude: number, latitude: number, elevation?: number]
|
||||
|
||||
export type Record = { [key in string | number]: unknown };
|
||||
|
||||
/**
|
||||
* Properties inherit to all GeoJSON types
|
||||
*/
|
||||
export interface GeometryBase extends Record {
|
||||
/**
|
||||
* A GeoJSON object MAY have a member named "bbox" to include information on the coordinate range for its
|
||||
* Geometries, Features, or FeatureCollections. The value of the bbox member MUST be an array of length 2*n
|
||||
* where n is the number of dimensions represented in the contained geometries, with all axes of the most
|
||||
* southwesterly point followed by all axes of the more northeasterly point. The axes order of a bbox follows
|
||||
* the axes order of geometries.
|
||||
*/
|
||||
bbox?: number[];
|
||||
|
||||
/**
|
||||
* A GeoJSON object MAY have other members.
|
||||
*
|
||||
* Members not described in this specification ("foreign members") MAY be used in a GeoJSON document. Note that
|
||||
* support for foreign members can vary across implementations, and no normative processing model for foreign
|
||||
* members is defined.
|
||||
*/
|
||||
}
|
||||
|
||||
// geometry types
|
||||
|
||||
export interface Point extends GeometryBase {
|
||||
type: "Point";
|
||||
/**
|
||||
* For type "Point", the "coordinates" member is a single position.
|
||||
*/
|
||||
coordinates: Position;
|
||||
}
|
||||
|
||||
export interface MultiPoint extends GeometryBase {
|
||||
type: "MultiPoint";
|
||||
/**
|
||||
* For type "MultiPoint", the "coordinates" member is an array of positions.
|
||||
*/
|
||||
coordinates: Position[];
|
||||
}
|
||||
|
||||
export interface LineString extends GeometryBase {
|
||||
type: "LineString";
|
||||
/**
|
||||
* For type "LineString", the "coordinates" member is an array of two or more positions.
|
||||
*/
|
||||
coordinates: { 0: Position, 1: Position } & Position[]
|
||||
}
|
||||
|
||||
export interface MultiLineString extends GeometryBase {
|
||||
type: "MultiLineString";
|
||||
/**
|
||||
* For type "MultiLineString", the "coordinates" member is an array of LineString coordinate arrays.
|
||||
*/
|
||||
coordinates: LineString["coordinates"][];
|
||||
}
|
||||
|
||||
/**
|
||||
* To specify a constraint specific to Polygons, it is useful to introduce the concept of a linear ring:
|
||||
* - A linear ring is a closed LineString with four or more positions.
|
||||
* - The first and last positions are equivalent, and they MUST contain identical values; their representation
|
||||
* SHOULD also be identical.
|
||||
* - A linear ring is the boundary of a surface or the boundary of a hole in a surface.
|
||||
* - A linear ring MUST follow the right-hand rule with respect to the area it bounds, i.e., exterior rings are
|
||||
* counterclockwise, and holes are clockwise.
|
||||
*/
|
||||
export type LinearRing = { 0: Position, 1: Position, 2: Position, 3: Position } & Position[];
|
||||
|
||||
export interface Polygon extends GeometryBase {
|
||||
type: "Polygon";
|
||||
/**
|
||||
* For type "Polygon", the "coordinates" member MUST be an array of linear ring coordinate arrays.
|
||||
*
|
||||
* For Polygons with more than one of these rings, the first MUST be the exterior ring, and any others MUST be
|
||||
* interior rings. The exterior ring bounds the surface, and the interior rings (if present) bound holes within
|
||||
* the surface.
|
||||
*/
|
||||
coordinates: LinearRing[];
|
||||
}
|
||||
|
||||
export interface MultiPolygon extends GeometryBase {
|
||||
type: "MultiPolygon";
|
||||
/**
|
||||
* For type "MultiPolygon", the "coordinates" member is an array of Polygon coordinate arrays.
|
||||
*/
|
||||
coordinates: Polygon["coordinates"][];
|
||||
}
|
||||
|
||||
export interface GeometryCollection {
|
||||
/**
|
||||
* A GeoJSON object with type "GeometryCollection" is a Geometry object.
|
||||
*/
|
||||
type: "GeometryCollection";
|
||||
/**
|
||||
* A GeometryCollection has a member with the name "geometries". The value of "geometries" is an array. Each
|
||||
* element of this array is a GeoJSON Geometry object. It is possible for this array to be empty.
|
||||
*/
|
||||
geometries: Geometry[];
|
||||
}
|
||||
|
||||
// GeoJSON types
|
||||
|
||||
export interface Feature {
|
||||
/**
|
||||
* A Feature object has a "type" member with the value "Feature".
|
||||
*/
|
||||
type: "Feature";
|
||||
/**
|
||||
* If a Feature has a commonly used identifier, that identifier SHOULD be included as a member of the Feature object
|
||||
* with the name "id", and the value of this member is either a JSON string or number.
|
||||
*/
|
||||
id?: string | number;
|
||||
/**
|
||||
* A Feature object has a member with the name "geometry". The value of the geometry member SHALL be either a
|
||||
* Geometry object as defined above or, in the case that the Feature is unlocated, a JSON null value.
|
||||
*/
|
||||
geometry: Geometry | null;
|
||||
/**
|
||||
* A Feature object has a member with the name "properties". The value of the properties member is an object
|
||||
* (any JSON object or a JSON null value).
|
||||
*/
|
||||
properties: Record | null;
|
||||
}
|
||||
|
||||
export interface FeatureCollection {
|
||||
/**
|
||||
* A GeoJSON object with the type "FeatureCollection" is a FeatureCollection object.
|
||||
*/
|
||||
type: "FeatureCollection";
|
||||
/**
|
||||
* A FeatureCollection object has a member with the name "features". The value of "features" is a JSON array. Each
|
||||
* element of the array is a Feature object as defined above. It is possible for this array to be empty.
|
||||
*/
|
||||
features: Feature[];
|
||||
}
|
||||
}
|
||||
55
packages/components/stories/Map.stories.ts
Normal file
55
packages/components/stories/Map.stories.ts
Normal file
@ -0,0 +1,55 @@
|
||||
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/Map',
|
||||
component: Map,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
data: {
|
||||
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',
|
||||
},
|
||||
tooltip: {
|
||||
description: 'Tooltip settings'
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
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: {
|
||||
data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
|
||||
title: 'Seas and Oceans Map',
|
||||
center: { latitude: 45, longitude: 0 },
|
||||
zoom: 2,
|
||||
tooltip: { prop: 'name' },
|
||||
},
|
||||
};
|
||||
|
||||
export const GeoJSONPoints: Story = {
|
||||
name: 'GeoJSON points map',
|
||||
args: {
|
||||
data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
|
||||
title: 'Roads in York',
|
||||
center: { latitude: 53.9614, longitude: -1.0739 },
|
||||
zoom: 12,
|
||||
tooltip: { prop: 'Location' },
|
||||
},
|
||||
};
|
||||
@ -1,8 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,.stories.tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@ -37,8 +37,7 @@ const app = async (): Promise<UserConfigExport> => {
|
||||
'vega',
|
||||
'react-vega',
|
||||
'ol',
|
||||
'ol/dom.js',
|
||||
'ol/reproj.js',
|
||||
'leaflet'
|
||||
],
|
||||
output: {
|
||||
manualChunks: undefined,
|
||||
@ -46,11 +45,10 @@ const app = async (): Promise<UserConfigExport> => {
|
||||
react: 'React',
|
||||
ol: 'ol',
|
||||
'ol-mapbox-style': 'ol-mapbox-style',
|
||||
'ol/dom.js': 'ol/dom.js',
|
||||
'ol/reproj.js': 'ol/reproj.js',
|
||||
'react-vega': 'react-vega',
|
||||
'react-dom': 'ReactDOM',
|
||||
tailwindcss: 'tailwindcss',
|
||||
leaflet: 'leaflet'
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user