{"_id":"@alxcube/wms-client","name":"@alxcube/wms-client","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@alxcube/wms-client","version":"0.1.0","type":"module","main":"./dist/wms-client.umd.cjs","module":"./dist/wms-client.js","types":"./dist/wms-client.d.ts","exports":{".":{"import":"./dist/wms-client.js","require":"./dist/wms-client.umd.cjs"}},"scripts":{"build":"tsc && vite build","test":"vitest --run","lint":"eslint ./src ./spec --ext .ts && npm run prettier","prettier":"prettier --write 'src/**/*.ts' && prettier --write 'spec/**/*.ts'"},"author":{"name":"Alexander Alexandrov","email":"alxcube@gmail.com"},"description":"Web Map Service (WMS) client.","keywords":["web map service","wms"],"repository":{"type":"git","url":"git+https://github.com/alxcube/wms-client.git"},"license":"MIT","devDependencies":{"@rollup/plugin-terser":"^0.4.4","@typescript-eslint/eslint-plugin":"^7.0.1","@vitest/browser":"^1.2.2","axios-mock-adapter":"^1.22.0","eslint":"^8.56.0","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.29.1","eslint-plugin-prettier":"^5.1.3","prettier":"^3.2.5","typescript":"^5.2.2","vite":"^5.1.0","vite-plugin-banner":"^0.7.1","vite-plugin-dts":"^3.7.2","vitest":"^1.2.2","webdriverio":"^8.31.1"},"dependencies":{"@alxcube/di-container":"^1.0.0","@alxcube/xml-mapper":"^1.0.0","@xmldom/xmldom":"^0.8.10","axios":"^1.6.7","xpath":"^0.0.34"},"_id":"@alxcube/wms-client@0.1.0","gitHead":"b554bbdcad788c3588cb9569d0a32b95b60576cf","bugs":{"url":"https://github.com/alxcube/wms-client/issues"},"homepage":"https://github.com/alxcube/wms-client#readme","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-/CwE12QXj7Wh+nr4d9SSuiRxt4/5ldYWFOqrkOxrlekoTtytdY89FZnH+/qlVu95R7V297b13l3W3AouU2Lx8A==","shasum":"ddaf94aefeabd4d4f4d2fac008c83a9679aa8503","tarball":"https://registry.npmjs.org/@alxcube/wms-client/-/wms-client-0.1.0.tgz","fileCount":8,"unpackedSize":575745,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGp0tKCZaN71RgmB8FYxquGl1UeGv2xa1lvacZIJqDygIhAMvb5Zh/v4Eu5VTxAmXEWKkwVc7LUEj+UQ0k9PQO17Nh"}]},"_npmUser":{"name":"alxcube","email":"alxcube@gmail.com"},"directories":{},"maintainers":[{"name":"alxcube","email":"alxcube@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wms-client_0.1.0_1715986238600_0.8288067049973113"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-17T22:50:38.459Z","0.1.0":"2024-05-17T22:50:38.791Z","modified":"2024-05-17T22:50:39.075Z"},"maintainers":[{"name":"alxcube","email":"alxcube@gmail.com"}],"description":"Web Map Service (WMS) client.","homepage":"https://github.com/alxcube/wms-client#readme","keywords":["web map service","wms"],"repository":{"type":"git","url":"git+https://github.com/alxcube/wms-client.git"},"author":{"name":"Alexander Alexandrov","email":"alxcube@gmail.com"},"bugs":{"url":"https://github.com/alxcube/wms-client/issues"},"license":"MIT","readme":"# @alxcube/wms-client\n\n`@alxcube/wms-client` is a [Web Map Service (WMS)](https://www.ogc.org/standard/wms/)\nclient written in TypeScript.\nUnder the hood, it uses [Axios](https://www.npmjs.com/package/axios) for handling\nHTTP requests. Works both in the browser and in Node.js environments.\n\nSupported WMS versions: 1.0, 1.1, 1.3.\n\n## Usage\n### Installation\n```shell\nnpm i @alxcube/wms-client\n```\n\n### Creating client for known WMS version\n\nIf the WMS version is known, you can create a client using the `createClient()`\nfunction. This function takes the WMS URL, the adapter version, and an optional\noptions object, and it returns the [`WmsClient`](./src/client/WmsClient.ts) interface.\nThe adapter version must be compatible with the WMS version on the server.\nThe following adapter versions are available out of the box: `1.0.0`, `1.1.1`,\n`1.3.0`.\n\n```ts\nimport { createClient } from \"@alxcube/wms-client\";\n\nconst wmsUrl = \"https://example.com/wms\";\nconst wmsVersion = \"1.3.0\";\nconst client = createClient(wmsUrl, wmsVersion);\n```\n\n### Using version negotiation\n\nIf the WMS version is unknown, you can use the `negotiate()` function. It takes the\nWMS URL and an optional options object, and returns a `Promise` that resolves to the\n`WmsClient` interface upon successful negotiation.\n\n```ts\nimport { negotiate } from \"@alxcube/wms-client\";\n\nconst wmsUrl = \"https://example.com/wms\";\nconst client = await negotiate(wmsUrl);\n```\n\n### GetCapabilities request\n\nTo retrieve WMS metadata, use `getCapabilities()` method of `WmsClient`.\n\n```ts\nconsole.log(await client.getCapabilities());\n```\n\n### GetMap request\n\nUse `getMap()` method of `WmsClient` to retrieve map by given parameters. The returned\n`Promise` will be resolved with `ArrayBuffer` of server response body, which can be\ndecoded later, assuming that consumer code is aware of response format.\n\n```ts\nconst getMapParams = {\n  crs: \"EPSG:4326\",\n  layers: [{ layer: \"gebco_latest\" }],\n  bounds: {\n    minX: -90,\n    minY: -180,\n    maxX: 90,\n    maxY: 360,\n  },\n  format: \"image/jpeg\",\n  width: 1200,\n  height: 600,\n  exceptionsFormat: \"XML\",\n};\n\n// Request image\nconst mapImage: ArrayBuffer = await client.getMap(getMapParams);\n\n// Make HTMLImageElement from response image ArrayBuffer\nconst blob = new Blob([mapImage]);\nconst reader = new FileReader();\nreader.onload = () => {\n  const img = new Image();\n  img.src = reader.result as string;\n  document.body.appendChild(img);\n};\nreader.readAsDataURL(blob);\n```\n\n### Get image URL\n\nWhen your only need is to get map image url, e.g. for `src` property of\n`HTMLImageElement`, you can use `getMapUrl` method.\n\n```ts\nconst getMapParams = {\n  crs: \"EPSG:4326\",\n  layers: [{ layer: \"gebco_latest\" }],\n  bounds: {\n    minX: -90,\n    minY: -180,\n    maxX: 90,\n    maxY: 360,\n  },\n  format: \"image/jpeg\",\n  width: 1200,\n  height: 600,\n  exceptionsFormat: \"INIMAGE\",\n};\n\n// Create HTMLImageElement\nconst img = new Image();\nimg.src = client.getMapUrl(getMapParams);\ndocument.body.appendChild(img);\n```\n\n### GetFeatureInfo request\n\nTo make feature info request, you use `getFeatureInfo` method. It returns `Promise`\nresolving `string` of WMS response body. Since GetFeatureInfo request has no\nspecific format, the responsibility of decoding response is up to consuming code.\n\n```ts\nconst getFeatureInfoParams = {\n  crs: \"EPSG:4326\",\n  layers: [{ layer: \"gebco_latest\" }],\n  bounds: {\n    minX: -90,\n    minY: -180,\n    maxX: 90,\n    maxY: 360,\n  },\n  format: \"image/jpeg\",\n  width: 1200,\n  height: 600,\n  exceptionsFormat: \"XML\",\n  queryLayers: [\"gebco_latest\"],\n  infoFormat: \"text/html\",\n  x: 200,\n  y: 100\n};\n\nconst featureInfo = await client.getFeatureInfo(getFeatureInfoParams);\ndocument.body.innerHTML = featureInfo;\n```\n\n### Using custom Axios instance.\n\nYou can pass custom Axios instance to `httpClient` option of `createClient()` or\n`negotiate()` function. This instance will be used in all WMS requests. This may be\nuseful when you want to set up proxy, caching etc.\n\n```ts\nimport axios from \"axios\";\nimport { negotiate } from \"@alxcube/wms-client\";\n\nconst wmsUrl = \"https://example.com/wms\";\nconst httpClient = axios.create();\n\n// Configure axios instance.\n// ...\n\nconst wmsClient = await negotiate(wmsUrl, { httpClient });\n```","readmeFilename":"README.md"}