@mapcomponents/deck-gl 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/.babelrc +22 -0
  2. package/.editorconfig +19 -0
  3. package/.eslintignore +12 -0
  4. package/.eslintrc.js +30 -0
  5. package/.prettierignore +11 -0
  6. package/.prettierrc.json +6 -0
  7. package/.storybook/.babelrc +26 -0
  8. package/.storybook/main.js +40 -0
  9. package/.storybook/manager.js +6 -0
  10. package/.storybook/mapcomponents_logo.png +0 -0
  11. package/.storybook/preview.js +33 -0
  12. package/.storybook/style.css +15 -0
  13. package/.storybook/wheregroupTheme.js +9 -0
  14. package/CHANGELOG.md +1 -0
  15. package/LICENSE +21 -0
  16. package/README.md +1 -0
  17. package/config/env.js +106 -0
  18. package/config/jest/babelTransform.js +29 -0
  19. package/config/jest/cssTransform.js +14 -0
  20. package/config/jest/fileTransform.js +40 -0
  21. package/config/paths.js +75 -0
  22. package/coverage/clover.xml +6 -0
  23. package/coverage/coverage-final.json +1 -0
  24. package/coverage/lcov-report/base.css +224 -0
  25. package/coverage/lcov-report/block-navigation.js +87 -0
  26. package/coverage/lcov-report/favicon.png +0 -0
  27. package/coverage/lcov-report/index.html +101 -0
  28. package/coverage/lcov-report/prettify.css +1 -0
  29. package/coverage/lcov-report/prettify.js +2 -0
  30. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  31. package/coverage/lcov-report/sorter.js +196 -0
  32. package/coverage/lcov.info +0 -0
  33. package/cypress/support/commands.ts +37 -0
  34. package/cypress/support/component-index.html +12 -0
  35. package/cypress/support/component.ts +46 -0
  36. package/cypress.config.ts +101 -0
  37. package/dist/components/MlHexagonMap/MlHexagonMap.d.ts +19 -0
  38. package/dist/components/MlHexagonMap/MlHexagonMap.stories.d.ts +14 -0
  39. package/dist/contexts/DeckGlContext.d.ts +15 -0
  40. package/dist/decorators/MapContextDecorator.d.ts +2 -0
  41. package/dist/hooks/useDeckGl.d.ts +7 -0
  42. package/dist/index.d.ts +2 -0
  43. package/dist/index.esm.js +105 -0
  44. package/dist/index.esm.js.map +1 -0
  45. package/dist/setupTests.d.ts +13 -0
  46. package/dist/stories/components/Readme.d.ts +2 -0
  47. package/dist/util/BubbleForInstructions.d.ts +2 -0
  48. package/dist/util/Instructions.d.ts +14 -0
  49. package/dist/util/index.d.ts +3 -0
  50. package/dist/util/layerRemovalTest.d.ts +2 -0
  51. package/dist/util/sourceRemovalTest.d.ts +2 -0
  52. package/eslintErrorTest.js +10 -0
  53. package/package.json +199 -0
  54. package/public/assets/3D/godzilla_simple.glb +0 -0
  55. package/public/assets/3D/hexa.json +4 -0
  56. package/public/assets/3D/laerm_points.json +1 -0
  57. package/public/assets/dop.png +0 -0
  58. package/public/assets/historic.png +0 -0
  59. package/public/assets/marker.png +0 -0
  60. package/public/assets/osm.png +0 -0
  61. package/public/assets/sample.gpx +716 -0
  62. package/public/assets/sample1.gpx +3003 -0
  63. package/public/assets/sample2.gpx +1264 -0
  64. package/public/assets/sample3.gpx +912 -0
  65. package/public/assets/wg-marker.png +0 -0
  66. package/public/catalogue/.gitkeep +0 -0
  67. package/public/catalogue/mc_meta.json +1 -0
  68. package/public/favicon.ico +0 -0
  69. package/public/index.html +39 -0
  70. package/public/logo.png +0 -0
  71. package/public/manifest.json +25 -0
  72. package/public/robots.txt +3 -0
  73. package/public/thumbnails/MapLibreMap.png +0 -0
  74. package/public/thumbnails/MlCameraFollowPath.png +0 -0
  75. package/public/thumbnails/MlCreatePdfButton.png +0 -0
  76. package/public/thumbnails/MlCreatePdfForm.png +0 -0
  77. package/public/thumbnails/MlDeckGlLayer.png +0 -0
  78. package/public/thumbnails/MlDeckGlTerrainLayer.png +0 -0
  79. package/public/thumbnails/MlDemoDashboard.png +0 -0
  80. package/public/thumbnails/MlFeatureEditor.png +0 -0
  81. package/public/thumbnails/MlFillExtrusionLayer.png +0 -0
  82. package/public/thumbnails/MlFollowGps.png +0 -0
  83. package/public/thumbnails/MlGeoJsonLayer.png +0 -0
  84. package/public/thumbnails/MlGpxViewer.png +0 -0
  85. package/public/thumbnails/MlHillshadeLayer.png +0 -0
  86. package/public/thumbnails/MlIconLayer.png +0 -0
  87. package/public/thumbnails/MlLaermkarte.png +0 -0
  88. package/public/thumbnails/MlLayerMagnify.png +0 -0
  89. package/public/thumbnails/MlLayerSwipe.png +0 -0
  90. package/public/thumbnails/MlMapDrawTools.png +0 -0
  91. package/public/thumbnails/MlMeasureTool.png +0 -0
  92. package/public/thumbnails/MlMobilerImker.png +0 -0
  93. package/public/thumbnails/MlNavigationCompass.png +0 -0
  94. package/public/thumbnails/MlNavigationTools.png +0 -0
  95. package/public/thumbnails/MlOsmLayer.png +0 -0
  96. package/public/thumbnails/MlScaleReference.png +0 -0
  97. package/public/thumbnails/MlSketchTool.png +0 -0
  98. package/public/thumbnails/MlSpatialElevationProfile.png +0 -0
  99. package/public/thumbnails/MlThreeJsLayer.png +0 -0
  100. package/public/thumbnails/MlTransitionGeoJsonLayer.png +0 -0
  101. package/public/thumbnails/MlVectorTileLayer.png +0 -0
  102. package/public/thumbnails/MlWanderApp.png +0 -0
  103. package/public/thumbnails/MlWmsLayer.png +0 -0
  104. package/public/thumbnails/MlWmsLoader.png +0 -0
  105. package/public/thumbnails/useCameraFollowPath.png +0 -0
  106. package/rollup.config.js +67 -0
  107. package/scripts/build-catalogue-markdown-docs.js +28 -0
  108. package/scripts/build-catalogue-meta.js +42 -0
  109. package/scripts/create-map-component.sh +36 -0
  110. package/scripts/test.js +53 -0
  111. package/src/@types/assets/index.d.ts +20 -0
  112. package/src/App.css +0 -0
  113. package/src/components/MlHexagonMap/MlHexagonMap.meta_.json +14 -0
  114. package/src/components/MlHexagonMap/MlHexagonMap.stories.tsx +29 -0
  115. package/src/components/MlHexagonMap/MlHexagonMap.tsx +143 -0
  116. package/src/contexts/DeckGlContext.tsx +66 -0
  117. package/src/custom.d.ts +4 -0
  118. package/src/decorators/MapContextDecorator.js +41 -0
  119. package/src/decorators/style.css +34 -0
  120. package/src/hooks/useDeckGl.tsx +24 -0
  121. package/src/index.ts +2 -0
  122. package/src/setupTests.js +113 -0
  123. package/src/stories/components/Readme.js +7 -0
  124. package/src/util/BubbleForInstructions.js +48 -0
  125. package/src/util/Instructions.tsx +60 -0
  126. package/src/util/index.js +4 -0
  127. package/src/util/layerRemovalTest.js +121 -0
  128. package/src/util/sourceRemovalTest.js +113 -0
  129. package/tsconfig.json +34 -0
package/public/assets/wg-marker.png ADDED
Binary file
package/public/catalogue/.gitkeep ADDED
File without changes
package/public/catalogue/mc_meta.json ADDED
@@ -0,0 +1 @@
1
+ {}
package/public/favicon.ico ADDED
Binary file
package/public/index.html ADDED
@@ -0,0 +1,39 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <meta name="theme-color" content="#000000" />
8
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
9
+ <!--
10
+ manifest.json provides metadata used when your web app is installed on a
11
+ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
12
+ -->
13
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14
+ <!--
15
+ Notice the use of %PUBLIC_URL% in the tags above.
16
+ It will be replaced with the URL of the `public` folder during the build.
17
+ Only files inside the `public` folder can be referenced from the HTML.
18
+
19
+ Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20
+ work correctly both with client-side routing and a non-root public URL.
21
+ Learn how to configure a non-root public URL by running `npm run build`.
22
+ -->
23
+ <title>React App</title>
24
+ </head>
25
+ <body>
26
+ <noscript>You need to enable JavaScript to run this app.</noscript>
27
+ <div id="root"></div>
28
+ <!--
29
+ This HTML file is a template.
30
+ If you open it directly in the browser, you will see an empty page.
31
+
32
+ You can add webfonts, meta tags, or analytics to this file.
33
+ The build step will place the bundled scripts into the <body> tag.
34
+
35
+ To begin the development, run `npm start` or `yarn start`.
36
+ To create a production bundle, use `npm run build` or `yarn build`.
37
+ -->
38
+ </body>
39
+ </html>
package/public/logo.png ADDED
Binary file
package/public/manifest.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "short_name": "React App",
3
+ "name": "Create React App Sample",
4
+ "icons": [
5
+ {
6
+ "src": "favicon.ico",
7
+ "sizes": "64x64 32x32 24x24 16x16",
8
+ "type": "image/x-icon"
9
+ },
10
+ {
11
+ "src": "logo192.png",
12
+ "type": "image/png",
13
+ "sizes": "192x192"
14
+ },
15
+ {
16
+ "src": "logo512.png",
17
+ "type": "image/png",
18
+ "sizes": "512x512"
19
+ }
20
+ ],
21
+ "start_url": ".",
22
+ "display": "standalone",
23
+ "theme_color": "#000000",
24
+ "background_color": "#ffffff"
25
+ }
package/public/robots.txt ADDED
@@ -0,0 +1,3 @@
1
+ # https://www.robotstxt.org/robotstxt.html
2
+ User-agent: *
3
+ Disallow:
package/public/thumbnails/MlOsmLayer.png ADDED
Binary file
package/public/thumbnails/MlWmsLayer.png ADDED
Binary file
package/rollup.config.js ADDED
@@ -0,0 +1,67 @@
1
+ import commonjs from '@rollup/plugin-commonjs';
2
+ import typescript from 'rollup-plugin-typescript2';
3
+ import { defineConfig } from 'rollup';
4
+
5
+ import babel from '@rollup/plugin-babel';
6
+ import url from '@rollup/plugin-url';
7
+ import externals from 'rollup-plugin-node-externals';
8
+
9
+ import css from 'rollup-plugin-import-css';
10
+ import del from 'rollup-plugin-delete';
11
+ import svgr from '@svgr/rollup';
12
+
13
+ import pkg from './package.json';
14
+
15
+ const externalsConfig = {
16
+ deps: true,
17
+ devDeps: true,
18
+ exclude:['react', 'react-dom']
19
+ };
20
+
21
+ const config = defineConfig([
22
+ // CJS config
23
+ //{
24
+ // input: ['src/index.ts'],
25
+ // output: {
26
+ // file: 'dist/index.js',
27
+ // format: 'cjs',
28
+ // sourcemap: true,
29
+ // },
30
+ // plugins: [
31
+ // svgr({
32
+ // svgo: false,
33
+ // }),
34
+ // url(),
35
+ // babel(),
36
+ // externals(externalsConfig),
37
+ // typescript({ declarationDir: 'dist/types', sourceMap: true }),
38
+ // css(),
39
+ // del({ targets: ['dist/*'] }),
40
+ // ],
41
+ //},
42
+ // ESM config
43
+ {
44
+ input: ['src/index.ts'],
45
+ output: {
46
+ file: 'dist/index.esm.js',
47
+ format: 'cjs',
48
+ sourcemap: true,
49
+ },
50
+ plugins: [
51
+ url(),
52
+ babel({
53
+ presets: ['@babel/preset-react'],
54
+ }),
55
+ externals(externalsConfig),
56
+ commonjs(),
57
+ typescript({ declarationDir: 'dist/types', sourceMap: true }),
58
+ css(),
59
+ del({ targets: ['dist/*'] }),
60
+ ],
61
+ external: [
62
+ ...Object.keys(pkg.dependencies),
63
+ ...Object.keys(pkg.devDependencies),
64
+ ],
65
+ },
66
+ ]);
67
+ export default config;
package/scripts/build-catalogue-markdown-docs.js ADDED
@@ -0,0 +1,28 @@
1
+ const glob = require("glob");
2
+ const fs = require("fs");
3
+ var showdown = require("showdown");
4
+
5
+ let options = {};
6
+
7
+ function getComponentNameFromPath(path) {
8
+ let tmp = path.split("/");
9
+ tmp = tmp[tmp.length - 1];
10
+ tmp = tmp.split(".doc");
11
+ return tmp[0];
12
+ }
13
+
14
+ const converter = new showdown.Converter();
15
+
16
+ glob("src/components/**/*.doc.*.md", options, function (er, files) {
17
+ console.log(files);
18
+
19
+ for (var i = 0, len = files.length; i < len; i++) {
20
+ let language = files[i].slice(-5, -3);
21
+ let rawdata = fs.readFileSync(files[i]);
22
+ let html = converter.makeHtml(rawdata + "");
23
+ fs.writeFileSync(
24
+ "public/catalogue/" + getComponentNameFromPath(files[i]) + "." + language + ".html",
25
+ html
26
+ );
27
+ }
28
+ });
package/scripts/build-catalogue-meta.js ADDED
@@ -0,0 +1,42 @@
1
+ const glob = require('glob');
2
+ const fetch = (...args) => import('node-fetch').then(({ default: fetch }) => fetch(...args));
3
+ const Ajv = require('ajv');
4
+ const ajv = new Ajv();
5
+ const fs = require('fs');
6
+
7
+ let options = {};
8
+ let mc_meta = {};
9
+
10
+ glob('src/**/**/*.meta.json', options, function (er, files) {
11
+ console.log(files);
12
+
13
+ for (var i = 0, len = files.length; i < len; i++) {
14
+ let rawdata = fs.readFileSync(files[i]);
15
+ let metaObj = JSON.parse(rawdata);
16
+ mc_meta[metaObj.name] = metaObj;
17
+ }
18
+
19
+ fetch('https://catalogue.mapcomponents.org/schema/metadata.schema.json', {
20
+ method: 'GET',
21
+ headers: {
22
+ Accept: 'application/json',
23
+ 'Content-Type': 'application/json',
24
+ },
25
+ })
26
+ .then((res) => {
27
+ if (!res.ok) {
28
+ return false;
29
+ } else {
30
+ return res.json();
31
+ }
32
+ })
33
+ .then((schema) => {
34
+ const validate = ajv.compile(schema);
35
+ const valid = validate(mc_meta);
36
+ if (!valid) throw new Error(JSON.stringify(validate.errors));
37
+ //if (!valid) console.log(validate.errors);
38
+
39
+ let data = JSON.stringify(mc_meta);
40
+ fs.writeFileSync('public/catalogue/mc_meta.json', data);
41
+ });
42
+ });
package/scripts/create-map-component.sh ADDED
@@ -0,0 +1,36 @@
1
+ #!/bin/bash
2
+
3
+ set -x
4
+
5
+ if [ $# -eq 0 ]; then
6
+ echo "Please provide a component name as first argument."
7
+ exit 1
8
+ fi
9
+
10
+ component_name="$1"
11
+ target_path="src/components/"
12
+ template_name="MlComponentTemplate"
13
+ template_path="src/components/"
14
+
15
+ if [ ! -d "$target_path$component_name" ]; then
16
+
17
+ cp -r $template_path$template_name $target_path$component_name
18
+
19
+ mv $target_path$component_name/$template_name.doc.de.md $target_path$component_name/$component_name.doc.de.md
20
+
21
+ mv $target_path$component_name/$template_name.tsx $target_path$component_name/$component_name.tsx
22
+
23
+ mv $target_path$component_name/$template_name.meta_.json $target_path$component_name/$component_name.meta_.json
24
+
25
+ mv $target_path$component_name/$template_name.stories.js $target_path$component_name/$component_name.stories.js
26
+
27
+ sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.doc.de.md
28
+ sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.tsx
29
+ sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.meta_.json
30
+ sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.stories.js
31
+
32
+ else
33
+
34
+ echo "The directory $target_path$component_name already exists. Please use a different name."
35
+
36
+ fi
package/scripts/test.js ADDED
@@ -0,0 +1,53 @@
1
+ 'use strict';
2
+
3
+ // Do this as the first thing so that any code reading it knows the right env.
4
+ process.env.BABEL_ENV = 'test';
5
+ process.env.NODE_ENV = 'test';
6
+ process.env.PUBLIC_URL = '';
7
+
8
+ // Makes the script crash on unhandled rejections instead of silently
9
+ // ignoring them. In the future, promise rejections that are not handled will
10
+ // terminate the Node.js process with a non-zero exit code.
11
+ process.on('unhandledRejection', err => {
12
+ throw err;
13
+ });
14
+
15
+ // Ensure environment variables are read.
16
+ require('../config/env');
17
+
18
+
19
+ const jest = require('jest');
20
+ const execSync = require('child_process').execSync;
21
+ let argv = process.argv.slice(2);
22
+
23
+ function isInGitRepository() {
24
+ try {
25
+ execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26
+ return true;
27
+ } catch (e) {
28
+ return false;
29
+ }
30
+ }
31
+
32
+ function isInMercurialRepository() {
33
+ try {
34
+ execSync('hg --cwd . root', { stdio: 'ignore' });
35
+ return true;
36
+ } catch (e) {
37
+ return false;
38
+ }
39
+ }
40
+
41
+ // Watch unless on CI or explicitly running all tests
42
+ if (
43
+ !process.env.CI &&
44
+ argv.indexOf('--watchAll') === -1 &&
45
+ argv.indexOf('--watchAll=false') === -1
46
+ ) {
47
+ // https://github.com/facebook/create-react-app/issues/5210
48
+ const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49
+ argv.push(hasSourceControl ? '--watch' : '--watchAll');
50
+ }
51
+
52
+
53
+ jest.run(argv);
package/src/@types/assets/index.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ declare module "*.svg" {
2
+ import React = require('react');
3
+ export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
4
+ const src: string;
5
+ export default src;
6
+ }
7
+ declare module "*.jpg" {
8
+ const content: string;
9
+ export default content;
10
+ }
11
+
12
+ declare module "*.png" {
13
+ const content: string;
14
+ export default content;
15
+ }
16
+
17
+ declare module "*.json" {
18
+ const content: string;
19
+ export default content;
20
+ }
package/src/App.css ADDED
File without changes
package/src/components/MlHexagonMap/MlHexagonMap.meta_.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "name": "MlHexagonMap",
3
+ "title": "Hexagon Map using DeckGl Layer",
4
+ "description": "A component demonstrating the use of the useDeckGL Hook to add a DeckGl Hexagon Layer to the MapLibre Map instance",
5
+ "i18n": {
6
+ "de": {
7
+ "title": "Hexagon Map basierend auf DeckGl Layer",
8
+ "description": "Eine Komponenten, die das Hinzufügen von DeckGL Hexagon Layern zur MapLibre Instanz mittels des useDeckGl Hooks demonstriert"
9
+ }
10
+ },
11
+ "tags": ["Map layer", "deckGL"],
12
+ "category": "Map layer",
13
+ "type": "component"
14
+ }
package/src/components/MlHexagonMap/MlHexagonMap.stories.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import mapContextDecorator from '../../decorators/MapContextDecorator';
3
+ import MlHexagonMap from './MlHexagonMap';
4
+ import { DeckGlContextProvider } from '../../contexts/DeckGlContext';
5
+
6
+ const storyoptions = {
7
+ title: 'MapComponents/MlHexagonMap',
8
+ component: MlHexagonMap,
9
+ argTypes: {},
10
+ decorators: mapContextDecorator,
11
+ };
12
+ export default storyoptions;
13
+ interface TemplateProbs {
14
+ mapId: string;
15
+ }
16
+
17
+ const Template = (props: TemplateProbs) => {
18
+ return (
19
+ <DeckGlContextProvider {...props}>
20
+ <MlHexagonMap {...props} />
21
+ </DeckGlContextProvider>
22
+ );
23
+ };
24
+
25
+ export const NoiseMap = Template.bind({});
26
+ NoiseMap.parameters = {};
27
+ NoiseMap.args = {
28
+ mapId: 'map_1',
29
+ };
package/src/components/MlHexagonMap/MlHexagonMap.tsx ADDED
@@ -0,0 +1,143 @@
1
+ import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
2
+ import { useMap} from '@mapcomponents/react-maplibre';
3
+ import DeckGlContext from '../../contexts/DeckGlContext';
4
+ import { HexagonLayer, HexagonLayerProps } from '@deck.gl/aggregation-layers/typed';
5
+ import useDeckGl from '../../hooks/useDeckGl';
6
+
7
+ export interface MlHexagonMapProps {
8
+ /**
9
+ * Id of the target MapLibre instance in mapContext
10
+ */
11
+ mapId?: string;
12
+ /**
13
+ * Id of an existing layer in the mapLibre instance to help specify the layer order
14
+ * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
15
+ */
16
+ insertBeforeLayer?: string;
17
+ }
18
+
19
+ const MlHexagonMap = (props: MlHexagonMapProps) => {
20
+ const deckGlContext = useContext(DeckGlContext);
21
+
22
+ const DATA_URL = 'assets/3D/laerm_points.json';
23
+ const deckGlHook = useDeckGl();
24
+ const [noiseData, setNoiseData] = useState({
25
+ type: '',
26
+ features: [],
27
+ });
28
+ const getJsonData = () => {
29
+ fetch(DATA_URL, {
30
+ headers: {
31
+ 'Content-Type': 'application/json',
32
+ Accept: 'application/json',
33
+ },
34
+ })
35
+ .then(function (response) {
36
+ return response.json();
37
+ })
38
+ .then(function (json) {
39
+ setNoiseData(json);
40
+ });
41
+ };
42
+ useEffect(() => {
43
+ getJsonData();
44
+ }, []);
45
+
46
+ const layerOpacity = 0.8;
47
+ const specularColor: [number, number, number] = [51, 51, 51];
48
+ const getColorRange: (layerOpacity: number) => [number, number, number, number][] = (
49
+ layerOpacity: number
50
+ ) => [
51
+ [1, 152, 189, Math.round(80 * layerOpacity)],
52
+ [73, 227, 206, Math.round(90 * layerOpacity)],
53
+ [216, 254, 181, Math.round(100 * layerOpacity)],
54
+ [254, 237, 177, Math.round(110 * layerOpacity)],
55
+ [254, 173, 84, Math.round(120 * layerOpacity)],
56
+ [209, 55, 78, Math.round(150 * layerOpacity)],
57
+ ];
58
+ const elevationRange: [number, number] = [30, 75];
59
+
60
+ const deckGlLayerProps = useMemo(() => {
61
+ return {
62
+ id: 'deckgl-layer',
63
+
64
+ data: noiseData ? noiseData.features : [],
65
+ type: HexagonLayer,
66
+ colorRange: getColorRange(layerOpacity),
67
+ coverage: 0.9,
68
+ elevationRange: elevationRange,
69
+ elevationScale: 10,
70
+ extruded: true,
71
+ autoHighlight: true,
72
+ getPosition: (d: any) => {
73
+ return d.geometry.coordinates;
74
+ },
75
+ pickable: true,
76
+ radius: 16,
77
+ upperPercentile: 100,
78
+ material: {
79
+ ambient: 0.8,
80
+ diffuse: 0.5,
81
+ shininess: 20,
82
+ specularColor: specularColor,
83
+ },
84
+ transitions: {
85
+ elevationScale: 1500,
86
+ },
87
+ getColorValue: (points: any[]) => {
88
+ const elVal = points.reduce((acc, point) => {
89
+ if (!point?.properties && point.source.properties)
90
+ return acc < point.source.properties.dba ? point.source.properties.dba : acc;
91
+ return acc < point.properties.dba ? point.properties.dba : acc;
92
+ }, -Infinity);
93
+ return Math.round(elVal);
94
+ },
95
+ getElevationValue: (points: any): number => {
96
+ const elVal = points.reduce((acc: any, point: any) => {
97
+ if (!point.properties && point.source.properties)
98
+ return acc < point.source.properties.dba ? point.source.properties.dba : acc;
99
+ return acc < point.properties.dba ? point.properties.dba : acc;
100
+ }, -Infinity);
101
+ return Math.round(elVal);
102
+ },
103
+ _filterData: null,
104
+ };
105
+ }, [noiseData.features]);
106
+
107
+ const mapHook = useMap({
108
+ mapId: props.mapId,
109
+ waitForLayer: props.insertBeforeLayer,
110
+ });
111
+ const initializedRef = useRef(false);
112
+
113
+ // add deckGl Layer
114
+ useEffect(() => {
115
+ if (
116
+ !mapHook.map ||
117
+ !deckGlContext.deckGl ||
118
+ noiseData.features.length <= 0 ||
119
+ (initializedRef.current && deckGlContext.deckGl && noiseData.features.length >= 0)
120
+ )
121
+ return;
122
+ initializedRef.current = true;
123
+
124
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
125
+ // @ts-ignore
126
+ const hexagonLayer = new HexagonLayer({
127
+ ...deckGlLayerProps,
128
+ } as unknown as HexagonLayerProps);
129
+ deckGlHook.addLayer(hexagonLayer);
130
+
131
+ return () => {
132
+ hexagonLayer && deckGlHook.removeLayer(hexagonLayer);
133
+ initializedRef.current = false;
134
+ };
135
+ }, [mapHook.map, deckGlContext.deckGl, props.mapId, deckGlLayerProps]);
136
+
137
+ return <></>;
138
+ };
139
+
140
+ MlHexagonMap.defaultProps = {
141
+ mapId: undefined,
142
+ };
143
+ export default MlHexagonMap;