add basic web UI

.dockerignore

@@ -24,3 +24,6 @@ config.yml
 tests/output/
 tmp/
 .aws-sam/
+
+**/node_modules/
+**/dist/

Cargo.toml

@@ -29,6 +29,7 @@ actix-cors = "0.7"
 actix-http = "3"
 actix-rt = "2"
 actix-web = "4"
+actix-web-static-files = "4"
 anyhow = "1.0"
 approx = "0.5.1"
 async-trait = "0.1"
@@ -80,6 +81,7 @@ spreet = { version = "0.11", default-features = false }
 sqlite-compressions = { version = "0.2.12", default-features = false, features = ["bsdiffraw", "gzip"] }
 sqlite-hashes = { version = "0.7.3", default-features = false, features = ["md5", "aggregate", "hex"] }
 sqlx = { version = "0.7", features = ["sqlite", "runtime-tokio"] }
+static-files = "0.2"
 subst = { version = "0.3", features = ["yaml"] }
 thiserror = "1"
 tile-grid = "0.6"

README.md

@@ -13,29 +13,29 @@ from large `PostgreSQL` databases, and serve tiles from `PMTiles` and `MBTiles`
 
 ## Features
 
-* Serve [vector tiles](https://github.com/mapbox/vector-tile-spec) from
-  * [PostGIS](https://github.com/postgis/postgis) databases, automatically discovering compatible tables and functions
-  * [PMTile](https://protomaps.com/blog/pmtiles-v3-whats-new), both local files and over HTTP
-  * [MBTile](https://github.com/mapbox/mbtiles-spec) files
-* [Combine](https://maplibre.org/martin/sources-composite.html) multiple tile sources into one
-* Generate [sprites](https://maplibre.org/martin/sources-sprites.html) and [font glyphs](https://maplibre.org/martin/sources-fonts.html)
-* Generate tiles in bulk from any Martin-supported sources into an `MBTiles` file with [martin-cp](https://maplibre.org/martin/martin-cp.html) tool
-* Examine, copy, validate, compare, and apply diffs between `MBTiles` files with [mbtiles](https://maplibre.org/martin/tools.html#mbtiles) tool
+- Serve [vector tiles](https://github.com/mapbox/vector-tile-spec) from
+  - [PostGIS](https://github.com/postgis/postgis) databases, automatically discovering compatible tables and functions
+  - [PMTile](https://protomaps.com/blog/pmtiles-v3-whats-new), both local files and over HTTP
+  - [MBTile](https://github.com/mapbox/mbtiles-spec) files
+- [Combine](https://maplibre.org/martin/sources-composite.html) multiple tile sources into one
+- Generate [sprites](https://maplibre.org/martin/sources-sprites.html) and [font glyphs](https://maplibre.org/martin/sources-fonts.html)
+- Generate tiles in bulk from any Martin-supported sources into an `MBTiles` file with [martin-cp](https://maplibre.org/martin/martin-cp.html) tool
+- Examine, copy, validate, compare, and apply diffs between `MBTiles` files with [mbtiles](https://maplibre.org/martin/tools.html#mbtiles) tool
 
 ## Documentation
 
-* [Quick Start](https://maplibre.org/martin/quick-start.html)
-* [Installation](https://maplibre.org/martin/installation.html)
-* Running with [CLI](https://maplibre.org/martin/run-with-cli.html)
+- [Quick Start](https://maplibre.org/martin/quick-start.html)
+- [Installation](https://maplibre.org/martin/installation.html)
+- Running with [CLI](https://maplibre.org/martin/run-with-cli.html)
   or [configuration file](https://maplibre.org/martin/config-file.html)
-* [Usage and API](https://maplibre.org/martin/using.html)
+- [Usage and API](https://maplibre.org/martin/using.html)
 
 ## License
 
 Licensed under either of
 
-* Apache License, Version 2.0 ([LICENSE-APACHE](LICENSE-APACHE) or <http://www.apache.org/licenses/LICENSE-2.0>)
-* MIT license ([LICENSE-MIT](LICENSE-MIT) or <http://opensource.org/licenses/MIT>)
+- Apache License, Version 2.0 ([LICENSE-APACHE](LICENSE-APACHE) or <http://www.apache.org/licenses/LICENSE-2.0>)
+- MIT license ([LICENSE-MIT](LICENSE-MIT) or <http://opensource.org/licenses/MIT>)
   at your option.
 
 ### Contribution

docs/src/using.md

@@ -4,7 +4,7 @@ Martin data is available via the HTTP `GET` endpoints:
 
 | URL                                     | Description                                    |
 |-----------------------------------------|------------------------------------------------|
-| `/`                                     | Status text, that will eventually show web UI  |
+| `/`                                     | Web UI                                         |
 | `/catalog`                              | [List of all sources](#catalog)                |
 | `/{sourceID}`                           | [Source TileJSON](#source-tilejson)            |
 | `/{sourceID}/{z}/{x}/{y}`               | Map Tiles                                      |

martin-ui/.eslintrc.cjs

@@ -0,0 +1,18 @@
+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',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

martin-ui/.gitignore

@@ -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?

martin-ui/README.md

@@ -0,0 +1,12 @@
+# Martin Web UI
+
+A web interface for previewing tiles served by Martin.
+
+### Run locally
+
+To run just the web interface
+
+```bash
+npm i
+npm run dev
+```

martin-ui/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <meta property="og:url" content="https://maplibre.org" />
+    <meta property="og:title" content="Martin — vector tiles server" />
+    <meta property="og:description" content="Vector Tiles from Large Databases on the Fly" />
+    <meta property="og:image" content="%PUBLIC_URL%/martin.png" />
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/favicons/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `yarn run build`.
+    -->
+    <title>Martin — vector tiles server</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>