Skip to content

Commit 8aa62ec

Browse files
SkySailsSkySails
authored
Merge pull request #87 from Navigraph/amdb
2 parents ff30234 + 903169e commit 8aa62ec

35 files changed

+2363
-9
lines changed

‎.changeset/ninety-rice-float.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"map": minor
3+
"@navigraph/amdb": patch
4+
"@navigraph/app": patch
5+
---
6+
7+
Create AMDB SDK module with complete feature typings and API request wrappers.

‎examples/map/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Example Navigraph Map
22

3-
This is a very simple & barebones HTML + CSS + TS project that shows the basic use of the Navigraph SDK Leaflet module.
3+
This is a very simple & barebones HTML + CSS + TS project that shows the basic use of the Navigraph SDK Leaflet and AMDB modules.
44

55
## Installation
66

‎examples/map/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Navigraph Leaflet</title>
77
</head>
8+
89
<body>
910
<div class="auth container">
1011
<button id="signin">Sign in</button>
@@ -23,6 +24,10 @@
2324
<button>DAY</button>
2425
<button>NIGHT</button>
2526
</div>
27+
<div class="amdb-layers container" style="visibility: hidden"></div>
28+
<div class="amdb-icao container">
29+
<input type="text" id="icao-input" maxlength="4" required placeholder="EGLL" />
30+
</div>
2631
<div id="map"></div>
2732
<script type="module" src="/src/main.ts"></script>
2833
</body>

‎examples/map/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
},
1616
"dependencies": {
1717
"@navigraph/leaflet": "*",
18+
"@navigraph/amdb": "*",
1819
"leaflet": "^1.9.4",
1920
"navigraph": "*"
2021
}

‎examples/map/src/main.ts

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { FAASource, NavigraphRasterSource, NavigraphTheme, NavigraphTileLayer } from "@navigraph/leaflet"
2-
import { Map } from "leaflet"
3-
import { auth } from "./navigraph"
2+
import { geoJSON, GeoJSON, Map } from "leaflet"
3+
import { amdb, auth } from "./navigraph"
44
import "leaflet/dist/leaflet.css"
55
import "./style.css"
6+
import { allLayers, AmdbLayerName, AmdbSearchResult } from "@navigraph/amdb"
7+
import getAmdbLayers from "@navigraph/amdb/src/api/getAmdbLayers"
68

79
// Instantiate a Leaflet map and set view to Sweden
810
const map = new Map("map").setView([59.334591, 18.06324], 5)
@@ -30,6 +32,84 @@ document.querySelectorAll<HTMLButtonElement>(".themes > button").forEach(el => {
3032
})
3133
})
3234

35+
let airport: AmdbSearchResult | null = null
36+
37+
const visibleAmdbLayers: AmdbLayerName[] = []
38+
39+
let currentAmdbLayer: GeoJSON | null = null
40+
41+
async function updateAmdb() {
42+
;(document.querySelectorAll(".amdb-layer") as NodeListOf<HTMLButtonElement>).forEach(element => {
43+
element.style.backgroundColor = visibleAmdbLayers.includes(element.id as AmdbLayerName) ? "green" : ""
44+
})
45+
46+
if (currentAmdbLayer && map.hasLayer(currentAmdbLayer)) {
47+
map.removeLayer(currentAmdbLayer)
48+
}
49+
50+
if (!airport) return
51+
52+
const data = await getAmdbLayers({ icao: airport?.idarpt, include: visibleAmdbLayers })
53+
54+
if (!data) return
55+
56+
currentAmdbLayer = geoJSON(Object.values(data), {
57+
onEachFeature: (feature, layer) => {
58+
layer.on("click", e => {
59+
currentAmdbLayer?.resetStyle()
60+
61+
e.target.setStyle({ color: "red" })
62+
})
63+
layer.bindPopup(`<p>${JSON.stringify(feature.properties, null, 4)}</p>`)
64+
},
65+
}).addTo(map)
66+
}
67+
68+
const amdbContainer = document.querySelector<HTMLDivElement>(".amdb-layers")!
69+
70+
allLayers.forEach(layer => {
71+
const button = document.createElement("button")
72+
73+
button.innerHTML = layer
74+
75+
button.id = layer
76+
button.className = "amdb-layer"
77+
78+
button.addEventListener("click", () => {
79+
if (visibleAmdbLayers.includes(layer)) {
80+
visibleAmdbLayers.splice(visibleAmdbLayers.indexOf(layer), 1)
81+
} else {
82+
visibleAmdbLayers.push(layer)
83+
}
84+
85+
updateAmdb()
86+
})
87+
88+
amdbContainer.appendChild(button)
89+
})
90+
91+
const icaoInput = document.querySelector<HTMLInputElement>("#icao-input")
92+
93+
icaoInput?.addEventListener("change", async () => {
94+
const value = icaoInput.value
95+
96+
if (value.length === 4 && /^[A-Z]{4}$/.test(value)) {
97+
airport = (await amdb.searchAmdb(value))?.[0] ?? null
98+
99+
if (airport) {
100+
icaoInput.style.backgroundColor = "green"
101+
amdbContainer.style.visibility = "visible"
102+
} else {
103+
icaoInput.style.backgroundColor = "red"
104+
amdbContainer.style.visibility = "hidden"
105+
}
106+
107+
updateAmdb()
108+
} else {
109+
icaoInput.style.backgroundColor = ""
110+
}
111+
})
112+
33113
// Auth UI
34114

35115
const signinBtn = document.querySelector<HTMLDivElement>("#signin")!

‎examples/map/src/navigraph.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { getAmdbAPI } from "@navigraph/amdb"
12
import { initializeApp, Logger, NavigraphApp, Scope } from "navigraph/app"
23
import { getAuth } from "navigraph/auth"
34

@@ -6,7 +7,7 @@ Logger.level = "debug"
67
const config: NavigraphApp = {
78
clientId: import.meta.env.NG_CLIENT_ID,
89
clientSecret: import.meta.env.NG_CLIENT_SECRET,
9-
scopes: [Scope.CHARTS, Scope.FMSDATA],
10+
scopes: [Scope.TILES, Scope.AMDB],
1011
}
1112

1213
if (!config.clientId || config.clientId.includes("<")) {
@@ -16,3 +17,4 @@ if (!config.clientId || config.clientId.includes("<")) {
1617
initializeApp(config)
1718

1819
export const auth = getAuth()
20+
export const amdb = getAmdbAPI()

‎examples/map/src/style.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,27 @@ body {
4747
right: 10px;
4848
top: 10px;
4949
}
50+
51+
.amdb-layers {
52+
left: 780px;
53+
top: 10px;
54+
55+
display: flex;
56+
57+
gap: 5px;
58+
59+
overflow-x: scroll;
60+
61+
max-width: 900px;
62+
63+
white-space: nowrap;
64+
}
65+
66+
#icao-input {
67+
width: 3em;
68+
}
69+
70+
.amdb-icao {
71+
left: 700px;
72+
top: 10px;
73+
}

‎package.json

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
{
22
"name": "sdk",
33
"private": true,
4-
"workspaces": [
5-
"packages/*",
6-
"examples/*"
7-
],
4+
"workspaces": {
5+
"packages": [
6+
"packages/*",
7+
"examples/*"
8+
],
9+
"nohoist": [
10+
"**/@types/geojson"
11+
]
12+
},
813
"scripts": {
914
"build": "turbo run build --filter=./packages/*",
1015
"dev": "turbo run dev --filter=./packages/* --no-cache --continue --parallel",

‎packages/amdb/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# @navigraph/amdb
2+
3+
This package is part of the Navigraph SDK, and is intended to be used in conjuction with other SDK modules.
4+
See the [navigraph](https://www.npmjs.com/package/navigraph) package for usage.
5+
6+
> [!WARNING]
7+
> ### When non-string (except for date/time) values in AMDB feature properties have no value, it is represented with one of the four following default values:
8+
> | Data Type | Null | Unknown | Not Applicable | Not Entered |
9+
> | --------- | ---------- | ---------- | -------------- | ----------- |
10+
> | Integer | -32768 | -32767 | -32765 | -32764 |
11+
> | Float | -32768.00 | -32767.00 | -32765.00 | -32764.00 |
12+
> | Date | 0000-00-00 | 0001-00-00 | 0002-00-00 | 0003-00-00 |
13+
> | Time | 25:00:00 | 26:00:00 | 27:00:00 | 28:00:00 |
14+
>
15+
> Note that the Date default values do not match the ER-009 spec, but matches the Jeppesen spec
16+
>
17+
> No-value strings will be all represented as a JSON `null` field, not `undefined` or `"$Null"`
18+

‎packages/amdb/clean-package.config.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"replace": {
3+
"main": "dist/index.cjs.js",
4+
"module": "dist/index.esm.js",
5+
"types": "dist/index.d.ts",
6+
"exports": {
7+
".": {
8+
"import": "./dist/index.esm.js",
9+
"require": "./dist/index.cjs.js"
10+
},
11+
"./package.json": "./package.json"
12+
}
13+
}
14+
}

0 commit comments

Comments
 (0)