{"_id":"@artsdatabanken/nbic-map-component","name":"@artsdatabanken/nbic-map-component","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@artsdatabanken/nbic-map-component","version":"0.3.0","description":"Shared map component built on OpenLayers","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"dev":"vite --config playground/vite.config.js","playground:build":"vite build --config playground/vite.config.js","playground:preview":"vite preview --config playground/vite.config.js","build":"tsup src/index.ts --format esm,cjs --dts","clean":"rimraf dist || rm -rf dist","typecheck":"tsc --noEmit","lint":"eslint \"src/**/*.{ts,tsx}\" \"playground/**/*.{ts,tsx}\"","lint:fix":"eslint . --fix","test":"vitest run","test:watch":"vitest","prepare":"npm run build"},"keywords":["openlayers","map","gis","nbic","typescript"],"author":"","license":"MIT","dependencies":{"@turf/area":"^7.2.0","@turf/buffer":"^7.2.0","@turf/kinks":"^7.2.0","ol":"^10.6.1","proj4":"^2.19.10","zod":"^4.1.5"},"devDependencies":{"@eslint/js":"^9.34.0","@vitest/coverage-v8":"^3.2.4","eslint":"^9.34.0","eslint-config-prettier":"^10.1.8","globals":"^16.3.0","prettier":"^3.6.2","tsup":"^8.5.0","typescript":"^5.9.2","typescript-eslint":"^8.41.0","vite":"^6.3.5","vitest":"^3.2.4"},"repository":{"type":"git","url":"git+https://github.com/Artsdatabanken/nbic-map-component.git"},"bugs":{"url":"https://github.com/Artsdatabanken/nbic-map-component/issues"},"homepage":"https://github.com/Artsdatabanken/nbic-map-component#readme","_id":"@artsdatabanken/nbic-map-component@0.3.0","gitHead":"24dac976dc14b26c35a15d6c9de2d5ec397eb946","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-VH0BtX+lCaBhwTYfkYlq/ezlDz3645g2XpDg+hiYJMfJKxmqbBznITRt6jCM2/pG6WJmOQAq/mCKb4uMc+OJlA==","shasum":"9f62bc74e3066e42f009f952f3b4f956a2c8dd62","tarball":"https://registry.npmjs.org/@artsdatabanken/nbic-map-component/-/nbic-map-component-0.3.0.tgz","fileCount":8,"unpackedSize":313607,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBG2/nxCeMzruM5oAzY0Uls/9YWGeR0o9MPF0QhoyJKWAiAwmKaM4TWeDBkr4yCe7EsyJHqhjmU2x+CyWS9mGxB2pg=="}]},"_npmUser":{"name":"steinhoem","email":"stein.hoem@gmail.com"},"directories":{},"maintainers":[{"name":"myrdrahl","email":"even.juberg@artsdatabanken.no"},{"name":"wouterkoch","email":"wouter.koch@artsdatabanken.no"},{"name":"vebjorn-adb","email":"vebjorn.alseth@artsdatabanken.no"},{"name":"steinhoem","email":"stein.hoem@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nbic-map-component_0.3.0_1773647940270_0.5798884244135041"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-16T07:59:00.157Z","0.3.0":"2026-03-16T07:59:00.429Z","modified":"2026-03-16T07:59:00.642Z"},"maintainers":[{"name":"myrdrahl","email":"even.juberg@artsdatabanken.no"},{"name":"wouterkoch","email":"wouter.koch@artsdatabanken.no"},{"name":"vebjorn-adb","email":"vebjorn.alseth@artsdatabanken.no"},{"name":"steinhoem","email":"stein.hoem@gmail.com"}],"description":"Shared map component built on OpenLayers","homepage":"https://github.com/Artsdatabanken/nbic-map-component#readme","keywords":["openlayers","map","gis","nbic","typescript"],"repository":{"type":"git","url":"git+https://github.com/Artsdatabanken/nbic-map-component.git"},"bugs":{"url":"https://github.com/Artsdatabanken/nbic-map-component/issues"},"license":"MIT","readme":"# nbic-map-component\r\n\r\nShared, framework-agnostic map component built on OpenLayers, designed to be used by host applications (Angular, React, Lit, plain TS/JS) through a stable API.\r\n\r\nThe library separates what the host application wants to do (MapApi) from how it is rendered (MapEngine / OpenLayers), making it easier to maintain, test, and extend.\r\n\r\n---\r\n\r\n## Architecture\r\n```bash\r\nThe architecture is intentionally layered:\r\n\r\nHost app (Angular/React/Lit/vanilla)\r\n   |\r\n   |  calls methods + subscribes to events\r\n   v\r\nMapApi (public facade)\r\n   |\r\n   |  delegates 1:1 to an engine, keeps public types stable\r\n   v\r\nMapEngine (interface)\r\n   |\r\n   |  concrete implementation chosen at runtime (or build-time)\r\n   v\r\nOlMapEngine (OpenLayers implementation)\r\n   |\r\n   +--> LayerRegistry (indexes layers/sources)\r\n   +--> Adapters (LayerDef -> OL layer, StyleDef -> OL style, SourceDef -> OL source)\r\n   +--> Controllers (Draw / Hover / Select / Geo / Controls / Zoom)\r\n   |\r\n   v\r\nOpenLayers (ol/Map, ol/layer, ol/source, ol/interaction, ol/style)\r\n```\r\n\r\n### Design description\r\n```bash\r\nThe host application (Angular, React, Lit, etc.):\r\n\t•\tOwns application state\r\n\t•\tDecides when and what to draw (layers, features, interactions)\r\n\t•\tTalks only to MapApi\r\n\r\nIt never accesses OpenLayers directly.\r\n\r\nMapApi\r\n\t•\tPublic API exposed by nbic-map-component\r\n\t•\tStable contract for host applications\r\n\t•\tMethods like:\r\n\t•\tadding/removing layers\r\n\t•\tstarting/stopping drawing\r\n\t•\tselecting features\r\n\t•\tcontrolling interactions\r\n\r\nMapEngine\r\n\t•\tInternal orchestration layer\r\n\t•\tTranslates MapApi calls into engine actions\r\n\t•\tNo OpenLayers imports\r\n\t•\tMakes it possible to swap rendering engines in the future\r\n\r\nOlMapEngine\r\n\t•\tConcrete implementation using OpenLayers\r\n\t•\tOwns:\r\n\t•\tol/Map\r\n\t•\tlayers, sources, interactions\r\n\t•\tOpenLayers-specific logic (cluster, hover, select, draw)\r\n\r\nWhy this design?\r\n\t•\tClear separation of concerns\r\n\t•\tHost apps stay simple and future-proof\r\n\t•\tOpenLayers complexity is fully encapsulated\r\n\t•\tEasier testing and playground setup\r\n````\r\n---\r\n\r\n## Internal structure\r\n```bash\r\nsrc/\r\n├─ api/                 # Public types & events (no OpenLayers imports)\r\n│  ├─ types.ts\r\n│  ├─ events.ts\r\n│\r\n├─ core/\r\n│  ├─ MapApi.ts         # Public facade\r\n│  ├─ MapEngine.ts     # Internal engine interface\r\n│\r\n│  └─ ol/\r\n│     ├─ OlMapEngine.ts\r\n│     ├─ adapters/     # Layer / source / style adapters\r\n│     ├─ interactions/ # Draw, Hover, Select controllers\r\n│     ├─ layers/       # LayerRegistry, base-layer logic\r\n│     ├─ utils/        # Geometry, extent, projection helpers\r\n│\r\n├─ presets/             # Predefined layers & sources (WMTS, base maps)\r\n│\r\n└─ index.ts             # Public entry point\r\n```\r\n\r\n---\r\n\r\n## 🚀 Getting started\r\n\r\n### Install dependencies\r\n\r\n```bash\r\nnpm install\r\n```\r\n### Build the library\r\n```bash\r\nnpm run build\r\n```\r\n### Run tests\r\n```bash\r\nnpm run test\r\nnpm run test:watch\r\n```\r\n### Lint and format\r\n```bash\r\nnpm run lint\r\n```\r\n\r\n## 🧪 Playground (local testing)\r\nThis repo includes a small Vite-powered playground to test the component in the browser.\r\n\r\n### Start it\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n## 📖 Usage\r\n### Install via npm (once published):\r\n```bash\r\nnpm install nbic-map-component\r\n```\r\n### Basic usage in Angular\r\n```bash\r\nimport { NbicMapComponent, MapEvents } from 'nbic-map-component';\r\nimport { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';\r\n\r\nexport class AppComponent implements AfterViewInit {\r\n  @ViewChild('mapEl', { static: true }) mapEl!: ElementRef<HTMLDivElement>;\r\n  private map!: InstanceType<typeof NbicMapComponent>;\r\n\r\n  ngAfterViewInit(): void {\r\n    this.map = new NbicMapComponent({\r\n          target: this.mapEl.nativeElement,\r\n          projection: 'EPSG:3857',          // View must match WMTS projection\r\n          center: [1157722.7042500454, 9208962.278247332],\r\n          zoom: 4,\r\n          minZoom: 1,\r\n          maxZoom: 18,\r\n          controls: { scaleLine: true, fullscreen: true, geolocation: true, zoom: true, attribution: true },\r\n        });\r\n\r\n    this.map.on(MapEvents.Ready, () => {\r\n          this.mapReadyAction.next(true);\r\n          this.map.activateHoverInfo();\r\n        });\r\n  }\r\n}\r\n```\r\n### html\r\n```bash\r\n<div #mapEl class=\"map\"></div>\r\n```\r\n### css\r\n```bash\r\n.map {\r\n    height: 60vh;\r\n    width: 100%;\r\n}\r\n```","readmeFilename":"README.md","_rev":"1-c09f2c0eb974c6e147e39fc11c3b7a62"}