Easily Generate URLs for Static Map API

[roblabs]

I want to make the Static Images API easier to use for non-developers on my team. Basic idea is to generate the URL for a sample Static Image based on moveend or center. I've built a prototype based off of TileServer 4.4.4.

Thoughts on usability of the current Static Image API and how it can be upgraded?

---

Problems this solves

1. No need to reorder the z, lat, lon values. Hand-editing the Static Image URL can be a little confusing. Some UI component (either in the HTML or the console) can automatically generate the URL. The location.hash is #z/lat/lon, but the Static Image URL expects /lon,lat,z/.
2. Many static images can be retrieved as a way to inspect the map. For example, static images for many zoom levels in Zurich can be generated to test a vector style.

Issues that arise for usability, or before a real PR:

• On the index page, index.tmpl, a sample Static Image URL can be generated based on the Style center. Or overridden via the tilejson key in the configuration.
  • Should this be done for every case, or only if TileServer is started in Verbose mode?
• In the Viewer, viewer.tmpl, where does the generated URL go? Console or new UI button that copies a basic Static Image URL?
• other unforeseen issues?

Console example

static image via moveend event: http://localhost:8080/styles/basic-preview/static/8.5714,47.3661,11/512x512@2x.png

---

Index.html

📸 example static image API via TileJSON center: basic-preview/static/8.543,47.367979,15.97/512x512@2x.png

---

🎥 Prototype Demo

TileServer-GL-Static-Image-Enhancements-480a.mov

[vinayakkulkarni]

AFAIK, the static map api is to be made in-sync with Maptiler Cloud - https://docs.maptiler.com/cloud/api/static-maps/

also, in the video, on moveend, the link to static map is in console, how is that easier to use for non-developers?

[acalcutt]

I'd love to see something like @mnutt static endpoint page, like in #427 (comment)

Maybe make it a page you can drag around to fill in some of the values

[mnutt]

The backend in my fork has diverged a bit, but I think it would be easy enough to port the static endpoint editor to use tileserver-gl's URL features. It's all vanilla js / dom manipulation following the existing conventions but is starting to get to the point where if we wanted to add more features we may want to look into some sort of frontend toolkit.

[acalcutt]

For the movend idea I feel like echoing out that information all the time doesn't seem that great. Maybe something like a button would be nice.

Like a button to copy the url, or a plugin like https://github.com/watergis/maplibre-gl-export

[vinayakkulkarni]

Yep, similar to the inspect button, shouldn't take more than 2 hours of work for this

[roblabs]

Below a prototype of the interface. Thanks for the feedback on console logging, it generates Static Image API URLs, but it was not intended to be the final shipping product; (It's the first time I've referred to logging as FC : )

---

The Svelte prototype is made after reviewing how WaterGIS makes UI components for MapLibre.

The interface changes would need all the features the Static Images documentation advertises is available:

• Pitch, bearing
• Resolution @2x, @3x, @4x
• Area or auto based static image bounds
• Markers & paths including features from feat: enable Google Polyline in Static Images endpoint 🕺 #648

But more importantly,

1. This prototype is built on Svelte, will that be the right choice for the given TileServer repo?
2. Should be its own repo, with notes that is a plugin for TileServer GL only?
3. Svelte was chosen because of the MapLibre plugin architecture & Svelte components work done by JinIgarashi & @watergis

---

Customer interface proposal for Static Images (non-functioning, HTML only)

[roblabs]

I hadn't considered that presenting as a Raster via MapLibre, but it is interesting. I think we would want to view as a Vector, that way when we paint annotations such as poly lines or markers, we can see what it will look like before rendering.

I was thinking it would be a button in the Vector "Viewer" page Similar to a Full Screen or Export control. That way it is not in the way, until needed (See upper right corner of GIF in most recent comment above.

---

@acalcutt "This would be a separate page from the normal view page right? I feel like in this page, instead of the vector tiles, you would want to be loading the maplibre-native generated raster in the background."

[roblabs]

"I can take a shot of this in Vue ;)"

That would be amazing, and a decent choice! Thanks!

[vinayakkulkarni]

Finished most stuff, need to figure out how to escape routes in Nuxt for some [data].vue & [style].vue files

You can track progress / update on the fork – https://github.com/vinayakkulkarni/tileserver-gl/tree/refactor/vite-vue-frontend

$ cd public/frontend
$ npm install
$ npm run build && npm run generate
$ cd ../../

$ node src/main.js -c data/config.json

The rendered page at http://localhost:8080 would be the static site generated by Nuxt 3.x

[acalcutt]

looks interesting @vinayakkulkarni . I tried to test it but I keep getting stuck at the frontent npm install

 ERROR  fetch failed                                                                                                                                                               12:38:11

  at Object.fetch (node:internal/deps/undici/undici:11457:11)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async useNitroConfig (config/nitro.ts:6:21)
  at async nitro:config (config/index.ts:43:700)
  at async initNitro (node_modules/nuxt/dist/index.mjs:2077:3)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:2504:3)
  at async loadNuxt (node_modules/nuxt/dist/index.mjs:2531:5)
  at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:540:19)
  at async Object.invoke (node_modules/nuxi/dist/chunks/prepare.mjs:37:18)
  at async _main (node_modules/nuxi/dist/cli.mjs:49:20)

npm ERR! code 1
npm ERR! path /opt/test9/vue/public/frontend

[vinayakkulkarni]

pull latest & try again @acalcutt, I've fixed issue with the useNitroConfig hook, should work now.

[roblabs]

@vinayakkulkarni — thank you for looking into this.

I was able to get the build & generate to work, but I was not able to serve the demo Zurich MBTiles:

The error seems unrelated to work. Any ideas?

Cannot GET /styles/basic-preview/

Server log

Starting server
Listening at http://[::]:8080/
Startup complete
GET /data.json 200 3.268 ms - 1958
GET /styles.json 200 0.665 ms - 121
GET / 200 2.785 ms - 1511
GET /_nuxt/entry.f31f2c4b.css 200 2.356 ms - 100662
GET /_nuxt/entry.5095f24e.js 200 1.378 ms - 138822
GET /_nuxt/index.3228e94b.js 200 0.719 ms - 4568
GET /apple-touch-icon.png 404 2.535 ms - 159
GET /favicon-32x32.png 404 2.861 ms - 156
GET /_nuxt/fetch.c3e06b80.js 200 0.806 ms - 11479
GET /_nuxt/error-component.a1d032b4.js 200 0.794 ms - 1118
GET /data.json 200 0.628 ms - 1958
GET /styles.json 200 0.447 ms - 121
GET /images/logo.png 200 0.776 ms - 6407
GET /images/placeholder.png 200 5.314 ms - 2084
GET /images/header.png 200 5.438 ms - 174969
GET /_nuxt/Inter-Light.87ed65f8.woff2?v=3.12 200 3.419 ms - 105640
GET /_nuxt/Inter-Bold.2efd8e3c.woff2?v=3.12 200 2.676 ms - 107400
GET /_nuxt/Inter-Regular.c342b1b7.woff2?v=3.12 200 2.349 ms - 100124
GET /_nuxt/Inter-Medium.a4e1e7e6.woff2?v=3.12 200 45.578 ms - 106720
GET /styles/basic-preview/0/0/0.png 200 140.609 ms - 31292
GET /data/openmaptiles/ 404 1.073 ms - 157
GET / 200 0.628 ms - 1511
GET /_nuxt/entry.f31f2c4b.css 200 0.855 ms - 100662
GET /_nuxt/entry.5095f24e.js 200 0.829 ms - 138822
GET /_nuxt/index.3228e94b.js 200 0.598 ms - 4568
GET /apple-touch-icon.png 404 0.648 ms - 159
GET /favicon-32x32.png 404 0.746 ms - 156
GET /_nuxt/fetch.c3e06b80.js 200 0.856 ms - 11479
GET /_nuxt/error-component.a1d032b4.js 200 0.605 ms - 1118
GET /data.json 200 0.506 ms - 1958
GET /styles.json 200 0.316 ms - 121
GET /images/logo.png 200 0.529 ms - 6407
GET /images/placeholder.png 200 1.516 ms - 2084
GET /images/header.png 200 0.862 ms - 174969
GET /_nuxt/Inter-Light.87ed65f8.woff2?v=3.12 200 1.392 ms - 105640
GET /_nuxt/Inter-Bold.2efd8e3c.woff2?v=3.12 200 1.369 ms - 107400
GET /_nuxt/Inter-Regular.c342b1b7.woff2?v=3.12 200 1.336 ms - 100124
GET /_nuxt/Inter-Medium.a4e1e7e6.woff2?v=3.12 200 1.279 ms - 106720
GET /styles/basic-preview/0/0/0.png 200 59.744 ms - 31292
GET /_nuxt/style.json.46e43cec.js 200 0.512 ms - 423
GET /_nuxt/useMapStyle.09421d89.js 200 0.452 ms - 816
GET /styles/basic-preview/style.json 200 3.165 ms - 14704

---

Result of running: node src/main.js --verbose

objc[60841]: Class GNotificationCenterDelegate is implemented in both /Users/roblabs/Documents/github/maptiler/tileserver-gl/maptiler/tileserver-gl/node_modules/sharp/vendor/8.14.2/darwin-x64/lib/libvips-cpp.42.dylib (0x3a341dc60) and /Users/roblabs/Documents/github/maptiler/tileserver-gl/maptiler/tileserver-gl/node_modules/canvas/build/Release/libgio-2.0.0.dylib (0x3a1a5a6b0). One of the two will be used. Which one is undefined.
Starting tileserver-gl v4.4.10
No MBTiles found
[DEMO] Downloading sample data (zurich_switzerland.mbtiles) from https://github.com/maptiler/tileserver-gl/releases/download/v1.3.0/zurich_switzerland.mbtiles
[INFO] Automatically creating config file for zurich_switzerland.mbtiles
[INFO] Only a basic preview style will be used.
[INFO] See documentation to learn how to create config.json file.
{
  "options": {
    "paths": {
      "root": "/Users/roblabs/Documents/github/maptiler/tileserver-gl/maptiler/tileserver-gl/node_modules/tileserver-gl-styles",
      "fonts": "fonts",
      "styles": "styles",
      "mbtiles": "/Users/roblabs/Documents/github/maptiler/tileserver-gl/maptiler/tileserver-gl"
    }
  },
  "styles": {
    "basic-preview": {
      "style": "basic-preview/style.json",
      "tilejson": {
        "bounds": [
          8.275,
          47.225,
          8.8,
          47.533
        ]
      }
    }
  },
  "data": {
    "v3": {
      "mbtiles": "zurich_switzerland.mbtiles"
    }
  }
}
Starting server
Listening at http://[::]:8080/
Startup complete
GET / 304 2.140 ms - -
GET /_nuxt/entry.f31f2c4b.css 304 1.075 ms - -
GET /_nuxt/entry.5095f24e.js 304 0.383 ms - -
GET /_nuxt/index.3228e94b.js 304 0.414 ms - -
GET /_nuxt/fetch.c3e06b80.js 304 0.437 ms - -
GET /data.json 304 2.353 ms - -
GET /_nuxt/error-component.a1d032b4.js 304 0.555 ms - -
GET /styles.json 304 0.539 ms - -
GET /images/logo.png 304 0.467 ms - -
GET /images/placeholder.png 304 1.487 ms - -
GET /images/header.png 304 0.427 ms - -
GET /styles/basic-preview/0/0/0.png 200 154.283 ms - 31292
GET /styles/basic-preview/ 404 2.473 ms - 160
GET /styles.json 304 0.314 ms - -
GET /_nuxt/error-component.a1d032b4.js 304 1.335 ms - -
GET /data/openmaptiles/ 404 0.867 ms - 157
GET /styles.json 304 0.332 ms - -
GET /_nuxt/error-component.a1d032b4.js 304 0.479 ms - -