Skip to content

Commit 4db70c0

Browse files
professoralex13professoralex13
committed
feat: amdb example
1 parent 625996e commit 4db70c0

File tree

6 files changed

+144
-31
lines changed

6 files changed

+144
-31
lines changed

‎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: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,36 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Navigraph Leaflet</title>
7-
</head>
8-
<body>
9-
<div class="auth container">
10-
<button id="signin">Sign in</button>
11-
</div>
12-
<div class="sources container">
13-
<button>VFR</button>
14-
<button>IFR HIGH</button>
15-
<button>IFR LOW</button>
16-
</div>
17-
<div class="faa-sources container">
18-
<button>VFR</button>
19-
<button>IFR HIGH</button>
20-
<button>IFR LOW</button>
21-
</div>
22-
<div class="themes container">
23-
<button>DAY</button>
24-
<button>NIGHT</button>
25-
</div>
26-
<div id="map"></div>
27-
<script type="module" src="/src/main.ts"></script>
28-
</body>
29-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Navigraph Leaflet</title>
8+
</head>
9+
10+
<body>
11+
<div class="auth container">
12+
<button id="signin">Sign in</button>
13+
</div>
14+
<div class="sources container">
15+
<button>VFR</button>
16+
<button>IFR HIGH</button>
17+
<button>IFR LOW</button>
18+
</div>
19+
<div class="faa-sources container">
20+
<button>VFR</button>
21+
<button>IFR HIGH</button>
22+
<button>IFR LOW</button>
23+
</div>
24+
<div class="themes container">
25+
<button>DAY</button>
26+
<button>NIGHT</button>
27+
</div>
28+
<div class="amdb-layers container" style="visibility: hidden;"></div>
29+
<div class="amdb-icao container">
30+
<input type="text" id="icao-input" maxlength="4" required placeholder="EGLL" />
31+
</div>
32+
<div id="map"></div>
33+
<script type="module" src="/src/main.ts"></script>
34+
</body>
35+
36+
</html>

‎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: 81 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, Map, GeoJSON } 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,82 @@ 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), { onEachFeature: (feature, layer) => {
57+
layer.on('click', (e) => {
58+
currentAmdbLayer?.resetStyle();
59+
60+
e.target.setStyle({ color: 'red' })
61+
});
62+
layer.bindPopup(`<p>${JSON.stringify(feature.properties, null, 4)}</p>`)
63+
} }).addTo(map);
64+
}
65+
66+
const amdbContainer = document.querySelector<HTMLDivElement>(".amdb-layers")!;
67+
68+
allLayers.forEach((layer) => {
69+
const button = document.createElement('button')
70+
71+
button.innerHTML = layer
72+
73+
button.id = layer;
74+
button.className = 'amdb-layer'
75+
76+
button.addEventListener('click', () => {
77+
if(visibleAmdbLayers.includes(layer)) {
78+
visibleAmdbLayers.splice(visibleAmdbLayers.indexOf(layer), 1);
79+
} else {
80+
visibleAmdbLayers.push(layer)
81+
}
82+
83+
updateAmdb();
84+
});
85+
86+
amdbContainer.appendChild(button)
87+
})
88+
89+
const icaoInput = document.querySelector<HTMLInputElement>('#icao-input')
90+
91+
icaoInput?.addEventListener('change', async () => {
92+
const value = icaoInput.value;
93+
94+
if(value.length === 4 && /^[A-Z]{4}$/.test(value)) {
95+
airport = (await amdb.searchAmdb(value))?.[0] ?? null
96+
97+
if(airport) {
98+
icaoInput.style.backgroundColor = 'green'
99+
amdbContainer.style.visibility = 'visible'
100+
} else {
101+
icaoInput.style.backgroundColor = 'red'
102+
amdbContainer.style.visibility = 'hidden'
103+
}
104+
105+
updateAmdb();
106+
} else {
107+
icaoInput.style.backgroundColor = ''
108+
}
109+
})
110+
33111
// Auth UI
34112

35113
const signinBtn = document.querySelector<HTMLDivElement>("#signin")!
@@ -42,3 +120,4 @@ auth.onAuthStateChanged(user => {
42120
console.log("User changed", user)
43121
signinBtn.innerHTML = user ? `Signed in as ${user.preferred_username}` : "Sign in"
44122
})
123+

‎examples/map/src/navigraph.ts

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

45
Logger.level = "debug"
56

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+
}

0 commit comments

Comments
 (0)