Better contour support for imperial units

[HarelM]

Problem Statement

When changing the interface to use imperial units the contours are kept in meters.

Proposed Solution

Change contours to feet when changing UI units, similar to language change.

What alternatives have you considered or tried?

See below.

Additional information

There are a few aspects to this issue.
A possible hack, which is similar to alltrails I think is to only use a conversion formula and keep the contours in meters but present the feet value. I don't like this hack.
We can generate contours with feet and use them as alternative source. I don't like that as it will increase the download size for offline maps, server disk etc.

The most promising direction is to use maplibre-contours, which can decrease the offline download size - very appealing. The problem with this plugin is that it does not support custom protocol in the worker thread, so this won't work with our offline solution.

Brainstorming possible ideas to solve this:

1. Implement "addProtocol" for this plugin as well (probably the easiest solution)
2. Implement a similar maplibre plugin that uses addSourceType and inportScriptInWorkers. I think this will require to implement addProtocol inside the worker and allow this method to call the main thread to get tiles, so it's somewhat similar to 1, but avoids the need to define and implement all the actor and worker communication in the plugin.
3. Implement this in maplibre-gl-js. I've looked at the code @msbarry wrote here: Add contour source maplibre/maplibre-style-spec#623 and his branch here: https://github.com/msbarry/maplibre-gl-js/tree/contour-source and I think the main "problem" is that it's trying to use another dem source in order to save parsing time for those tiles. The same problem exists for terrain and hillshade tile sharing obviously, the problem with both is that they don't need the same tiles, terrain need lower level zoom tiles and contours needs higher level contour tiles. Having said that, I think the workers might be able to share the processed dem tile using some LRU cache. this might solve a lot of complexities. The dem worker source code is fairly simple, using a shared worker cache might simplify some tile loading and processing, maybe IDK.

I'll continue thinking about it. Any other ideas or inputs are very welcome.

[zstadler]

We can generate contours with feet and use them as alternative source. I don't like that as it will increase the download size for offline maps, server disk etc.

We can create a separate feet-based contour source and the client could download the appropriate contour file according to the user's preferences and avoid the download size issue.

[HarelM]

This might work, but have pontetial bugs. No that I think clients will change their unit preferences more than once, but I'd like to avoid it if possible.

[zstadler]

If and when a client changes their unit preference, it would affect offline behavior after the next offline file update. Just like when the style is updated.

[HarelM]

OK, there's some progress made with using addProtocol in the worker.
Here's the worker code that needs to be packed with dependencies in order to be loaded in the workers:

import { DemSource } from "./dem-source";
import type { LocalDemManager } from "./local-dem-manager";

let demSource: DemSource;

//(self as any).worker.actor.registerMessageHandler("init_contour", async (mapId: string, params: any) => {
demSource = new DemSource({
    url: "https://tiles.mapterhorn.com/{z}/{x}/{y}.webp",
    encoding: "terrarium",
    maxzoom: 12,
    worker: false,
});
(demSource.manager as LocalDemManager).getTile = async (url: string, abortController: AbortController) => {
    const actorRes = await (self as any).worker.actor.sendAsync({ type: "GR", data: { url, type: "arrayBuffer" }, targetMapId: "global-dispatcher" }, abortController);
    return {
        data: new Blob([actorRes.data]),
    };
}
//});
console.log("Registering protocol in worker");
(self as any).addProtocol("dem-contour", (url: any, ac: any) => {
    console.log("in worker", url);
    return demSource.contourProtocolV4(url, ac);
});

It's pretty short. I still need to figure out how to initialize the the source DEM in the worker with a message, but I can use hardcoded values until I figure this out, same for sending the request to the main thread instead of maybe handling it in the worker (i.e. allow calling maplibre's makeRequest from the worker instead of using the actor to send a message to the main thread).

The html code is the following, which draws the contours.
Fairly simple when you know the internals of everything :-P
I'll see if I can hack something that will work only for my app and think about ways to generalize it after it works and have good resutls.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Display a map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
    <script src="./dist/index.min.js"></script>
    <link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        async function init() {
            const workerCode = await fetch("./dist/add-protocol-worker.js").then((res) => res.text());
            const workerUrl = URL.createObjectURL(new Blob([workerCode], { type: "application/javascript" }));
            maplibregl.importScriptInWorkers(workerUrl);

            var map = new maplibregl.Map({
                container: "map",
                zoom: 12.55,
                center: [86.92731, 27.97797],
                hash: true,
                style: {
                    version: 8,
                    sources: {
                        dem: {
                            type: "raster-dem",
                            encoding: "terrarium",
                            tiles: ["https://tiles.mapterhorn.com/{z}/{x}/{y}.webp"], // share cached DEM tiles with contour layer
                            maxzoom: 12,
                            tileSize: 256,
                        },
                        contours: {
                            type: "vector",
                            tiles: ["dem-contour://{z}/{x}/{y}?contourLayer=contours&elevationKey=ele&levelKey=level&multiplier=3.28084&overzoom=1&thresholds=11*200*1000~12*100*500~13*100*500~14*50*200~15*20*100"],
                            maxzoom: 16,
                        },
                    },
                    layers: [
                        {
                            id: "hills",
                            type: "hillshade",
                            source: "dem",
                            paint: {
                                "hillshade-exaggeration": 0.25,
                            },
                        },
                        {
                            id: "contours",
                            type: "line",
                            source: "contours",
                            "source-layer": "contours",
                            paint: {
                                "line-color": "rgba(0,0,0, 50%)",
                                "line-width": ["match", ["get", "level"], 1, 1, 0.5],
                            },
                            layout: {
                                "line-join": "round",
                            },
                        },
                        {
                            id: "contour-text",
                            type: "symbol",
                            source: "contours",
                            "source-layer": "contours",
                            filter: [">", ["get", "level"], 0],
                            paint: {
                                "text-halo-color": "white",
                                "text-halo-width": 1,
                            },
                            layout: {
                                "symbol-placement": "line",
                                "text-anchor": "center",
                                "text-size": 10,
                                "text-field": [
                                    "concat",
                                    ["number-format", ["get", "ele"], {}],
                                    "'",
                                ],
                                "text-font": ["Noto Sans Bold"],
                            },
                        },
                    ],
                },
            });
        }
        init();
    </script>
</body>

</html>

[HarelM]

I was able to reduce the size of the worker script by copying the parseUrl method to my code (single line method):

import { LocalDemManager } from "./local-dem-manager";
import { decodeOptions, getOptionsForZoom } from "./utils";

const localDemManager = new LocalDemManager({
    demUrlPattern: "https://global.israelhikingmap.workers.dev/jaxa_terrarium0-11_v2/{z}/{x}/{y}.webp",
    cacheSize: 100,
    timeoutMs: 10_000,
    encoding: "terrarium",
    maxzoom: 11,
    getTile: async (url: string, abortController: AbortController) => {
        const actorRes = await (self as any).worker.actor.sendAsync({ type: "GR", data: { url, type: "arrayBuffer" }, targetMapId: "global-dispatcher" }, abortController);
        return {
            data: new Blob([actorRes.data])
        }
    }
});

(self as any).addProtocol("dem-contour", async (request: any, abortController: AbortController) => {
    const [, z, x, y] = /\/\/(\d+)\/(\d+)\/(\d+)/.exec(request.url) || [];
    const options = decodeOptions(request.url);
    const data = await localDemManager.fetchContourTile(
        Number(z),
        Number(x),
        Number(y),
        getOptionsForZoom(options, Number(z)),
        abortController,
    );
    return { data: data.arrayBuffer };
});

Here's the updated code, which uses Mapeak's terrrainRGB tiles (hardcoded).
I'll try to incorporate the worker generated code in my app and see how it behaves, would be interesting :-)

I'll probably open a PR to allow exporting some of the stuff that I'm using.

[HarelM]

Looks like this is working for feet as well, nice!
Here's how it looks in my local environment debug version of the website:

I need to figure out why the only the 100 lines are shown and not the 10 as well, but otherwise looks great.

[HarelM]

Seems like I needed to better configure the protocol to use 10 "steps" for zoom 12 as well in order to get these lines (might be related to max zoom or something, I'm not sure).
In any case, it's working now as expected.
Last bug I need to solve is when switching from metric to imperial or back, the tiles are not refreshed well. Seems like it is related to the _zoomLevelsToOverscale feature I added to maplibre in order to get better label for contours and avoid some crashes on iOS. I seems that the cache there is not well configured to take into account changes in the url of a tile, so it keeps "old" spliced tiles.
This is a maplibre-gl-js bug nevertheless...
All in all, this works pretty well. I need to think where to keep the code related to this as currently I checked in the built code as I need to load it in the worker anyway, but using something similar to the RTL plugin code with an npm package seems like a better solution overall. More in the nice-to-have since I'm probably the only one that will use it.

@msbarry let me know if any part of it is interesting enough to make it back to maplibre-contours and I'll be happy to open a PR.