From a07dc347942646ff8747ca33fa7eaa429698dc55 Mon Sep 17 00:00:00 2001 From: Shayan Khan Date: Mon, 12 Feb 2024 14:26:08 -0600 Subject: [PATCH 1/3] Added support for arcgis and wms layers --- react/package-lock.json | 382 +++++++++++++++++- react/package.json | 1 + .../__fixtures__/tileServerLayerFixture.ts | 92 +++++ react/src/components/Map/Map.tsx | 41 +- react/src/types/tileServerLayer.ts | 18 +- 5 files changed, 518 insertions(+), 16 deletions(-) diff --git a/react/package-lock.json b/react/package-lock.json index 03ecdb3f..6eed2cd8 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -28,6 +28,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", + "react-esri-leaflet": "^2.0.1", "react-leaflet": "^4.2.0", "react-query": "^3.39.3", "react-redux": "^8.0.2", @@ -3061,6 +3062,79 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mapbox/geojson-rewind": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz", + "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==", + "peer": true, + "dependencies": { + "get-stream": "^6.0.1", + "minimist": "^1.2.6" + }, + "bin": { + "geojson-rewind": "geojson-rewind" + } + }, + "node_modules/@mapbox/geojson-types": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz", + "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==", + "peer": true + }, + "node_modules/@mapbox/jsonlint-lines-primitives": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz", + "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==", + "peer": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/@mapbox/mapbox-gl-supported": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz", + "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==", + "peer": true, + "peerDependencies": { + "mapbox-gl": ">=0.32.1 <2.0.0" + } + }, + "node_modules/@mapbox/point-geometry": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", + "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==", + "peer": true + }, + "node_modules/@mapbox/tiny-sdf": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz", + "integrity": "sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw==", + "peer": true + }, + "node_modules/@mapbox/unitbezier": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", + "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==", + "peer": true + }, + "node_modules/@mapbox/vector-tile": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz", + "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==", + "peer": true, + "dependencies": { + "@mapbox/point-geometry": "~0.1.0" + } + }, + "node_modules/@mapbox/whoots-js": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz", + "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==", + "peer": true, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3224,6 +3298,21 @@ "postcss-replace": "^2.0.1" } }, + "node_modules/@terraformer/arcgis": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@terraformer/arcgis/-/arcgis-2.1.2.tgz", + "integrity": "sha512-IvdfqehcNAUtKU1OFMKwPT8EvdKlVFZ7q7ZKzkIF8XzYZIVsZLuXuOS1UBdRh5u/o+X5Gax7jiZhD8U/4TV+Jw==", + "peer": true, + "dependencies": { + "@terraformer/common": "^2.1.2" + } + }, + "node_modules/@terraformer/common": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@terraformer/common/-/common-2.1.2.tgz", + "integrity": "sha512-cwPdTFzIpekZhZRrgDEkqLKNPoqbyCBQHiemaovnGIeUx0Pl336MY/eCxzJ5zXkrQLVo9zPalq/vYW5HnyKevQ==", + "peer": true + }, "node_modules/@testing-library/dom": { "version": "8.20.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", @@ -5019,6 +5108,12 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/csscolorparser": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", + "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==", + "peer": true + }, "node_modules/cssdb": { "version": "7.10.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.10.0.tgz", @@ -5454,6 +5549,12 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/earcut": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz", + "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==", + "peer": true + }, "node_modules/electron-to-chromium": { "version": "1.4.664", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.664.tgz", @@ -6419,6 +6520,66 @@ "node": ">=4.0" } }, + "node_modules/esri-leaflet": { + "version": "3.0.12", + "resolved": "https://registry.npmjs.org/esri-leaflet/-/esri-leaflet-3.0.12.tgz", + "integrity": "sha512-Yi7oH/mK4quOlCe920yuEYvUk0BjJRjmmE78ReAdJT5EbibW5wJoT9DtvG3JEJD22mQ0oF1LhcfL0Wb5jRhDAQ==", + "peer": true, + "dependencies": { + "@terraformer/arcgis": "^2.1.0", + "tiny-binary-search": "^1.0.3" + }, + "peerDependencies": { + "leaflet": "^1.0.0" + } + }, + "node_modules/esri-leaflet-cluster": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/esri-leaflet-cluster/-/esri-leaflet-cluster-3.0.1.tgz", + "integrity": "sha512-rqI4inhOzqZqGj0nfYNdfnDI51mGEpdefw4M4WoA0ig1FVh0V5W9ecRuHXbaBim+R7SSKMwY30S2wKipcYoF2w==", + "peer": true, + "peerDependencies": { + "esri-leaflet": "*", + "leaflet": "*", + "leaflet.markercluster": "^1.0.0" + } + }, + "node_modules/esri-leaflet-geocoder": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/esri-leaflet-geocoder/-/esri-leaflet-geocoder-3.1.4.tgz", + "integrity": "sha512-VMqWgbB7/3X8GuIaUemn/NGlLr3BB51ZpBWBfj/Q71HDXBKIPnGExUuXU9wqblYlj1j3w8uhwVKSGEHPpX+QiA==", + "peer": true, + "dependencies": { + "esri-leaflet": "^3.0.2", + "leaflet": "^1.0.0" + } + }, + "node_modules/esri-leaflet-heatmap": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/esri-leaflet-heatmap/-/esri-leaflet-heatmap-2.0.1.tgz", + "integrity": "sha512-Yd6gNghJfG5Zv7+5A0SraqIMK6nqYSAkF925DXnpbi5BFbI8vbJFK8JyG9hFq+vC/iBtCCpQyGz0UjtHMzNrPg==", + "peer": true, + "dependencies": { + "leaflet": "^1.0.0-rc.3", + "leaflet.heat": "^0.2.0" + }, + "peerDependencies": { + "esri-leaflet": ">2.3.0" + } + }, + "node_modules/esri-leaflet-vector": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/esri-leaflet-vector/-/esri-leaflet-vector-3.1.5.tgz", + "integrity": "sha512-XNRkrqfB4xKGQfRtjiMJsxwF4oiPnSNngQJrLBbMQMadLqcy+mZRAbDHDx/KEK6S0w0QoM4/A+A2rcNHHBQKlA==", + "peer": true, + "dependencies": { + "mapbox-gl": "1.13.1" + }, + "peerDependencies": { + "esri-leaflet": ">2.3.0", + "leaflet": "^1.5.0" + } + }, "node_modules/estraverse": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", @@ -6762,6 +6923,12 @@ "node": ">=6.9.0" } }, + "node_modules/geojson-vt": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz", + "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==", + "peer": true + }, "node_modules/get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -6813,7 +6980,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", - "dev": true, "engines": { "node": ">=10" }, @@ -6837,6 +7003,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gl-matrix": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz", + "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==", + "peer": true + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -6930,6 +7102,12 @@ "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==" }, + "node_modules/grid-index": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz", + "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==", + "peer": true + }, "node_modules/harmony-reflect": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz", @@ -7117,6 +7295,26 @@ "node": ">=4" } }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "peer": true + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -9754,6 +9952,12 @@ "json-buffer": "3.0.1" } }, + "node_modules/kdbush": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz", + "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==", + "peer": true + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -9793,6 +9997,12 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" }, + "node_modules/leaflet.heat": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz", + "integrity": "sha512-Cd5PbAA/rX3X3XKxfDoUGi9qp78FyhWYurFg3nsfhntcM/MCNK08pRkf4iEenO1KNqwVPKCmkyktjW3UD+h9bQ==", + "peer": true + }, "node_modules/leaflet.markercluster": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz", @@ -9984,6 +10194,40 @@ "tmpl": "1.0.5" } }, + "node_modules/mapbox-gl": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.1.tgz", + "integrity": "sha512-GSyubcoSF5MyaP8z+DasLu5v7KmDK2pp4S5+VQ5WdVQUOaAqQY4jwl4JpcdNho3uWm2bIKs7x1l7q3ynGmW60g==", + "peer": true, + "dependencies": { + "@mapbox/geojson-rewind": "^0.5.0", + "@mapbox/geojson-types": "^1.0.2", + "@mapbox/jsonlint-lines-primitives": "^2.0.2", + "@mapbox/mapbox-gl-supported": "^1.5.0", + "@mapbox/point-geometry": "^0.1.0", + "@mapbox/tiny-sdf": "^1.1.1", + "@mapbox/unitbezier": "^0.0.0", + "@mapbox/vector-tile": "^1.3.1", + "@mapbox/whoots-js": "^3.1.0", + "csscolorparser": "~1.0.3", + "earcut": "^2.2.2", + "geojson-vt": "^3.2.1", + "gl-matrix": "^3.2.1", + "grid-index": "^1.1.0", + "minimist": "^1.2.5", + "murmurhash-js": "^1.0.0", + "pbf": "^3.2.1", + "potpack": "^1.0.1", + "quickselect": "^2.0.0", + "rw": "^1.3.3", + "supercluster": "^7.1.0", + "tinyqueue": "^2.0.3", + "vt-pbf": "^3.1.1" + }, + "engines": { + "node": ">=6.4.0" + } + }, "node_modules/match-sorter": { "version": "6.3.4", "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", @@ -10075,11 +10319,26 @@ "node": "*" } }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "peer": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "node_modules/murmurhash-js": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz", + "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==", + "peer": true + }, "node_modules/nano-time": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", @@ -10477,6 +10736,19 @@ "node": ">=8" } }, + "node_modules/pbf": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz", + "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==", + "peer": true, + "dependencies": { + "ieee754": "^1.1.12", + "resolve-protobuf-schema": "^2.1.0" + }, + "bin": { + "pbf": "bin/pbf" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -11860,6 +12132,12 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "peer": true }, + "node_modules/potpack": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", + "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==", + "peer": true + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -11954,6 +12232,17 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/protocol-buffers-schema": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", + "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==", + "peer": true + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -12014,6 +12303,12 @@ } ] }, + "node_modules/quickselect": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz", + "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==", + "peer": true + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -12053,6 +12348,27 @@ "react": ">= 16.8 || 18.0.0" } }, + "node_modules/react-esri-leaflet": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/react-esri-leaflet/-/react-esri-leaflet-2.0.1.tgz", + "integrity": "sha512-5keSefL7gfEIK+QTfxJ/sZ+Fve8zk9zfT1QeAiFroY8p+qBfW6G1vvJ4Nz/+LDwk3AjSszzK3SBfCiE6QUftRg==", + "dependencies": { + "@react-leaflet/core": "^2.0.0" + }, + "peerDependencies": { + "esri-leaflet": "^3.0.8", + "esri-leaflet-cluster": "^3.0.0", + "esri-leaflet-geocoder": "^3.1.3", + "esri-leaflet-heatmap": "^2.0.1", + "esri-leaflet-vector": "^3.1.2", + "leaflet": "^1.8.0", + "leaflet.heat": "^0.2.0", + "leaflet.markercluster": "^1.5.3", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-leaflet": "^4.0.0" + } + }, "node_modules/react-fast-compare": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", @@ -12472,6 +12788,15 @@ "node": ">=4" } }, + "node_modules/resolve-protobuf-schema": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz", + "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==", + "peer": true, + "dependencies": { + "protocol-buffers-schema": "^3.3.1" + } + }, "node_modules/resolve.exports": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz", @@ -12558,6 +12883,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==", + "peer": true + }, "node_modules/safe-regex-test": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz", @@ -12921,6 +13252,15 @@ "postcss": "^8.2.15" } }, + "node_modules/supercluster": { + "version": "7.1.5", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz", + "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==", + "peer": true, + "dependencies": { + "kdbush": "^3.0.0" + } + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -13004,11 +13344,23 @@ "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==", "peer": true }, + "node_modules/tiny-binary-search": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-binary-search/-/tiny-binary-search-1.0.3.tgz", + "integrity": "sha512-STSHX/L5nI9WTLv6wrzJbAPbO7OIISX83KFBh2GVbX1Uz/vgZOU/ANn/8iV6t35yMTpoPzzO+3OQid3mifE0CA==", + "peer": true + }, "node_modules/tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, + "node_modules/tinyqueue": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz", + "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==", + "peer": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -13488,6 +13840,34 @@ } } }, + "node_modules/vite/node_modules/resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dev": true, + "dependencies": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/vt-pbf": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz", + "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==", + "peer": true, + "dependencies": { + "@mapbox/point-geometry": "0.1.0", + "@mapbox/vector-tile": "^1.3.1", + "pbf": "^3.2.1" + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/react/package.json b/react/package.json index 36908545..fd04bca3 100644 --- a/react/package.json +++ b/react/package.json @@ -51,6 +51,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", + "react-esri-leaflet": "^2.0.1", "react-leaflet": "^4.2.0", "react-query": "^3.39.3", "react-redux": "^8.0.2", diff --git a/react/src/__fixtures__/tileServerLayerFixture.ts b/react/src/__fixtures__/tileServerLayerFixture.ts index c1aae91b..b5771040 100644 --- a/react/src/__fixtures__/tileServerLayerFixture.ts +++ b/react/src/__fixtures__/tileServerLayerFixture.ts @@ -39,4 +39,96 @@ export const tileServerLayers = [ showDescription: false, }, }, + { + id: 517, + name: 'PineRidge_20190330', + type: 'arcgis', + url: 'https://tiles.arcgis.com/tiles/JL4BwWcjcPuWhBm9/arcgis/rest/services/PineRidgeSchool_20190330/MapServer', + attribution: '', + tileOptions: { + maxZoom: 24, + minZoom: 0, + maxNativeZoom: 19, + }, + uiOptions: { + zIndex: -2, + opacity: 0.5, + isActive: true, + showInput: false, + showDescription: false, + }, + }, + { + id: 521, + name: 'PonderosaElementary_20190328', + type: 'arcgis', + url: 'https://tiles.arcgis.com/tiles/JL4BwWcjcPuWhBm9/arcgis/rest/services/PonderosaElementary_20190328/MapServer', + attribution: '', + tileOptions: { + maxZoom: 24, + minZoom: 0, + maxNativeZoom: 19, + }, + uiOptions: { + zIndex: -1, + opacity: 0.5, + isActive: true, + showInput: false, + showDescription: false, + }, + }, + { + id: 515, + name: 'AchieveCharterSchool_20190328', + type: 'arcgis', + url: 'https://tiles.arcgis.com/tiles/JL4BwWcjcPuWhBm9/arcgis/rest/services/AchieveCharterSchool_20190328/MapServer', + attribution: '', + tileOptions: { + maxZoom: 24, + minZoom: 0, + maxNativeZoom: 19, + }, + uiOptions: { + zIndex: -4, + opacity: 0.5, + isActive: true, + showInput: false, + showDescription: false, + }, + }, + { + id: 516, + name: 'Hospital_20190329', + type: 'arcgis', + url: 'https://tiles.arcgis.com/tiles/JL4BwWcjcPuWhBm9/arcgis/rest/services/Hospital_20190329/MapServer', + attribution: '', + tileOptions: { + maxZoom: 24, + minZoom: 0, + maxNativeZoom: 19, + }, + uiOptions: { + zIndex: -3, + opacity: 0.5, + isActive: true, + showInput: false, + showDescription: false, + }, + }, + { + id: 648, + name: 'Global Multi-Resolution Topography (GMRT) Synthesis', + type: 'wms', + url: 'https://www.gmrt.org/services/mapserver/wms_merc?request=GetCapabilities&service=WMS&version=1.3.0', + attribution: + 'The Global Multi-Resolution Topography (GMRT) synthesis is a multi-resolution gridded compilation of edited multibeam sonar bathymetry data from the global and polar oceans, merged with terrestrial and lower resolution ocean data from GEBCO. Seafloor bathymetric data acquired with multibeam sonars are used for a wide range of fundamental research applications (e.g. on active seafloor geologic processes, bottom water circulation, biological habitats), as well as for more applied needs (e.g. marine resource management, tsunami inundation, submarine navigation). However these data have been acquired for only a small fraction of the oceans and typically require specialist knowledge to process. The GMRT is the only global-scale compilation of these data, providing access to grids and images to the full native resolution of the data, as well as attribution to the original data sources and is intended for broad use for research and education. The GMRT also serves the terrestrial community by providing easy access to images or grids from NASA\u2019s ASTER terrestrial elevation data (30-m resolution) for the globe and the USGS National Elevation Dataset (NED) (10-m resolution) for portions of the US. New source swath sonar data are obtained from NOAA\u2019s NGDC and other sources, and are evaluated, cleaned, edited, and then merged into the multi-resolution DEM. The GMRT synthesis is provided with funding from the U.S. National Science Foundation. Collaboration with Google has resulted in publication of the GMRT multibeam content in Google Earth, and GMRT content has routinely been contributed to GEBCO since 2015. Further details on the architecture of the GMRT are available in Ryan et al. (2009) and from http://www.marine-geo.org/portals/gmrt/about.php.', + tileOptions: { + layers: 'GMRT', + }, + uiOptions: { + zIndex: 0, + opacity: 0.5, + isActive: true, + }, + }, ]; diff --git a/react/src/components/Map/Map.tsx b/react/src/components/Map/Map.tsx index 747f78d4..2db406fe 100644 --- a/react/src/components/Map/Map.tsx +++ b/react/src/components/Map/Map.tsx @@ -1,5 +1,12 @@ import React from 'react'; -import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; +import { + MapContainer, + TileLayer, + Marker, + Popup, + WMSTileLayer, +} from 'react-leaflet'; +import { TiledMapLayer } from 'react-esri-leaflet'; import MarkerClusterGroup from '@changey/react-leaflet-markercluster'; import { TileServerLayer, FeatureCollection } from '../../types'; import * as L from 'leaflet'; @@ -56,15 +63,29 @@ const LeafletMap: React.FC = ({ zoom={13} style={{ width: '100%', height: '100%' }} > - {activeBaseLayers.map((layer) => ( - - ))} + {activeBaseLayers.map((layer) => + layer.type === 'wms' ? ( + + ) : layer.type === 'arcgis' ? ( + + ) : ( + + ) + )} ClusterMarkerIcon(cluster.getChildCount()) diff --git a/react/src/types/tileServerLayer.ts b/react/src/types/tileServerLayer.ts index 3d641782..fd47ab23 100644 --- a/react/src/types/tileServerLayer.ts +++ b/react/src/types/tileServerLayer.ts @@ -1,3 +1,5 @@ +import { WMSParams } from 'leaflet'; + /** * Represents a tile server layer, with its metadata and options. */ @@ -15,11 +17,17 @@ export interface TileServerLayer { /** The tile options of the layer. */ tileOptions: { /** The maximum zoom level of the layer. */ - maxZoom: number; + maxZoom?: number; /** The minimum zoom level of the layer. */ - minZoom: number; + minZoom?: number; /** The maximum native zoom level of the layer. */ - maxNativeZoom: number; + maxNativeZoom?: number; + /** The format of the layer. */ + format?: string; + /** Comma-separated list of layers. */ + layers?: string; + /** The params for the layer. */ + params?: WMSParams; }; /** The user interface (UI) options of the layer. */ uiOptions: { @@ -30,8 +38,8 @@ export interface TileServerLayer { /** Whether the layer is active or not. */ isActive: boolean; /** Whether to show an input for the layer or not. */ - showInput: boolean; + showInput?: boolean; /** Whether to show the description of the layer or not. Note: handles if opacity ui is shown */ - showDescription: boolean; + showDescription?: boolean; }; } From 828e8d9646ac17c195425dd05a96c5588c8fe3a0 Mon Sep 17 00:00:00 2001 From: shayanaijaz Date: Mon, 12 Feb 2024 14:27:48 -0600 Subject: [PATCH 2/3] simplify fixture --- react/src/__fixtures__/tileServerLayerFixture.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/react/src/__fixtures__/tileServerLayerFixture.ts b/react/src/__fixtures__/tileServerLayerFixture.ts index b5771040..3fd35391 100644 --- a/react/src/__fixtures__/tileServerLayerFixture.ts +++ b/react/src/__fixtures__/tileServerLayerFixture.ts @@ -120,8 +120,7 @@ export const tileServerLayers = [ name: 'Global Multi-Resolution Topography (GMRT) Synthesis', type: 'wms', url: 'https://www.gmrt.org/services/mapserver/wms_merc?request=GetCapabilities&service=WMS&version=1.3.0', - attribution: - 'The Global Multi-Resolution Topography (GMRT) synthesis is a multi-resolution gridded compilation of edited multibeam sonar bathymetry data from the global and polar oceans, merged with terrestrial and lower resolution ocean data from GEBCO. Seafloor bathymetric data acquired with multibeam sonars are used for a wide range of fundamental research applications (e.g. on active seafloor geologic processes, bottom water circulation, biological habitats), as well as for more applied needs (e.g. marine resource management, tsunami inundation, submarine navigation). However these data have been acquired for only a small fraction of the oceans and typically require specialist knowledge to process. The GMRT is the only global-scale compilation of these data, providing access to grids and images to the full native resolution of the data, as well as attribution to the original data sources and is intended for broad use for research and education. The GMRT also serves the terrestrial community by providing easy access to images or grids from NASA\u2019s ASTER terrestrial elevation data (30-m resolution) for the globe and the USGS National Elevation Dataset (NED) (10-m resolution) for portions of the US. New source swath sonar data are obtained from NOAA\u2019s NGDC and other sources, and are evaluated, cleaned, edited, and then merged into the multi-resolution DEM. The GMRT synthesis is provided with funding from the U.S. National Science Foundation. Collaboration with Google has resulted in publication of the GMRT multibeam content in Google Earth, and GMRT content has routinely been contributed to GEBCO since 2015. Further details on the architecture of the GMRT are available in Ryan et al. (2009) and from http://www.marine-geo.org/portals/gmrt/about.php.', + attribution: '', tileOptions: { layers: 'GMRT', }, From 18ad7ac77e8a24ecb2f38151c017b4baf42f7a0c Mon Sep 17 00:00:00 2001 From: Shayan Khan Date: Thu, 22 Feb 2024 10:45:02 -0600 Subject: [PATCH 3/3] update package-lock.json --- react/package-lock.json | 50 +++++++++++++++++++++++------------------ 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/react/package-lock.json b/react/package-lock.json index bc69acca..2f342af8 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -11637,6 +11637,12 @@ "node": ">=4.0" } }, + "node_modules/kdbush": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz", + "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==", + "peer": true + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -11645,12 +11651,6 @@ "json-buffer": "3.0.1" } }, - "node_modules/kdbush": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz", - "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==", - "peer": true - }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -11921,6 +11921,12 @@ "node": ">=6.4.0" } }, + "node_modules/mapbox-gl/node_modules/quickselect": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz", + "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==", + "peer": true + }, "node_modules/match-sorter": { "version": "6.3.4", "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", @@ -13955,16 +13961,16 @@ "react-is": "^16.13.1" } }, - "node_modules/property-expr": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", - "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==" - }, "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/property-expr": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", + "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==" + }, "node_modules/protocol-buffers-schema": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", @@ -14607,6 +14613,12 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==", + "peer": true + }, "node_modules/safe-array-concat": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz", @@ -14624,12 +14636,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/rw": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", - "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==", - "peer": true - }, "node_modules/safe-regex-test": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz", @@ -15096,17 +15102,17 @@ "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==", "peer": true }, - "node_modules/tiny-case": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", - "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" - }, "node_modules/tiny-binary-search": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-binary-search/-/tiny-binary-search-1.0.3.tgz", "integrity": "sha512-STSHX/L5nI9WTLv6wrzJbAPbO7OIISX83KFBh2GVbX1Uz/vgZOU/ANn/8iV6t35yMTpoPzzO+3OQid3mifE0CA==", "peer": true }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" + }, "node_modules/tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",