rowanwins / maplibregl-mapbox-request-transformer Goto Github PK

Where we use this plugin, I've changed the code from the README to this:

      const transformRequest = (url: string, resourceType?: MapLibreResourceType) => {
        if (isMapboxURL(url)) {
          return transformMapboxUrl(url, resourceType ?? MapLibreResourceType.Unknown, accessToken)
        }
        return {url}
      }

1. resourceType can be typed more strongly (ResourceType is exported by MapLibre). This should be fixed in the README.
2. resourceType can be undefined because maplibre types it as ?: ResourceType (why?!), but transformMapboxUrl does not allow this. This should be fixed in this project (probably?).

Both of these problems were reported by the TypeScript compiler.

I'm also reporting this with maplibre, the original typing is here:
https://github.com/maplibre/maplibre-gl-js/blame/main/src/util/request_manager.ts#L21

Some of Mapbox's newer layers, such as their updated Terrain DEM model, require transitioning to their v2 billing system. It seems like, from a technical perspective, this would be a simple thing to implement by reproducing the Mapbox code to create a "sku" token at regular intervals, as is done in Mapbox GL. Is your sense that implementing this in/alongside this library would violate Mapbox's terms?

I receive this error while drawing the map:

Error: layers[35].filter[3][1][0]: Unknown expression "pitch". If you wanted a literal array, use ["literal", [...]].

The first part changes, but it's always highlighting the 'Unknown expression "pitch"'.

For example, does it support maplibre-gl.js v1.15.2?
Or only v2.0.0 and above?

It's not a issue, I just want to point out that there is an error with the install command

install command in npmjs readme page
npm install maplibregl-mapbox-url-transformer --save

I think it should be like install button
npm i maplibregl-mapbox-request-transformer

Hi Rowan,

I have modified the functions slightly to be used in my opensource project to support legacy mapbox styles with the maplibre 2+ library.

GEOLYTIX/xyz#660

How would you like us to attribute your work?

I have for now added a link in a comment with transform method.

This issue describes a maplibre/mapbox interoperability issue which may be associated with missing functionality in this plugin.

Geo-referencing a GeoTiff image into a mapbox map results in black background in the image transparent areas, instead of showing the map layer under

Note: The tests in this issue use the mapbox style mapbox://styles/mapme1/clbmiaqhu000a14s6w4wqmoij
It is a custom style produced by loading a GeoTiff image in mapbox studio. The image has transparent background.
The flow: load image, create tileset, add as a layer on top of a standard mapbox map.

I created https://jsfiddle.net/tivoni/k60nr18x which loads the style with mapblibregl-js v2.4.0.
Note the black tiles background:

The same style loaded with the older mapblibregl-js v1.15.2 takes into account the image transparent background and shows the map tiles under the image layer:

https://jsfiddle.net/tivoni/k60nr18x/6/

The difference between the jsFiddles is the maplibregl versions and the usage of this plugin (only with maplibre v2.4.0)

Investigation

The requested mapbox style points to this .json resource which includes:

"tiles": [
  "https://a.tiles.mapbox.com/v4/mapme1.9x3arx2f/{z}/{x}/{y}.jpg?access_token=..."

Note the .jpg extension in the url pattern. Since JPEG does not support transparency, the request for such tiles seems incorrect.

To verify this assumption I inspected devtools network panel:

maplibre v1.15.2 requests WEBP images - the tile preview shows transparent background:

In comparison, maplibre v2.4.0 requests JPEG images - the tile preview shows black background!

Possible solutions:

1. The mapbox json tile url pattern needs to be updated to something like:
   https://a.tiles.mapbox.com/v4/mapme1.9x3arx2f/{z}/{x}/{y}@2x.webp?access_token=...

• Is this a configurable setting in mapbox studio? (or: is this a question to mapbox support staff?)

2. Use transformRequest to catch and modify all .jpg tiles requests to *.tiles.mapbox.com:

import {isMapboxURL, transformMapboxUrl} from 'maplibregl-mapbox-request-transformer'

const map = new mapLibreGL.Map({
        ...
        transformRequest: (url, resourceType) => {
            if (isMapboxURL(url)) {
                return transformMapboxUrl(url, resourceType, accessToken)
            } else {
                const regEx =
                    /^https:\/\/[0-9a-zA-Z]+\.tiles\.mapbox\.com\/v[0-9]\/[0-9a-zA-Z]+\.[0-9a-zA-Z]+\/\d+\/\d+\/\d+\.jpg\?/
                if (regEx.test(url)) {
                    url = url.replace('.jpg', '@2x.webp')
                }
                return {url}
            }
        }

Note: the above code is confirmed to: (A) fetch the webp tiles and (B) display the layer under transparent part of the image correctly. Meaning, no black background appears and the map tiles renders under the transparent areas as expected.

3. Integrate (2) into the maplibregl-mapbox-request-transformer plugin

@rowanwins your insights/advice is appreciated 🙏🏼