Navigraph · SkySails · Dec 14, 2023 · Dec 13, 2023 · Dec 13, 2023 · Dec 13, 2023
@@ -0,0 +1,5 @@
+---
+"@navigraph/leaflet": major
+---
+
+Added support for FAA Sectionals (VFR & IFR)
@@ -0,0 +1,2 @@
+NG_CLIENT_ID=<YOUR_NAVIGRAPH_CLIENT_ID>
+NG_CLIENT_SECRET=<YOUR_NAVIGRAPH_CLIENT_SECRET>
@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+}
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,36 @@
+# Example Navigraph Map
+
+This is a very simple & barebones HTML + CSS + TS project that shows the basic use of the Navigraph SDK Leaflet module.
+
+## Installation
+
+Clone this repository to your local machine:
+
+```bash
+git clone https://github.com/Navigraph/navigraph-js-sdk.git
+
+cd navigraph-js-sdk/examples/map
+```
+
+Install project dependencies using Yarn:
+
+```bash
+yarn
+```
+
+Create an `.env.local` file in the root of your project and add the following environment variables:
+
+```env
+NG_CLIENT_ID=your_client_id
+NG_CLIENT_SECRET=your_client_secret
+```
+
+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.
+
+## Running the Project
+
+To start the development server, run the following command:
+
+```bash
+yarn dev
+```
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Navigraph Leaflet</title>
+  </head>
+  <body>
+    <div class="auth container">
+      <button id="signin">Sign in</button>
+    </div>
+    <div class="sources container">
+      <button>VFR</button>
+      <button>IFR HIGH</button>
+      <button>IFR LOW</button>
+    </div>
+    <div class="faa-sources container">
+      <button>VFR</button>
+      <button>IFR HIGH</button>
+      <button>IFR LOW</button>
+    </div>
+    <div class="themes container">
+      <button>DAY</button>
+      <button>NIGHT</button>
+    </div>
+    <div id="map"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,21 @@
+{
+  "name": "map",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.8",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  },
+  "dependencies": {
+    "@navigraph/leaflet": "*",
+    "leaflet": "^1.9.4",
+    "navigraph": "*"
+  }
+}
@@ -0,0 +1,44 @@
+import { FAASource, NavigraphRasterSource, NavigraphTheme, NavigraphTileLayer } from "@navigraph/leaflet"
+import { Map } from "leaflet"
+import { auth } from "./navigraph"
+import "leaflet/dist/leaflet.css"
+import "./style.css"
+
+// Instantiate a Leaflet map and set view to Sweden
+const map = new Map("map").setView([59.334591, 18.06324], 5)
+
+const ngLayer = new NavigraphTileLayer(auth).addTo(map)
+
+document.querySelectorAll<HTMLButtonElement>(".sources > button").forEach(el => {
+  el.addEventListener("click", () => {
+    const source = el.innerText as NavigraphRasterSource
+    ngLayer.setPreset({ ...ngLayer.preset, type: "Navigraph", source })
+  })
+})
+
+document.querySelectorAll<HTMLButtonElement>(".faa-sources > button").forEach(el => {
+  el.addEventListener("click", () => {
+    const source = el.innerText as FAASource
+    ngLayer.setPreset({ ...ngLayer.preset, type: "FAA", source })
+  })
+})
+
+document.querySelectorAll<HTMLButtonElement>(".themes > button").forEach(el => {
+  el.addEventListener("click", () => {
+    const theme = el.innerText as NavigraphTheme
+    ngLayer.setPreset({ ...ngLayer.preset, theme })
+  })
+})
+
+// Auth UI
+
+const signinBtn = document.querySelector<HTMLDivElement>("#signin")!
+
+signinBtn.addEventListener("click", () =>
+  auth.signInWithDeviceFlow(params => window.open(params.verification_uri_complete, "_blank")).catch(console.error),
+)
+
+auth.onAuthStateChanged(user => {
+  console.log("User changed", user)
+  signinBtn.innerHTML = user ? `Signed in as ${user.preferred_username}` : "Sign in"
+})
@@ -0,0 +1,18 @@
+import { initializeApp, Logger, NavigraphApp, Scope } from "navigraph/app"
+import { getAuth } from "navigraph/auth"
+
+Logger.level = "debug"
+
+const config: NavigraphApp = {
+  clientId: import.meta.env.NG_CLIENT_ID,
+  clientSecret: import.meta.env.NG_CLIENT_SECRET,
+  scopes: [Scope.CHARTS, Scope.FMSDATA],
+}
+
+if (!config.clientId || config.clientId.includes("<")) {
+  alert("Please add your client credentials in lib/navigraph.ts.")
+}
+
+initializeApp(config)
+
+export const auth = getAuth()
@@ -0,0 +1,49 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
+}
+
+body {
+  font-family: sans-serif;
+}
+
+#map {
+  width: 100%;
+  height: 100vh;
+}
+
+.container {
+  position: absolute;
+  background: rgb(255, 255, 255);
+  border-radius: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 8px;
+  z-index: 999;
+}
+
+.container button {
+  padding: 5px;
+}
+
+.sources {
+  left: 100px;
+  top: 10px;
+}
+
+.faa-sources {
+  background: black;
+  left: 320px;
+  top: 10px;
+}
+
+.themes {
+  left: 570px;
+  top: 10px;
+}
+
+.auth {
+  right: 10px;
+  top: 10px;
+}
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly NG_CLIENT_ID: string
+  readonly NG_CLIENT_SECRET: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,3 @@
+import { defineConfig } from "vite"
+
+export default defineConfig({ envPrefix: "NG_" })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NG_CLIENT_ID=<YOUR_NAVIGRAPH_CLIENT_ID>
		NG_CLIENT_SECRET=<YOUR_NAVIGRAPH_CLIENT_SECRET>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { defineConfig } from "vite"

		export default defineConfig({ envPrefix: "NG_" })