{"_id":"@aerisweather/react-mapsgl","_rev":"7-2f3f5f270cca99481bad21dac1850f3b","name":"@aerisweather/react-mapsgl","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@aerisweather/react-mapsgl","version":"0.1.0","license":"MIT","_id":"@aerisweather/react-mapsgl@0.1.0","maintainers":[{"name":"oliver.alexander.aw","email":"oliver.alexander@aerisweather.com"},{"name":"chi.yeung","email":"chi.yeung@aerisweather.com"},{"name":"noahblon","email":"noahblon@gmail.com"},{"name":"u10int","email":"nshipes@urban10.com"},{"name":"bennyc50","email":"bennyc50@gmail.com"},{"name":"lhuffmam","email":"lhuffman@aerisweather.com"},{"name":"four43","email":"seth@four43.com"},{"name":"aerisweather-ci","email":"eschwartz@aerisweather.com"}],"homepage":"https://www.aerisweather.com","dist":{"shasum":"8642f91a139dd72b384126e242dda796cc736ecd","tarball":"https://registry.npmjs.org/@aerisweather/react-mapsgl/-/react-mapsgl-0.1.0.tgz","fileCount":24057,"integrity":"sha512-TxmqG4s9g0TKrBEM0M0GWqoqutkv+UGPzIvmZ/Botbu0+DouH1WQa8p6vfgbTuz11CdEbS+whXLWT2+Kvvpl3g==","signatures":[{"sig":"MEUCIQDwgKXQ4QGSRq6TLqPf44TeTNTczcdnrIxFcpz4i++s6AIgMoIUiavwgZCZhA0oNTc/kksIV/hAk6r+m0Isd9rsVU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167091871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W3XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmravBAAo+/sfSZCYYXlkBk+s1gRKsst1MIuXZzePX3rFtlmMDpcuIbw\r\n+fU7sdy40D8rEmSjiKwB2VeVdcLNAORQP4Jb08o5+cQROGg+lSuAubgx99sT\r\nHW6sbLj6VXjFYxvqvUipu/EX48F+/bOJRfIPOPZrLZvh4v2OTcp874m99UNs\r\n+IHjxIu1CSDwYQJm4nTzOPTHxczYTeKaKLdehxzj3+2PRmtSJbtwmYQ3pRXZ\r\nTA/P+BHRvJD92txuDm5sNksVK/lToj3E74UkrC/AWm3sBhrMPITN+WALXPhH\r\nVUPATIUipqM2DS/DmztNLg2yHgG9IeSSl3ObG6QJUr6yVvvQPhXUsEkpxhLZ\r\n/rS/spYiRGg9pH8dwaNpQlWfLnAYl9U2FJ80NihT3fdvZyR3Gf4GW5zBsXyT\r\nxCWs6HpuJOWuVS0tAgQLsmHzWJf+I8SLzqG4aLd3cmAxcVTDT04q6xett7oD\r\nJZiEgfJhTT4CykEnRaePrHn8+GOCIqPMrk8VxiC39UiYx3cSbC1SgiR2CKem\r\nTHG5qFemMkewIj0D4YeFkUpJspeqpMIBvo+GCjAKAkrQMJtjxAYSqCYlG/Gn\r\n363ztcxd1GcWKw1dtBQ2Fp+hiWKUUmmRLgfi2CpRhIuGtsfi7CbdjTlYYPNp\r\nBRiuq2uKqzMQ+jJ2qDLKL5wFOONwXirAtjc=\r\n=rrwI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/es6/index.js","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"module":"dist/esm/index.js","gitHead":"f70efb73a47cc71596ddc19b602dbcdea7f5e332","scripts":{"ci":"yarn install --frozen-lockfile","lint":"eslint src","test":"jest --passWithNoTests","build":"yarn lint && yarn test && yarn build:commonjs && yarn build:esm","clean":"rm -rf ./dist","preci":"rm -fr node_modules","prepush":"npm run build","prebuild":"yarn run clean","build:dev":"NODE_ENV='dev'; yarn build","build:esm":"tsc -p tsconfig-esm.json","test:watch":"jest --watch","build:watch":"tsc --watch","build:commonjs":"tsc -p tsconfig.json","prepublishOnly":"npm run clean && npm run build"},"typings":"dist/es6/index.d.ts","_npmUser":{"name":"u10int","email":"nshipes@urban10.com"},"_npmVersion":"8.11.0","description":"[<img width=\"300\" alt=\"MapsGL\" src=\"https://www.aerisweather.com/img/graphics/mapsgl-logo.png\">](https://www.aerisweather.com/products/mapsgl/)","directories":{},"_nodeVersion":"16.16.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.4.0","husky":"^8.0.3","react":"^18.2.0","dotenv":"^16.0.3","eslint":"^8.32.0","cypress":"^12.3.0","ts-jest":"^29.0.5","react-dom":"^18.2.0","tsc-watch":"^6.0.0","commitizen":"^4.3.0","typescript":"^4.9.4","@types/jest":"^29.2.6","lint-staged":"^13.1.0","@commitlint/cli":"^17.4.2","@tsconfig/node14":"^1.0.3","regenerator-runtime":"^0.13.11","@aerisweather/mapsgl":"^1.1.2","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.27.5","@tsconfig/recommended":"^1.0.2","eslint-plugin-unicorn":"^45.0.2","@testing-library/react":"^13.4.0","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.49.0","cz-conventional-changelog":"^3.3.0","@aerisweather/eslint-plugin":"^1.0.4","@commitlint/config-conventional":"^17.4.2","@typescript-eslint/eslint-plugin":"^5.49.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@aerisweather/mapsgl":"^1.1.2"},"_npmOperationalInternal":{"tmp":"tmp/react-mapsgl_0.1.0_1675980247373_0.7200096218387704","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@aerisweather/react-mapsgl","version":"0.1.1","license":"MIT","_id":"@aerisweather/react-mapsgl@0.1.1","maintainers":[{"name":"oliver.alexander.aw","email":"oliver.alexander@aerisweather.com"},{"name":"chi.yeung","email":"chi.yeung@aerisweather.com"},{"name":"noahblon","email":"noahblon@gmail.com"},{"name":"u10int","email":"nshipes@urban10.com"},{"name":"bennyc50","email":"bennyc50@gmail.com"},{"name":"lhuffmam","email":"lhuffman@aerisweather.com"},{"name":"four43","email":"seth@four43.com"},{"name":"aerisweather-ci","email":"eschwartz@aerisweather.com"}],"homepage":"https://www.aerisweather.com","dist":{"shasum":"83988441b41ef2ef0dcdf72faf892170df2b04fd","tarball":"https://registry.npmjs.org/@aerisweather/react-mapsgl/-/react-mapsgl-0.1.1.tgz","fileCount":24058,"integrity":"sha512-Qo3er12EszVCW0N7e/bZ0if9X7Mq0oOgY3d9dAr/i3ai7wZqjvZSEarcQqTIHIwkpjiv0oIRVy9RbF8YjEQkVA==","signatures":[{"sig":"MEUCIH/C8RHGIDk2r+8tv297+mfFMC4NVS10cMQc4GyWHNhbAiEAvCPgs9JKtxk2Hr0IwM4DQIDSiVMehr1L+dcrr7SBKV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167092505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5lUrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRkg/8DQ4lVAYkX15oDrNVaTkpsjvX95I+on12G+RzfT6NfQL+tu+I\r\nio2tqCRFW9KUDBEEn3wwuEE7e/R+X5Mnitz2AbSQNw/W9dbjHpli8DeLq2Fn\r\nzBrXwhYnKJhPnHWlcJ9Nz0lmD062a2c3I1nb9j4d1eFxf6yUngh45GNrzv0z\r\nW2Lf6hIDCHE4k9XGzlAkbn8XIgK7pvBmF8qiIBOPTlwGgEAN4+ky2oMU3RK7\r\nZqoLoHb2bRh86loJShvGC+hYFDR6LlvvgH34qMUWSyPGxLwxsWb0qN93bbmU\r\nG2RD+uDv9DHhhdOu8h5n2sj7sEGwx2vOBM3ZL+fPbXy/I2en+DhWWulHg/V3\r\nVCiZC2ds+NleP8pQfm9jktmpuq8RZwjXE3LCTEN+DOP+nW+XPplw6BzmdWsl\r\ncc+wCg4VH0J1KF7Ww2ObB+qrf6rUyyMhU29lrFXMv+ACStVeGwKN9Qca4Rmq\r\nAa8W4wBFN1kBz8EJQL37XdqMuRkh2YfK/VBK2OGLskOrj9Imv6zXeFBWzDim\r\nrqaiS1IqASroVb9on/uAQOlTeQG9pJ6WiyGqP1XxgAac29yDd/O2JNvCzLAQ\r\ngb8MHNCnMsveABW+nBh72+HLn1iJcCAraZ5Dq9m2wP5O/EK07Mol7fRz+yFw\r\nL7H9l9e0H4YLDVboRiDDUs7gzSD1EhcUfes=\r\n=N6UD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/es6/index.js","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"module":"dist/esm/index.js","gitHead":"1645b9a41c56cdbd87bf2a2388f5ca4004a334c5","scripts":{"ci":"yarn install --frozen-lockfile","lint":"eslint src","test":"jest --passWithNoTests","build":"yarn lint && yarn test && yarn build:commonjs && yarn build:esm","clean":"rm -rf ./dist","preci":"rm -fr node_modules","prepush":"npm run build","prebuild":"yarn run clean","build:dev":"NODE_ENV='dev'; yarn build","build:esm":"tsc -p tsconfig-esm.json","test:watch":"jest --watch","build:watch":"tsc --watch","build:commonjs":"tsc -p tsconfig.json","prepublishOnly":"npm run clean && npm run build"},"typings":"dist/es6/index.d.ts","_npmUser":{"name":"u10int","email":"nshipes@urban10.com"},"_npmVersion":"8.11.0","description":"[<img width=\"300\" alt=\"MapsGL\" src=\"https://www.aerisweather.com/img/graphics/mapsgl-logo.png\">](https://www.aerisweather.com/products/mapsgl/)","directories":{},"_nodeVersion":"16.16.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.4.0","husky":"^8.0.3","react":"^18.2.0","dotenv":"^16.0.3","eslint":"^8.32.0","cypress":"^12.3.0","ts-jest":"^29.0.5","react-dom":"^18.2.0","tsc-watch":"^6.0.0","commitizen":"^4.3.0","typescript":"^4.9.4","@types/jest":"^29.2.6","lint-staged":"^13.1.0","@commitlint/cli":"^17.4.2","@tsconfig/node14":"^1.0.3","regenerator-runtime":"^0.13.11","@aerisweather/mapsgl":"^1.1.2","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.27.5","@tsconfig/recommended":"^1.0.2","eslint-plugin-unicorn":"^45.0.2","@testing-library/react":"^13.4.0","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.49.0","cz-conventional-changelog":"^3.3.0","@aerisweather/eslint-plugin":"^1.0.4","@commitlint/config-conventional":"^17.4.2","@typescript-eslint/eslint-plugin":"^5.49.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@aerisweather/mapsgl":"^1.1.2"},"_npmOperationalInternal":{"tmp":"tmp/react-mapsgl_0.1.1_1676039466879_0.20428446680560253","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@aerisweather/react-mapsgl","version":"0.1.2","license":"MIT","_id":"@aerisweather/react-mapsgl@0.1.2","maintainers":[{"name":"oliver.alexander.aw","email":"oliver.alexander@aerisweather.com"},{"name":"chi.yeung","email":"chi.yeung@aerisweather.com"},{"name":"noahblon","email":"noahblon@gmail.com"},{"name":"u10int","email":"nshipes@urban10.com"},{"name":"bennyc50","email":"bennyc50@gmail.com"},{"name":"lhuffmam","email":"lhuffman@aerisweather.com"},{"name":"four43","email":"seth@four43.com"},{"name":"aerisweather-ci","email":"eschwartz@aerisweather.com"}],"homepage":"https://www.aerisweather.com","dist":{"shasum":"5f6a6476b93cd50807de6011a25b06602f925e03","tarball":"https://registry.npmjs.org/@aerisweather/react-mapsgl/-/react-mapsgl-0.1.2.tgz","fileCount":24087,"integrity":"sha512-AFgqMvdlsZ/lDsSiOf419F3KfQMUd6mQOnBq0vZX7zuYBObj4ynTs8IOPnn68wGYmqe0Mpqy1SLfJPS3uw1bpg==","signatures":[{"sig":"MEYCIQCc/nrIbCsIPZSH5EN7ylXcfFr6VVLpTvi1qXerxD/gCAIhAPeSbxT7K/KInmnCFlXILGWTVNU4lCLS6YPPkKx44jbD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167214098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9PkjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtGA/7BpVbdt5pVvmEEPnqiwMVr+uBkKA9pQuVLQxtLBJqCFd8qM0A\r\nI9sdVoEWNEAICkuTTnCBN0icJVOqj3IgEGphnFWp+p2Czg0ICH/GNNixPh/s\r\nR9wI1M6dt3aFyVUs6AC2rah53jBgW0Zn2wTRd+wo92ELK0BdSx2Wd+mJWb07\r\nlbU4B1ur0Md5cg2HaWwzRwUHMKJFSx9WvMDDWNhx9piajQQ5qj+AK5xDULPG\r\npZdhx9ynAymx/iaVe3yYZ/IqujjlLnwHZ+ZcErsbC1GfmkpSGbH8duYdkH8j\r\nbK4pGGbS7ts9d9i2GApE7my9SRk3Dwf18kUSuH3M2ICMn9vf6aLr8lS0Daav\r\nFuKyiHTZPfWSQxPLrx3pt+hQYbcxQMWyItsdyIQSTGv7E6Yr88keNzmp0tG2\r\nen1rm3Wf3az4HTC/kmzLQOl3FehoGPjIqNKBaJ0Z7lhkZb5ohAokICO3rGXd\r\n4lLQWeP810FfGMRtkzG7/V/Dnn3TWhTRqJ1h1XeUKipCOw6Z1h/NRACxzPhZ\r\ncQ9q01AMdiXJT64xtLOHeoKi/PKEhekvfZleP8yyE09w0g3IFp4A1gF4aj05\r\nFiPOOb182CJk6iIpjB+/QhspXdiy17bh2m/SVscsTL+6+RSxWnS0kM1/gYlN\r\nxfGIXl0SAHtF8OS5BGnMUasp4FHcfvOhH0M=\r\n=6Wv0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/es6/index.js","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"module":"dist/esm/index.js","gitHead":"8f621640de7cf3e464f15499d73853754eb12650","scripts":{"ci":"yarn install --frozen-lockfile","lint":"eslint src","test":"jest --passWithNoTests","build":"yarn lint && yarn test && yarn build:commonjs && yarn build:esm","clean":"rm -rf ./dist","preci":"rm -fr node_modules","prepush":"npm run build","prebuild":"yarn run clean","build:dev":"NODE_ENV='dev'; yarn build","build:esm":"tsc -p tsconfig-esm.json","test:watch":"jest --watch","build:watch":"tsc --watch","build:commonjs":"tsc -p tsconfig.json","prepublishOnly":"npm run clean && npm run build"},"typings":"dist/es6/index.d.ts","_npmUser":{"name":"u10int","email":"nshipes@urban10.com"},"_npmVersion":"8.11.0","description":"[<img width=\"300\" alt=\"MapsGL\" src=\"https://www.aerisweather.com/img/graphics/mapsgl-logo.png\">](https://www.aerisweather.com/products/mapsgl/)","directories":{},"_nodeVersion":"16.16.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.4.0","husky":"^8.0.3","react":"^18.2.0","dotenv":"^16.0.3","eslint":"^8.32.0","cypress":"^12.3.0","ts-jest":"^29.0.5","react-dom":"^18.2.0","tsc-watch":"^6.0.0","commitizen":"^4.3.0","typescript":"^4.9.4","@types/jest":"^29.2.6","lint-staged":"^13.1.0","@commitlint/cli":"^17.4.2","@tsconfig/node14":"^1.0.3","regenerator-runtime":"^0.13.11","@aerisweather/mapsgl":"^1.1.2","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.27.5","@tsconfig/recommended":"^1.0.2","eslint-plugin-unicorn":"^45.0.2","@testing-library/react":"^13.4.0","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.49.0","cz-conventional-changelog":"^3.3.0","@aerisweather/eslint-plugin":"^1.0.4","@commitlint/config-conventional":"^17.4.2","@typescript-eslint/eslint-plugin":"^5.49.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@aerisweather/mapsgl":"^1.1.2"},"_npmOperationalInternal":{"tmp":"tmp/react-mapsgl_0.1.2_1676998946498_0.4936309715739291","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-02-09T22:04:07.371Z","modified":"2026-06-18T21:47:15.953Z","0.1.0":"2023-02-09T22:04:07.949Z","0.1.1":"2023-02-10T14:31:07.479Z","0.1.2":"2023-02-21T17:02:27.215Z"},"license":"MIT","homepage":"https://www.aerisweather.com","description":"[<img width=\"300\" alt=\"MapsGL\" src=\"https://www.aerisweather.com/img/graphics/mapsgl-logo.png\">](https://www.aerisweather.com/products/mapsgl/)","maintainers":[{"email":"nshipes@urban10.com","name":"u10int"},{"email":"bennyc50@gmail.com","name":"bennyc50"},{"email":"lhuffman@aerisweather.com","name":"lhuffmam"},{"email":"seth@four43.com","name":"four43"},{"email":"eschwartz@aerisweather.com","name":"aerisweather-ci"},{"email":"noahblon@gmail.com","name":"noahblon"},{"email":"devops@aerisweather.com","name":"xweather-ci"},{"email":"oliver.alexander@aerisweather.com","name":"oliver.alexander.aw"},{"email":"alexander.stone@vaisala.com","name":"xander-vaisala"}],"readme":"[<img width=\"300\" alt=\"MapsGL\" src=\"https://www.aerisweather.com/img/graphics/mapsgl-logo.png\">](https://www.aerisweather.com/products/mapsgl/)\n\n# react-mapsgl\n\n**react-mapsgl** is a React wrapper for our [MapsGL service and SDK](https://www.aerisweather.com/products/mapsgl/), a Javascript SDK that allows you to easily customize and integrate a variety of high-quality, vector-based weather data, imagery, and visualizations into your applications and custom solutions.\n\n### Supported Mapping Libraries\n\nMapsGL supports the following third-party mapping libraries:\n\n- [Mapbox](https://docs.mapbox.com/mapbox-gl-js/guides/) (direct or via [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl))\n- [Maplibre](https://maplibre.org/projects/maplibre-gl-js/)\n- [Google Maps](https://developers.google.com/maps/documentation/javascript)\n- [Leaflet](https://leafletjs.com)\n\n## Getting Started\n\n```bash\nyarn add @aerisweather/react-mapsgl\n```\n\n### Examples\n\nES6 with `react-mapbox-gl`:\n\n```typescript\nimport React, { useState } from 'react';\nimport ReactMapboxGL from 'react-mapbox-gl';\nimport * as mapsgl from '@aerisweather/mapsgl';\nimport ReactMapsGL, { \n    Timeline,\n    WeatherLayer,\n    DataInspector,\n    LegendControl \n} from '@aerisweather/react-mapsgl';\n\nimport 'mapbox-gl/dist/mapbox-gl.css';\nimport '@aerisweather/mapsgl/dist/mapsgl.css';\n\n// Mapbox factory\nconst Map = ReactMapboxGL({\n    accessToken: `MAPBOX_TOKEN`\n});\n\n// MapsGL factory\nconst MapController = ReactMapsGL({\n    accessKeys: {\n        id: `AERIS_CLIENT_ID`,\n        secret: `AERIS_CLIENT_SECRET`\n    }\n});\n\ninterface Props {\n    center?: { lat: number; lon: number; };\n    zoom?: number;\n}\n\nconst MapView = ({\n    center = { lat: 40, lon: -93 },\n    zoom = 3\n}: Props): React.ReactElement => {\n    const [map, setMap] = useState<any>();\n    const [playing, setPlaying] = useState(false);\n\n    // store the Mapbox map reference when loaded so it can be provided to the MapsGL controller\n    const onMapLoad = (mapEl: any) => {\n        setMap(mapEl);\n    };\n\n    return (\n        <>\n            <Map\n                center={[center.lon, center.lat]}\n                zoom={[zoom]}\n                onStyleLoad={onMapLoad}\n                style='mapbox://styles/mapbox/light-v9'\n                containerStyle={{\n                    width: '800px',\n                    height: '600px'\n                }}\n            >\n                <MapController strategy=\"mapbox\" map={map}>\n                    <Timeline\n                        start={new Date(Date.now() - (3600 * 12 * 1000))}\n                        duration={6}\n                        isPlaying={playing}\n                        onPlay={() => console.log('playing')}\n                        onStop={() => console.log('stopped')}\n                    />\n                    <DataInspector event=\"move\" />\n                    <LegendControl />\n                    <WeatherLayer id=\"temperatures\" quality={mapsgl.DataQuality.low} paint={{\n                        sample: {\n                            colorscale: {\n                                interval: 1,\n                                interpolate: false\n                            }\n                        }\n                    }} />\n                    <WeatherLayer id=\"wind-particles\" />\n                </MapController>\n            </Map>\n        </>\n    );\n};\n\nexport default MapView;\n```\n\n#### Custom Layers\n\nThe following example adds a custom GeoJSON data source and associated layers to the map, similar to the [example from our documentation]().\n\n```typescript\nimport React, { useState } from 'react';\nimport ReactMapboxGL from 'react-mapbox-gl';\nimport * as mapsgl from '@aerisweather/mapsgl';\nimport ReactMapsGL, { \n    Source,\n    Layer \n} from '@aerisweather/react-mapsgl';\n\nimport 'mapbox-gl/dist/mapbox-gl.css';\nimport '@aerisweather/mapsgl/dist/mapsgl.css';\n\n// Mapbox factory\nconst Map = ReactMapboxGL({\n    accessToken: `MAPBOX_TOKEN`\n});\n\n// MapsGL factory\nconst MapController = ReactMapsGL({\n    accessKeys: {\n        id: `AERIS_CLIENT_ID`,\n        secret: `AERIS_CLIENT_SECRET`\n    }\n});\n\ninterface Props {\n    center?: { lat: number; lon: number; };\n    zoom?: number;\n}\n\nconst MapView = ({\n    center = { lat: 40, lon: -8 },\n    zoom = 5\n}: Props): React.ReactElement => {\n    const [map, setMap] = useState<any>();\n\n    // store the Mapbox map reference when loaded so it can be provided to the MapsGL controller\n    const onMapLoad = (mapEl: any) => {\n        setMap(mapEl);\n    };\n\n    return (\n        <>\n            <Map\n                center={[center.lon, center.lat]}\n                zoom={[zoom]}\n                onStyleLoad={onMapLoad}\n                style='mapbox://styles/mapbox/light-v9'\n                containerStyle={{\n                    width: '800px',\n                    height: '600px'\n                }}\n            >\n                <MapController strategy=\"mapbox\" map={map}>\n                    <Source\n                        id=\"country-region\"\n                        type=\"geojson\"\n                        options={{\n                            data: {\n                                type: 'FeatureCollection',\n                                features: [{\n                                    type: 'Feature',\n                                    properties: {\n                                        type: 'Sovereign country',\n                                        name: 'Portugal',\n                                        continent: 'Europe',\n                                        region_un: 'Europe',\n                                        subregion: 'Southern Europe',\n                                        region_wb: 'Europe & Central Asia'\n                                    },\n                                    geometry: {\n                                        type: 'Polygon',\n                                        coordinates: [\n                                            [\n                                                [-9.034817674180246, 41.88057058365967],\n                                                [-8.67194576662672, 42.13468943945496],\n                                                [-8.263856980817792, 42.28046865495034],\n                                                [-8.013174607769912, 41.790886135417125],\n                                                [-7.422512986673795, 41.79207469335983],\n                                                [-7.251308966490824, 41.91834605566505],\n                                                [-6.668605515967656, 41.883386949219584],\n                                                [-6.389087693700915, 41.381815497394655],\n                                                [-6.851126674822552, 41.11108266861753],\n                                                [-6.864019944679385, 40.33087189387483],\n                                                [-7.026413133156595, 40.184524237624245],\n                                                [-7.066591559263529, 39.71189158788277],\n                                                [-7.498632371439725, 39.62957103124181],\n                                                [-7.098036668313128, 39.03007274022378],\n                                                [-7.374092169616318, 38.37305858006492],\n                                                [-7.029281175148796, 38.07576406508977],\n                                                [-7.166507941099865, 37.803894354802225],\n                                                [-7.537105475281024, 37.42890432387623],\n                                                [-7.453725551778092, 37.09778758396607],\n                                                [-7.855613165711985, 36.83826854099627],\n                                                [-8.382816127953689, 36.97888011326246],\n                                                [-8.898856980820327, 36.86880931248078],\n                                                [-8.746101446965554, 37.65134552667661],\n                                                [-8.839997524439879, 38.26624339451761],\n                                                [-9.287463751655224, 38.3584858261586],\n                                                [-9.526570603869715, 38.73742910415491],\n                                                [-9.446988898140232, 39.39206614842837],\n                                                [-9.048305223008427, 39.75509308527877],\n                                                [-8.977353481471681, 40.15930613866581],\n                                                [-8.768684047877102, 40.76063894303019],\n                                                [-8.79085323733031, 41.18433401139126],\n                                                [-8.99078935386757, 41.54345937760364],\n                                                [-9.034817674180246, 41.88057058365967]\n                                            ]\n                                        ]\n                                    }\n                                }]\n                            }\n                        }}\n                    />\n                    <Layer\n                        id=\"region-fill\"\n                        type=\"fill\"\n                        sourceId=\"country-region\"\n                        paint={{\n                            fill: {\n                                color: '#ff0000',\n                                opacity: 0.5\n                            }\n                        }}\n                    />\n                    <Layer\n                        id=\"region-outline\"\n                        type=\"line\"\n                        sourceId=\"country-region\"\n                        paint={{\n                            stroke: {\n                                color: '#ff0000',\n                                thickness: 5\n                            }\n                        }}\n                    />\n                </MapController>\n            </Map>\n        </>\n    );\n};\n\nexport default MapView;\n```\n\n### Example Project\n\nFor basic examples of how to use React MapsGL with the different third-party mapping libraries currently supported, run the project under the `/examples` directory:\n\n```bash\n> cd ./examples\n> yarn install\n> yarn develop\n```\n\nYou will need to rename `.env.txt` to `.env` at the root of this repo and add the necessary AerisWeather and third-party mapping keys before running `yarn develop`.\n\nOpen the `examples/src/index.ts` file and swap out the rendered component based on your desired mapping library: \n\n```typescript\nimport { createRoot } from 'react-dom/client';\nimport ReactMapboxMap from './ReactMapboxMap';\n// import MapboxMap from './MapboxMap';\n// import MaplibreMap from './MaplibreMap';\n// import GoogleMap from './GoogleMap';\n// import LeafletMap from './LeafletMap';\n\nconst container = document.querySelector('#app');\nconst root = createRoot(container!);\n\nroot.render(<ReactMapboxMap />);\n```\n\n## Usage\n\nSince React MapsGL is written in Typescript, you can refer to the options interface corresponding to each component that's part of the library within the `src/` directory (e.g. `MapControllerOptions`, `DataInspectorControlOptions`, `LegendControlOptions` and `TimelineOptions`) for the list of supported properties and their requirements. \n\nAlso refer to the [MapsGL documentation](https://www.aerisweather.com/docs/mapsgl/) for the complete usage documentation and information regarding working with and using MapsGL.\n\n## MapsGL Resources\n\nUse the following MapsGL resources to learn more about the SDK and the wide range of customization options, or to view a variety of demos and examples:\n\n- [Getting started](https://www.aerisweather.com/docs/mapsgl/getting-started/)\n- [MapsGL Documentation](https://www.aerisweather.com/docs/mapsgl/)\n- Demos: [Media](https://demos.aerisweather.com/map-app/mapsgl-media/), [Severe](https://demos.aerisweather.com/map-app/mapsgl-severe/)\n- [Examples](https://www.aerisweather.com/docs/mapsgl/)\n\n## Support\n\nFor issues and feature requests related to this **react-mapsgl** library, please submit a Github issue. \n\nFor all MapsGL-specific support, [submit a new ticket](https://helpdesk.aerisweather.com/) with any questions, bug reports or feature suggestions you have. You can also reach out to us on Twitter at [@AerisWeather](https://twitter.com/AerisWeather).\n\t","readmeFilename":"README.md"}