Skip to content

Commit 808b693

Browse files
SkySailsSkySails
committed
style: format example files
1 parent 35c144a commit 808b693

File tree

4 files changed

+75
-76
lines changed

4 files changed

+75
-76
lines changed

‎examples/map/index.html

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
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>
38

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>
9+
<body>
10+
<div class="auth container">
11+
<button id="signin">Sign in</button>
12+
</div>
13+
<div class="sources container">
14+
<button>VFR</button>
15+
<button>IFR HIGH</button>
16+
<button>IFR LOW</button>
17+
</div>
18+
<div class="faa-sources container">
19+
<button>VFR</button>
20+
<button>IFR HIGH</button>
21+
<button>IFR LOW</button>
22+
</div>
23+
<div class="themes container">
24+
<button>DAY</button>
25+
<button>NIGHT</button>
26+
</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>
31+
<div id="map"></div>
32+
<script type="module" src="/src/main.ts"></script>
33+
</body>
34+
</html>

‎examples/map/src/main.ts

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FAASource, NavigraphRasterSource, NavigraphTheme, NavigraphTileLayer } from "@navigraph/leaflet"
2-
import { geoJSON, Map, GeoJSON } from "leaflet"
2+
import { geoJSON, GeoJSON, Map } from "leaflet"
33
import { amdb, auth } from "./navigraph"
44
import "leaflet/dist/leaflet.css"
55
import "./style.css"
@@ -32,79 +32,81 @@ document.querySelectorAll<HTMLButtonElement>(".themes > button").forEach(el => {
3232
})
3333
})
3434

35-
let airport: AmdbSearchResult | null = null;
35+
let airport: AmdbSearchResult | null = null
3636

37-
const visibleAmdbLayers: AmdbLayerName[] = [];
37+
const visibleAmdbLayers: AmdbLayerName[] = []
3838

39-
let currentAmdbLayer: GeoJSON | null = null;
39+
let currentAmdbLayer: GeoJSON | null = null
4040

4141
async function updateAmdb() {
42-
(document.querySelectorAll('.amdb-layer') as NodeListOf<HTMLButtonElement>).forEach((element) => {
43-
element.style.backgroundColor = visibleAmdbLayers.includes(element.id as AmdbLayerName) ? 'green' : ''
42+
;(document.querySelectorAll(".amdb-layer") as NodeListOf<HTMLButtonElement>).forEach(element => {
43+
element.style.backgroundColor = visibleAmdbLayers.includes(element.id as AmdbLayerName) ? "green" : ""
4444
})
4545

46-
if(currentAmdbLayer && map.hasLayer(currentAmdbLayer)) {
46+
if (currentAmdbLayer && map.hasLayer(currentAmdbLayer)) {
4747
map.removeLayer(currentAmdbLayer)
4848
}
4949

50-
if(!airport) return;
50+
if (!airport) return
5151

52-
const data = await getAmdbLayers({ icao: airport?.idarpt, include: visibleAmdbLayers });
52+
const data = await getAmdbLayers({ icao: airport?.idarpt, include: visibleAmdbLayers })
5353

54-
if(!data) return;
54+
if (!data) return
5555

56-
currentAmdbLayer = geoJSON(Object.values(data), { onEachFeature: (feature, layer) => {
57-
layer.on('click', (e) => {
58-
currentAmdbLayer?.resetStyle();
56+
currentAmdbLayer = geoJSON(Object.values(data), {
57+
onEachFeature: (feature, layer) => {
58+
layer.on("click", e => {
59+
currentAmdbLayer?.resetStyle()
5960

60-
e.target.setStyle({ color: 'red' })
61-
});
62-
layer.bindPopup(`<p>${JSON.stringify(feature.properties, null, 4)}</p>`)
63-
} }).addTo(map);
61+
e.target.setStyle({ color: "red" })
62+
})
63+
layer.bindPopup(`<p>${JSON.stringify(feature.properties, null, 4)}</p>`)
64+
},
65+
}).addTo(map)
6466
}
6567

66-
const amdbContainer = document.querySelector<HTMLDivElement>(".amdb-layers")!;
68+
const amdbContainer = document.querySelector<HTMLDivElement>(".amdb-layers")!
6769

68-
allLayers.forEach((layer) => {
69-
const button = document.createElement('button')
70+
allLayers.forEach(layer => {
71+
const button = document.createElement("button")
7072

7173
button.innerHTML = layer
7274

73-
button.id = layer;
74-
button.className = 'amdb-layer'
75+
button.id = layer
76+
button.className = "amdb-layer"
7577

76-
button.addEventListener('click', () => {
77-
if(visibleAmdbLayers.includes(layer)) {
78-
visibleAmdbLayers.splice(visibleAmdbLayers.indexOf(layer), 1);
78+
button.addEventListener("click", () => {
79+
if (visibleAmdbLayers.includes(layer)) {
80+
visibleAmdbLayers.splice(visibleAmdbLayers.indexOf(layer), 1)
7981
} else {
8082
visibleAmdbLayers.push(layer)
8183
}
8284

83-
updateAmdb();
84-
});
85+
updateAmdb()
86+
})
8587

8688
amdbContainer.appendChild(button)
8789
})
8890

89-
const icaoInput = document.querySelector<HTMLInputElement>('#icao-input')
91+
const icaoInput = document.querySelector<HTMLInputElement>("#icao-input")
9092

91-
icaoInput?.addEventListener('change', async () => {
92-
const value = icaoInput.value;
93+
icaoInput?.addEventListener("change", async () => {
94+
const value = icaoInput.value
9395

94-
if(value.length === 4 && /^[A-Z]{4}$/.test(value)) {
96+
if (value.length === 4 && /^[A-Z]{4}$/.test(value)) {
9597
airport = (await amdb.searchAmdb(value))?.[0] ?? null
9698

97-
if(airport) {
98-
icaoInput.style.backgroundColor = 'green'
99-
amdbContainer.style.visibility = 'visible'
99+
if (airport) {
100+
icaoInput.style.backgroundColor = "green"
101+
amdbContainer.style.visibility = "visible"
100102
} else {
101-
icaoInput.style.backgroundColor = 'red'
102-
amdbContainer.style.visibility = 'hidden'
103+
icaoInput.style.backgroundColor = "red"
104+
amdbContainer.style.visibility = "hidden"
103105
}
104106

105-
updateAmdb();
107+
updateAmdb()
106108
} else {
107-
icaoInput.style.backgroundColor = ''
109+
icaoInput.style.backgroundColor = ""
108110
}
109111
})
110112

@@ -120,4 +122,3 @@ auth.onAuthStateChanged(user => {
120122
console.log("User changed", user)
121123
signinBtn.innerHTML = user ? `Signed in as ${user.preferred_username}` : "Sign in"
122124
})
123-

‎examples/map/src/navigraph.ts

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

55
Logger.level = "debug"
66

@@ -17,4 +17,4 @@ if (!config.clientId || config.clientId.includes("<")) {
1717
initializeApp(config)
1818

1919
export const auth = getAuth()
20-
export const amdb = getAmdbAPI();
20+
export const amdb = getAmdbAPI()

‎examples/map/src/style.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ body {
6464
}
6565

6666
#icao-input {
67-
width: 3em
67+
width: 3em;
6868
}
6969

7070
.amdb-icao {
7171
left: 700px;
7272
top: 10px;
73-
}
73+
}

0 commit comments

Comments
 (0)