flughaveno-sdk

Owner: [email protected] | Last Updated: 2026-06-23

Embeddable Vue 2 SDK for interactive airport map navigation at AENA airports. Published as the flughaveno-sdk npm package (v1.5.0) and consumed as a global class window.AMap.

Purpose

Provides an embeddable map component that renders AENA airport interiors (terminals, floors, POIs) and supports route navigation, search, PMR accessibility, MUPI signage mode, AVA mode and print mode. Consumers instantiate AMap against a DOM container and drive it through options + callbacks.

In route mode, search results that group several identical POIs (same name, building and floor — e.g. "Aseos (5)") expand into an accessible inline list of instances (WCAG AAA disclosure pattern: chevron + aria-expanded, Esc to collapse, ≥44px targets, distances to the other route endpoint when available) labelled with the POI name plus a numeric suffix ("Aseos y PMR 1…n"), so the user explicitly chooses which instance to use as origin/destination/step. Each option also has a "show on map" pin button that switches the map to the instance's building/floor and flies to it. Map camera animations honor prefers-reduced-motion.

Setup

Requires Node >=16.

npm install
cp .env.dev .env        # or .env.staging for staging
npm run serve           # dev server with hot reload

Environment variables:

• VUE_APP_API_URL — base URL of the Data Connector API
• VUE_APP_API_VERSION — API version appended to baseURL by the Axios interceptor
• VUE_APP_ASSETS_BUCKET_URL — base URL whose root holds the POI icon mapping (mapping/icon-mapping.json), the marker sprite (sprite/markers@1x.{png,json}) and the subcategory/category SVGs plus the legend swatches (icons/{poi,categories,marcadores}/<name>.svg, icons/legend-*.svg). Set it to an external bucket, or / to serve these from the app's public/ directory while the bucket is mocked. Both are plain URLs fetched the same way — one source, no fallback. When embedding the production bundle, set the external bucket URL (/ only resolves where public//dist/ is hosted at the site root). See src/api/assetsService.js.

Usage

Build artifacts (dist/flughaveno-sdk.js + dist/flughaveno-sdk.css) expose the global AMap class:

const map = new AMap('container-id', {
  airport: 'LEMD',
  building: 'T4',
  floor: '1',
  explorerMode: true,
  language: 'es',
  // optional: category, subcategories, poi, route, mupiMode, avaMode, printMode
})

map.onPoiSelected((poi) => console.log(poi))
map.onPoiClicked((poi) => console.log(poi))

Public methods: getSelectedPoiId(), getSelectedPoi(), getOriginPoiId(), onPoiSelected(cb), onPoiClicked(cb).

Commands

npm run serve           # dev server (mode=dev)
npm run build           # production build
npm run build:dev       # development build
npm run build:staging   # staging build
npm run lint            # ESLint + Prettier
npm run docs            # local Docsify docs
npm run i18n:report     # missing/unused translation keys
npm run plop            # scaffold a new component

Releasing

Publishing is automated with Changesets — no manual npm version / npm publish.

1. Every PR that changes the SDK must include a changeset. From the repo root run:

   npx changeset

   Select flughaveno-sdk, pick the semver bump (patch / minor / major), and write a one-line summary. Commit the generated .changeset/*.md file with your PR. The changeset bot comments on PRs that are missing one.

2. On merge to master, the Publish SDK GitHub Actions workflow (.github/workflows/sdk-publish.yml) opens a "chore(sdk): release" PR that bumps package.json and updates CHANGELOG.md.

3. Merging that release PR publishes the new version to npm and creates a GitHub release + tag.

Changesets config lives at the repo root (.changeset/). The root pnpm-workspace.yaml is only a package-location manifest the changeset tooling reads — the repo still uses npm; npm ignores that file.

Dependencies

Runtime

• Vue 2.6 + Vuex 3.0 + Vue-i18n 8.0 (locales: en, es, ca, eu, gl, va; fallback en)
• MapLibre GL 5.x, Turf.js 5.1, proj4 2.7
• Axios 0.19

Build / tooling

• Vue CLI 3 + Webpack (single-file output, no code splitting)
• SCSS with style-resources-loader injecting src/styles/style.scss globally
• ESLint 5 + Prettier, Plop for scaffolding, Docsify for docs

Upstream service

• Data Connector API (see ../../data-connector/) for airports, POIs, routes

Project Structure

src/
  api/            Axios layer (mapService.js)
  app-shell/      Root AppShell.vue (modes: explorer, route, print, MUPI, AVA)
  assets/         SVG icons, sprites
  components/
    common/       Globally registered UI (checkbox, dropdown, modal, tabs, tooltip...)
    aena-*/       Feature components (points, legend, pmr, terminal-selector...)
    map-component/  MapLibre GL wrapper
    layers/  popups/  searcher/  feedback/
  directives/     v-click-outside
  filters/        durationTime, capitalize, displayCoordinates
  locales/        *.json per language
  mixins/         saveActions, getRoutePoint, setLocation, setDeviceWidthClass
  store/          Vuex (state, mutations, actions, getters, constants)
  styles/         theme.scss, mixins.scss, grid.scss, fonts.scss, buttons.scss
  utils/          getCategoryIcon, matchString, isMobile, routing-actions...
  main.js         Exports the AMap class

Component convention — each component is split into ComponentName.vue (wrapper) + component-name.js (logic) + component-name.html (template) + component-name.scss (scoped styles) + index.js. Components under components/common/ are auto-registered globally via require.context() in main.js.

Naming: .vue PascalCase, internal .js/.html/.scss kebab-case, utilities camelCase, store constants UPPER_SNAKE_CASE.

Known Issues

• No automated test framework configured.
• Pinned to Vue 2 / Vue CLI 3 / Webpack 4 era; several legacy peer deps remain. maplibre-gl ships an ES2020 bundle, so the SDK uses its CSP build transpiled via transpileDependencies (plus two explicit Babel operator transforms in babel.config.js), with the map worker inlined as a raw string and loaded through setWorkerUrl — the regular dist inlines the worker as stringified code that breaks when transpiled. Untranspilable BigInt literals remain in the published bundle, so consumers that re-bundle the SDK need Webpack ≥ 4.43 (or any modern bundler).
• MapLibre GL 5.x requires WebGL2: WebGL1-only devices and IE11 are no longer supported (all current Android System WebView / WKWebView versions are fine).
• Single-bundle output (no code splitting) — full SDK ships on first load.