Skip to content

Commit 4852ed5

Browse files
SkySailsSkySails
authored
Merge pull request #85 from Navigraph/feat/faa-tiles
Add support for FAA tiles in the Leaflet module
2 parents e03eef0 + ddee243 commit 4852ed5

File tree

15 files changed

+623
-20
lines changed

15 files changed

+623
-20
lines changed

‎.changeset/young-dragons-hide.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@navigraph/leaflet": major
3+
---
4+
5+
Added support for FAA Sectionals (VFR & IFR)

‎examples/map/.env.example

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
NG_CLIENT_ID=<YOUR_NAVIGRAPH_CLIENT_ID>
2+
NG_CLIENT_SECRET=<YOUR_NAVIGRAPH_CLIENT_SECRET>

‎examples/map/.eslintrc.cjs

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
5+
ignorePatterns: ["dist", ".eslintrc.cjs"],
6+
parser: "@typescript-eslint/parser",
7+
}

‎examples/map/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/map/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Example Navigraph Map
2+
3+
This is a very simple & barebones HTML + CSS + TS project that shows the basic use of the Navigraph SDK Leaflet module.
4+
5+
## Installation
6+
7+
Clone this repository to your local machine:
8+
9+
```bash
10+
git clone https://github.com/Navigraph/navigraph-js-sdk.git
11+
12+
cd navigraph-js-sdk/examples/map
13+
```
14+
15+
Install project dependencies using Yarn:
16+
17+
```bash
18+
yarn
19+
```
20+
21+
Create an `.env.local` file in the root of your project and add the following environment variables:
22+
23+
```env
24+
NG_CLIENT_ID=your_client_id
25+
NG_CLIENT_SECRET=your_client_secret
26+
```
27+
28+
Make sure to replace `your_client_id` and `your_client_secret` with your real credentials. These variables are required for the project to function correctly.
29+
30+
## Running the Project
31+
32+
To start the development server, run the following command:
33+
34+
```bash
35+
yarn dev
36+
```

‎examples/map/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<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>

‎examples/map/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "map",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"@types/leaflet": "^1.9.8",
13+
"typescript": "^5.2.2",
14+
"vite": "^5.0.0"
15+
},
16+
"dependencies": {
17+
"@navigraph/leaflet": "*",
18+
"leaflet": "^1.9.4",
19+
"navigraph": "*"
20+
}
21+
}

‎examples/map/src/main.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { FAASource, NavigraphRasterSource, NavigraphTheme, NavigraphTileLayer } from "@navigraph/leaflet"
2+
import { Map } from "leaflet"
3+
import { auth } from "./navigraph"
4+
import "leaflet/dist/leaflet.css"
5+
import "./style.css"
6+
7+
// Instantiate a Leaflet map and set view to Sweden
8+
const map = new Map("map").setView([59.334591, 18.06324], 5)
9+
10+
const ngLayer = new NavigraphTileLayer(auth).addTo(map)
11+
12+
document.querySelectorAll<HTMLButtonElement>(".sources > button").forEach(el => {
13+
el.addEventListener("click", () => {
14+
const source = el.innerText as NavigraphRasterSource
15+
ngLayer.setPreset({ ...ngLayer.preset, type: "Navigraph", source })
16+
})
17+
})
18+
19+
document.querySelectorAll<HTMLButtonElement>(".faa-sources > button").forEach(el => {
20+
el.addEventListener("click", () => {
21+
const source = el.innerText as FAASource
22+
ngLayer.setPreset({ ...ngLayer.preset, type: "FAA", source })
23+
})
24+
})
25+
26+
document.querySelectorAll<HTMLButtonElement>(".themes > button").forEach(el => {
27+
el.addEventListener("click", () => {
28+
const theme = el.innerText as NavigraphTheme
29+
ngLayer.setPreset({ ...ngLayer.preset, theme })
30+
})
31+
})
32+
33+
// Auth UI
34+
35+
const signinBtn = document.querySelector<HTMLDivElement>("#signin")!
36+
37+
signinBtn.addEventListener("click", () =>
38+
auth.signInWithDeviceFlow(params => window.open(params.verification_uri_complete, "_blank")).catch(console.error),
39+
)
40+
41+
auth.onAuthStateChanged(user => {
42+
console.log("User changed", user)
43+
signinBtn.innerHTML = user ? `Signed in as ${user.preferred_username}` : "Sign in"
44+
})

‎examples/map/src/navigraph.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { initializeApp, Logger, NavigraphApp, Scope } from "navigraph/app"
2+
import { getAuth } from "navigraph/auth"
3+
4+
Logger.level = "debug"
5+
6+
const config: NavigraphApp = {
7+
clientId: import.meta.env.NG_CLIENT_ID,
8+
clientSecret: import.meta.env.NG_CLIENT_SECRET,
9+
scopes: [Scope.CHARTS, Scope.FMSDATA],
10+
}
11+
12+
if (!config.clientId || config.clientId.includes("<")) {
13+
alert("Please add your client credentials in lib/navigraph.ts.")
14+
}
15+
16+
initializeApp(config)
17+
18+
export const auth = getAuth()

‎examples/map/src/style.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: system-ui, sans-serif;
6+
}
7+
8+
body {
9+
font-family: sans-serif;
10+
}
11+
12+
#map {
13+
width: 100%;
14+
height: 100vh;
15+
}
16+
17+
.container {
18+
position: absolute;
19+
background: rgb(255, 255, 255);
20+
border-radius: 5px;
21+
border: 1px solid rgba(0, 0, 0, 0.1);
22+
padding: 8px;
23+
z-index: 999;
24+
}
25+
26+
.container button {
27+
padding: 5px;
28+
}
29+
30+
.sources {
31+
left: 100px;
32+
top: 10px;
33+
}
34+
35+
.faa-sources {
36+
background: black;
37+
left: 320px;
38+
top: 10px;
39+
}
40+
41+
.themes {
42+
left: 570px;
43+
top: 10px;
44+
}
45+
46+
.auth {
47+
right: 10px;
48+
top: 10px;
49+
}

0 commit comments

Comments
 (0)