From 3aac39ef84c8c1a112805395a45319f34bb44029 Mon Sep 17 00:00:00 2001 From: neocarto Date: Tue, 12 Jul 2022 14:22:38 +0200 Subject: [PATCH] feat: inner layer --- README.md | 31 +++++++- package-lock.json | 187 +++++++++++++++++++++++++++----------------- package.json | 2 +- src/draw.js | 12 +++ src/index.js | 2 +- src/layers/inner.js | 54 +++++++++++++ 6 files changed, 213 insertions(+), 75 deletions(-) create mode 100644 src/layers/inner.js diff --git a/README.md b/README.md index 2c1b86c..cadc800 100644 --- a/README.md +++ b/README.md @@ -811,7 +811,7 @@ bertin.draw({ - **strokedasharray**: stroke-dasharray (default:2) - **step**: gap between graticules. The value can be a number or an array of two values (default: [10, 10]) -#### hatch (or hatching) +### hatch (or hatching) The _hatch_ type only allows to add hatchings on the whole page to make it a bit prettier. [Source](https://github.com/neocarto/bertin/blob/main/src/layers/hatch.js). @@ -837,7 +837,34 @@ bertin.draw({ - **angle**: orientation of lines (default: 45) - **spacing**: spacing between lines (default: 8) -#### Rhumbs + +### Inner + +The _inner_ type allows to display a strip inside the polygon. This inner area can be used to draw preet maps with a vintage style. + +#### Code + +```js +bertin.draw({ + layers: [ + { + type: "inner", + thickness: 5, + fill:"white", + blur:4 + }, + ], +}); +``` + +#### Parameters + +- **thickness**: a thickness in pixels (default: 7) +- **fill**: fill color (default: "#9e9477") +- **fillOpacity**: fill-opacity (default: 0.2) +- **blur**: blur. feGaussianBlur stdDeviation value (default:4) + +### Rhumbs The rhumbs type allows to display "rhumb lines" like on old [portolan charts](https://en.wikipedia.org/wiki/Portolan_chart). [Source](https://github.com/neocarto/bertin/blob/main/src/layers/rhumbs.js). diff --git a/package-lock.json b/package-lock.json index 302cfc9..140687a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "d3-selection": "^3.0.0", "d3-shape": "^3.1.0", "d3-tile": "^1.0.0", - "geotoolbox": "^1.2", + "geotoolbox": "^1.2.1", "proj4": "^2.7.5", "statsbreaks": "^0.2.0", "topojson-client": "^3.1.0", @@ -66,9 +66,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.6.tgz", - "integrity": "sha512-tzulrgDT0QD6U7BJ4TKVk2SDDg7wlP39P9yAx1RfLy7vP/7rsDRlWVfbWxElslu56+r7QOhB2NSDsabYYruoZQ==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.8.tgz", + "integrity": "sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==", "dev": true, "peer": true, "engines": { @@ -205,9 +205,9 @@ } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.6.tgz", - "integrity": "sha512-L//phhB4al5uucwzlimruukHB3jRd5JGClwRMD/ROrVjXfLqovYnvQrK/JK36WYyVwGGO7OD3kMyVTjx+WVPhw==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.8.tgz", + "integrity": "sha512-che3jvZwIcZxrwh63VfnFTUzcAM9v/lznYkkRxIBGMPt1SudOKHAEec0SIRCfiuIzTcF7VGj/CaTT6gY4eWxvA==", "dev": true, "peer": true, "dependencies": { @@ -217,8 +217,8 @@ "@babel/helper-split-export-declaration": "^7.18.6", "@babel/helper-validator-identifier": "^7.18.6", "@babel/template": "^7.18.6", - "@babel/traverse": "^7.18.6", - "@babel/types": "^7.18.6" + "@babel/traverse": "^7.18.8", + "@babel/types": "^7.18.8" }, "engines": { "node": ">=6.9.0" @@ -299,9 +299,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.6.tgz", - "integrity": "sha512-uQVSa9jJUe/G/304lXspfWVpKpK4euFLgGiMQFOCpM/bgcAdeoHwi/OQz23O9GK2osz26ZiXRRV9aV+Yl1O8tw==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.8.tgz", + "integrity": "sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==", "dev": true, "peer": true, "bin": { @@ -327,20 +327,20 @@ } }, "node_modules/@babel/traverse": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.6.tgz", - "integrity": "sha512-zS/OKyqmD7lslOtFqbscH6gMLFYOfG1YPqCKfAW5KrTeolKqvB8UelR49Fpr6y93kYkW2Ik00mT1LOGiAGvizw==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.8.tgz", + "integrity": "sha512-UNg/AcSySJYR/+mIcJQDCv00T+AqRO7j/ZEJLzpaYtgM48rMg5MnkJgyNqkzo88+p4tfRvZJCEiwwfG6h4jkRg==", "dev": true, "peer": true, "dependencies": { "@babel/code-frame": "^7.18.6", - "@babel/generator": "^7.18.6", + "@babel/generator": "^7.18.7", "@babel/helper-environment-visitor": "^7.18.6", "@babel/helper-function-name": "^7.18.6", "@babel/helper-hoist-variables": "^7.18.6", "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/parser": "^7.18.6", - "@babel/types": "^7.18.6", + "@babel/parser": "^7.18.8", + "@babel/types": "^7.18.8", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -349,9 +349,9 @@ } }, "node_modules/@babel/types": { - "version": "7.18.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.7.tgz", - "integrity": "sha512-QG3yxTcTIBoAcQmkCs+wAPYZhu7Dk9rXKacINfNbdJDNERTbLQbHGyVG8q/YGMPeCJRIhSY0+fTc5+xuh6WPSQ==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.8.tgz", + "integrity": "sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw==", "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.18.6", @@ -854,9 +854,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001363", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz", - "integrity": "sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==", + "version": "1.0.30001365", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001365.tgz", + "integrity": "sha512-VDQZ8OtpuIPMBA4YYvZXECtXbddMCUFJk1qu8Mqxfm/SZJNSr1cy4IuLCOL7RJ/YASrvJcYg1Zh+UEUQ5m6z8Q==", "dev": true, "funding": [ { @@ -1195,9 +1195,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.182", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.182.tgz", - "integrity": "sha512-OpEjTADzGoXABjqobGhpy0D2YsTncAax7IkER68ycc4adaq0dqEG9//9aenKPy7BGA90bqQdLac0dPp6uMkcSg==", + "version": "1.4.186", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.186.tgz", + "integrity": "sha512-YoVeFrGd/7ROjz4R9uPoND1K/hSRC/xADy9639ZmIZeJSaBnKdYx3I6LMPsY7CXLpK7JFgKQVzeZ/dk2br6Eaw==", "dev": true, "peer": true }, @@ -1315,9 +1315,15 @@ } }, "node_modules/geotoolbox": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/geotoolbox/-/geotoolbox-1.2.0.tgz", - "integrity": "sha512-BUkdc0hF46ngiTcjfj9VJ5GHZ6HREFFNCjOftWoA8wfHogK75k3HKyUaObekLiYkPwyyFWW1Lxs8r18I4Ituwg==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/geotoolbox/-/geotoolbox-1.2.1.tgz", + "integrity": "sha512-1F/QVhJ3TcosyoKa7xAErS4vDv/TiTqPaRnySiPMsvLrpmRjwO/CM3xpFMs5tsVBq0Jqc/qej0X7BTfYsxM90w==", + "dependencies": { + "d3-geo": "^3.0.1", + "topojson-client": "^3.1.0", + "topojson-server": "^3.0.1", + "topojson-simplify": "^3.0.3" + } }, "node_modules/glob": { "version": "7.2.3", @@ -1683,9 +1689,9 @@ "peer": true }, "node_modules/node-releases": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz", - "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz", + "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==", "dev": true, "peer": true }, @@ -1834,9 +1840,9 @@ } }, "node_modules/rollup": { - "version": "2.75.7", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz", - "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==", + "version": "2.76.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.76.0.tgz", + "integrity": "sha512-9jwRIEY1jOzKLj3nsY/yot41r19ITdQrhs+q3ggNWhr9TQgduHqANvPpS32RNpzGklJu3G1AJfvlZLi/6wFgWA==", "dev": true, "peer": true, "bin": { @@ -2088,6 +2094,23 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, + "node_modules/topojson-simplify": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/topojson-simplify/-/topojson-simplify-3.0.3.tgz", + "integrity": "sha512-V+pBjLVzSQ3+hSOxBiV01OVXgFiCmMO8ia3huxKEyIMTC1ApQHBcdXdOqcQ6U2JJJD31TZduwY6KyF15R8sUgg==", + "dependencies": { + "commander": "2", + "topojson-client": "3" + }, + "bin": { + "toposimplify": "bin/toposimplify" + } + }, + "node_modules/topojson-simplify/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, "node_modules/turf-jsts": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/turf-jsts/-/turf-jsts-1.2.3.tgz", @@ -2163,9 +2186,9 @@ } }, "@babel/compat-data": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.6.tgz", - "integrity": "sha512-tzulrgDT0QD6U7BJ4TKVk2SDDg7wlP39P9yAx1RfLy7vP/7rsDRlWVfbWxElslu56+r7QOhB2NSDsabYYruoZQ==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.8.tgz", + "integrity": "sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==", "dev": true, "peer": true }, @@ -2270,9 +2293,9 @@ } }, "@babel/helper-module-transforms": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.6.tgz", - "integrity": "sha512-L//phhB4al5uucwzlimruukHB3jRd5JGClwRMD/ROrVjXfLqovYnvQrK/JK36WYyVwGGO7OD3kMyVTjx+WVPhw==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.8.tgz", + "integrity": "sha512-che3jvZwIcZxrwh63VfnFTUzcAM9v/lznYkkRxIBGMPt1SudOKHAEec0SIRCfiuIzTcF7VGj/CaTT6gY4eWxvA==", "dev": true, "peer": true, "requires": { @@ -2282,8 +2305,8 @@ "@babel/helper-split-export-declaration": "^7.18.6", "@babel/helper-validator-identifier": "^7.18.6", "@babel/template": "^7.18.6", - "@babel/traverse": "^7.18.6", - "@babel/types": "^7.18.6" + "@babel/traverse": "^7.18.8", + "@babel/types": "^7.18.8" } }, "@babel/helper-simple-access": { @@ -2343,9 +2366,9 @@ } }, "@babel/parser": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.6.tgz", - "integrity": "sha512-uQVSa9jJUe/G/304lXspfWVpKpK4euFLgGiMQFOCpM/bgcAdeoHwi/OQz23O9GK2osz26ZiXRRV9aV+Yl1O8tw==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.8.tgz", + "integrity": "sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==", "dev": true, "peer": true }, @@ -2362,28 +2385,28 @@ } }, "@babel/traverse": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.6.tgz", - "integrity": "sha512-zS/OKyqmD7lslOtFqbscH6gMLFYOfG1YPqCKfAW5KrTeolKqvB8UelR49Fpr6y93kYkW2Ik00mT1LOGiAGvizw==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.8.tgz", + "integrity": "sha512-UNg/AcSySJYR/+mIcJQDCv00T+AqRO7j/ZEJLzpaYtgM48rMg5MnkJgyNqkzo88+p4tfRvZJCEiwwfG6h4jkRg==", "dev": true, "peer": true, "requires": { "@babel/code-frame": "^7.18.6", - "@babel/generator": "^7.18.6", + "@babel/generator": "^7.18.7", "@babel/helper-environment-visitor": "^7.18.6", "@babel/helper-function-name": "^7.18.6", "@babel/helper-hoist-variables": "^7.18.6", "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/parser": "^7.18.6", - "@babel/types": "^7.18.6", + "@babel/parser": "^7.18.8", + "@babel/types": "^7.18.8", "debug": "^4.1.0", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.18.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.7.tgz", - "integrity": "sha512-QG3yxTcTIBoAcQmkCs+wAPYZhu7Dk9rXKacINfNbdJDNERTbLQbHGyVG8q/YGMPeCJRIhSY0+fTc5+xuh6WPSQ==", + "version": "7.18.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.8.tgz", + "integrity": "sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw==", "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.18.6", @@ -2767,9 +2790,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001363", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz", - "integrity": "sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==", + "version": "1.0.30001365", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001365.tgz", + "integrity": "sha512-VDQZ8OtpuIPMBA4YYvZXECtXbddMCUFJk1qu8Mqxfm/SZJNSr1cy4IuLCOL7RJ/YASrvJcYg1Zh+UEUQ5m6z8Q==", "dev": true, "peer": true }, @@ -3014,9 +3037,9 @@ } }, "electron-to-chromium": { - "version": "1.4.182", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.182.tgz", - "integrity": "sha512-OpEjTADzGoXABjqobGhpy0D2YsTncAax7IkER68ycc4adaq0dqEG9//9aenKPy7BGA90bqQdLac0dPp6uMkcSg==", + "version": "1.4.186", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.186.tgz", + "integrity": "sha512-YoVeFrGd/7ROjz4R9uPoND1K/hSRC/xADy9639ZmIZeJSaBnKdYx3I6LMPsY7CXLpK7JFgKQVzeZ/dk2br6Eaw==", "dev": true, "peer": true }, @@ -3109,9 +3132,15 @@ "peer": true }, "geotoolbox": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/geotoolbox/-/geotoolbox-1.2.0.tgz", - "integrity": "sha512-BUkdc0hF46ngiTcjfj9VJ5GHZ6HREFFNCjOftWoA8wfHogK75k3HKyUaObekLiYkPwyyFWW1Lxs8r18I4Ituwg==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/geotoolbox/-/geotoolbox-1.2.1.tgz", + "integrity": "sha512-1F/QVhJ3TcosyoKa7xAErS4vDv/TiTqPaRnySiPMsvLrpmRjwO/CM3xpFMs5tsVBq0Jqc/qej0X7BTfYsxM90w==", + "requires": { + "d3-geo": "^3.0.1", + "topojson-client": "^3.1.0", + "topojson-server": "^3.0.1", + "topojson-simplify": "^3.0.3" + } }, "glob": { "version": "7.2.3", @@ -3395,9 +3424,9 @@ "peer": true }, "node-releases": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz", - "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz", + "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==", "dev": true, "peer": true }, @@ -3501,9 +3530,9 @@ } }, "rollup": { - "version": "2.75.7", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz", - "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==", + "version": "2.76.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.76.0.tgz", + "integrity": "sha512-9jwRIEY1jOzKLj3nsY/yot41r19ITdQrhs+q3ggNWhr9TQgduHqANvPpS32RNpzGklJu3G1AJfvlZLi/6wFgWA==", "dev": true, "peer": true, "requires": { @@ -3694,6 +3723,22 @@ } } }, + "topojson-simplify": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/topojson-simplify/-/topojson-simplify-3.0.3.tgz", + "integrity": "sha512-V+pBjLVzSQ3+hSOxBiV01OVXgFiCmMO8ia3huxKEyIMTC1ApQHBcdXdOqcQ6U2JJJD31TZduwY6KyF15R8sUgg==", + "requires": { + "commander": "2", + "topojson-client": "3" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + } + } + }, "turf-jsts": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/turf-jsts/-/turf-jsts-1.2.3.tgz", diff --git a/package.json b/package.json index f57d2ee..638cd6f 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "d3-selection": "^3.0.0", "d3-shape": "^3.1.0", "d3-tile": "^1.0.0", - "geotoolbox": "^1.2", + "geotoolbox": "^1.2.1", "proj4": "^2.7.5", "statsbreaks": "^0.2.0", "topojson-client": "^3.1.0", diff --git a/src/draw.js b/src/draw.js index 581c678..5bed762 100644 --- a/src/draw.js +++ b/src/draw.js @@ -23,6 +23,7 @@ import { mushroom } from "./layers/mushroom.js"; import { missing } from "./layers/missing.js"; import { shadow } from "./layers/shadow.js"; import { waterlines } from "./layers/waterlines.js"; +import { inner } from "./layers/inner.js"; import { scalebar } from "./layers/scalebar.js"; import { text } from "./layers/text.js"; import { label } from "./layers/label.js"; @@ -456,6 +457,17 @@ export function draw({ params = {}, layers = {} } = {}) { }); } + // inner + if (layer.type == "inner") { + inner(svg, projection, { + geojson: layer.geojson, + fill: layer.fill, + fillOpacity: layer.fillOpacity, + blur: layer.blur, + thickness: layer.thickness, + }); + } + // rhumbs if (layer.type == "rhumbs") { diff --git a/src/index.js b/src/index.js index c0ab5b1..141d25d 100644 --- a/src/index.js +++ b/src/index.js @@ -30,4 +30,4 @@ export { rhumbs } from "./layers/rhumbs.js"; // export { poly2points } from "./helpers/poly2points.js"; // Tests -export { waterlines2 } from "./layers/waterlines2.js"; +export { inner } from "./layers/inner.js"; diff --git a/src/layers/inner.js b/src/layers/inner.js new file mode 100644 index 0000000..2f92f22 --- /dev/null +++ b/src/layers/inner.js @@ -0,0 +1,54 @@ +import { union } from "geotoolbox"; +import * as d3selection from "d3-selection"; +import * as d3geo from "d3-geo"; +const d3 = Object.assign({}, d3selection, d3geo); + +export function inner(selection, projection, options = {}) { + let geojson = options.geojson; + let thickness = + options.thickness != null && options.thickness != undefined + ? options.thickness + : 7; + let fill = + options.fill != null && options.fill != undefined + ? options.fill + : "#9e9477"; + let fillOpacity = + options.fillOpacity != null && options.fillOpacity != undefined + ? options.fillOpacity + : 0.2; + + let blur = + options.blur != null && options.blur != undefined ? options.blur : 4; + + const id = Date.now().toString(36) + Math.random().toString(36).substring(2); + let defs = selection.append("defs"); + defs + .append("filter") + .attr("id", `blur${id}`) + .append("feGaussianBlur") + .attr("stdDeviation", blur); + + let merged = union(geojson); + + selection + .append("clipPath") + .attr("id", `inner${id}`) + .append("path") + .datum(merged) + .attr("d", d3.geoPath(projection)); + + selection + .append("g") + .attr("clip-path", `url(#inner${id}`) + .append("path") + .datum(merged) + .attr("fill", "none") + .attr("stroke", fill) + .attr("stroke-linecap", "round") + .attr("stroke-linejoin", "round") + .attr("stroke-opacity", fillOpacity) + .attr("stroke-width", thickness * 2) + .attr("filter", `url(#blur${id}`) + .attr("d", d3.geoPath(projection)); +}